エントリー本文のHTML構造

今回のカスタマイズでは、ブログの各エントリーの文章表示を変更してみます。

エントリー部分の例

エントリー部分は大きく「タイトル（.entry-header）」「内容（entry-content）」「フッター（entry-footer）」の３つに分かれます。エントリーの各部分に、どのようなクラスが指定されているかをチェックしてみます。

各部分のクラス指定

具体的なHTMLのタグは、以下のようになっています。

エントリー部分のHTML構造

それでは、具体的に表示をカスタマイズしてみます。

タイトルに枠線を引く

まずは、エントリーのタイトル部分に枠線を引いて、タイトルを目立たせてみます。以下のようなCSSを、カスタムCSSで指定してみてください。（ブログの「デザイン」->「カスタムCSSを編集」）

.entry-header {
  padding-left:10px;
  border-left:5px solid #006;
  border-bottom:1px solid #666;
}

以下のように、タイトルに枠線が引かれたかと思います。

本文に枠線を指定

エントリーの本文にも枠線を指定してみます。以下のようなCSSをカスタムCSSに追加します。

.entry-content{
  padding: 5px 10px;
  margin: 10px;
  border:1px dotted #666;
}

エントリー部分の見た目が随分とかわりましたね！