カンタンに出来るアメブロカスタマイズ方法をお伝えしていっていますが、今回は、アメブロの記事部分を枠で囲んでみるカスタマイズ方法をお伝えしていきます。
目次
アメブロの記事部分を枠で囲む方法
記事部分の設定をする前に、カスタマイズができるようにこちらの設定にしておきましょう。
基本設定は、こちらです。
アメブロカスタマイズをする際の基本手順
基本の記事部分の囲み設定
カスタマイズできるCSSのコード部分に下記のような記述があります。
1 2 3 4 5 6 | /* (3-1-b) メイン背景 内側 --------------------------------------------*/ /* メインエリア背景 内側 レイアウト */ .skin-blogMainInner { padding: 30px 0 10px; } |
とありますが、↑こちらのタグ↑の下に下記を書き加えます。
1 2 3 4 5 6 7 8 9 10 | /* (3-1-c) 記事エリア --------------------------------------------*/ /*記事エリア背景*/ .skin-entryInner{ border:1px solid #cccccc; background-color: #FFFFFF; padding: 20px; margin-left: -20px; width:100%; } |
記事エリアという部分を追加しました。
カスタマイズ後
こんな感じで、記事の周りを直線の線で囲むことができます。
囲み線を丸くする
アレンジとして、直線を丸くする方法をお伝えします。
1 2 3 4 5 6 7 8 9 10 11 | /* (3-1-c) 記事エリア --------------------------------------------*/ /*記事エリア背景*/ .skin-entryInner{ border:1px solid #cccccc; <span style="text-decoration: underline; color: #ff0000;">border-radius:10px;</span> background-color: #FFFFFF; padding: 20px; margin-left: -20px; width:100%; } |
線を丸くするタグを追加すると、角が丸くなります。
囲み線をドットにする
1 2 3 4 5 6 7 8 9 10 | /* (3-1-c) 記事エリア --------------------------------------------*/ /*記事エリア背景*/ .skin-entryInner{ border:1px <span style="text-decoration: underline;"><span style="color: #ff0000; text-decoration: underline;">dotted</span></span> #cccccc; background-color: #FFFFFF; padding: 20px; margin-left: -20px; width:100%; } |
囲み線をピンクにする
1 2 3 4 5 6 7 8 9 10 | /* (3-1-c) 記事エリア --------------------------------------------*/ /*記事エリア背景*/ .skin-entryInner{ border:1px solid <span style="text-decoration: underline; color: #ff0000;">#ffb6c1; </span>background-color: #FFFFFF; padding: 20px; margin-left: -20px; width:100%; } |
赤字下線を付けている部分の色コードを変えると、お好みの色で枠線が作れますよ。
おまけ
線の種類
- dotted…ドット
- solid…直線
- dashed…破線
- double…二重線
border:2px solid #ffdab9; のborder:2px dashed #ffdab9; に変更すると破線になります。
お試しください。
