TypePad 法人

記事本文のHTML構造

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

記事部分の例

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

各部分のクラス指定

具体的な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;
}

記事部分の見た目が随分とかわりましたね！

トラックバック

トラックバック url