MENU

アメブロの記事部分を枠で囲む方法

2020 7/02

カンタンに出来るアメブロカスタマイズ方法をお伝えしていっていますが、今回は、アメブロの記事部分を枠で囲んでみるカスタマイズ方法をお伝えしていきます。

目次

アメブロの記事部分を枠で囲む方法

記事部分の設定をする前に、カスタマイズができるようにこちらの設定にしておきましょう。

基本設定は、こちらです。
アメブロカスタマイズをする際の基本手順

基本の記事部分の囲み設定

カスタマイズできるCSSのコード部分に下記のような記述があります。

とありますが、↑こちらのタグ↑の下に下記を書き加えます。

記事エリアという部分を追加しました。

カスタマイズ後

こんな感じで、記事の周りを直線の線で囲むことができます。

囲み線を丸くする

アレンジとして、直線を丸くする方法をお伝えします。

線を丸くするタグを追加すると、角が丸くなります。

border-radius:10px;の数字を変えると、丸くなる大きさが変わりますので、お試しください。

囲み線をドットにする

囲み線をピンクにする

赤字下線を付けている部分の色コードを変えると、お好みの色で枠線が作れますよ。

おまけ

線の種類
  • dotted…ドット
  • solid…直線
  • dashed…破線
  • double…二重線

border:2px solid #ffdab9; のborder:2px dashed #ffdab9; に変更すると破線になります。

お試しください。

この記事が気に入ったら
フォローしてね!

この記事を書いた人

メール対応・資料作成・Webサイト管理・SNS運用・ライティング・デザインまでワンストップ対応できるクリエイティブ秘書&ブロガー。

ブログは、フリーランスお仕事系お役立ち記事を載せています。
お仕事依頼はこちらから

目次
閉じる