Blogger:新着情報の表示エリアの周りに太い枠線を設置して一つのパネルのように魅せる

「Blogger の各要素の周りに太い枠線を設置することで、パネルが並んでいるようなデザインにする」シリーズの構成記事です。

新着情報の表示エリアの周りに太い枠線を設置して一つのパネルのように魅せてみましょう。

なお、新着情報は Feed によって表示しています。

枠線を太くする！

テンプレートのカスタマイズにて、上級者向け→CSSを追加にて以下のスタイルシートを適用します。

.main > .Feed {
border-style: solid;
border-width: 10px;
border-color: #eeeeee;
margin: -10px -30px -10px -30px;
padding: 0px 20px 0px 20px;
}
.Feed > h2 {
padding: 0px;
margin: 0px;
}

太くした結果！

太くした結果次のようになりました！

新着情報の枠線を太くした結果

これで、新着情報 が一つのパネルのように見えるようになりました！