by echo  
ディズニー

記事本体に使われている p, hタグ, blockquote などについて解説します。

記事中には構造化データを考慮して、h2, h3 の見出しタグは使った方が良いと思います。スーパー超シンプルテンプレートでは h2, h3, h4 までの見出しタグにスタイルを定義しています。それ以下は通常のブログ記事ではあまり使わないだろうという判断から定義していません。

h2, h3, h4 タグは本文がなるべく見やすいように上下の空白を広めにとっています。表示結果を確認してください。

見出しタグ h2

スーパー超シンプルテンプレートの記事タイトルは h1 になります。従い、記事中の見出しタグの最上位は h2 からになります。CSS の定義は以下の通りです。

.articleBody h2{font-size:150%;border-left:solid 1px #6D5BAA;margin:40px 0 20px;padding:25px 10px}

上下の余白はそれぞれ 40px, 20px と大きめに設定しています。基本となるフォントサイズは 16px に設定しているので、150% は 24pxになります。

見出しタグ h2が改行されるくらいに長い場合は、このように表示されるというサンプル表示のために少し長めの見出しをつけてみました

記事中の見出しタグは簡潔にしたようがよいと思いますが、長くなってしまうことも多々あります。2行以上に亘る場合はこのような表示になります。

見出しタグh3

見出しタグ h3 はこのように表示されます。CSSの定義は以下の通り。

.articleBody h3{font-size:125%;border-bottom:solid 1px #DDD;margin:40px 0 20px}

基本となるフォントサイズは 16px に設定しているので、125% は 20pxになります。h2 と同様に上下の余白はそれぞれ 40px, 20px です。

見出しタグ h4

CSS は以下の通り。

.articleBody h4{font-size:112.5%;margin:40px 0 20px}
上下の余白は h2, h3 と同じで、フォントサイズは18pxです。

引用(blockquote / p なし)
引用文書 blockquote に p を付加しないと引用符は表示されません。
<blockquote>〜〜〜〜〜</blockquote>
引用(blockquote / p あり)

引用文書 blockquote に p を付加すると引用符が表示されます。
<blockquote><p>〜〜〜〜〜</p></blockquote>

リスト

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

テーブル

タイトル1タイトル2タイトル3
項目1項目1項目1
項目1- 1項目2- 1項目3- 1

コメント

0 件
コメントをどうぞ
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

トラックバック

0 件

スポンサーリンク