ブログ記事の中の見出し、リスト、引用などは視覚効果により文章をわかりやすくします。これらは人間にとってだけでなくGoogleなどの検索エンジンにとっても内容を解析しやすくします。今回は見出し、リスト、引用の作り方を公開します。
HTMLでの表現は、見出しは「h1〜h6」、リストは「ul,li、ol,li」、引用は「blockquote」になります。Googleはhtmlの構造で内容を理解しているようです。でも人間には見ためも重要なのでスタイルシートでデザインします。
ゆめぴょんです。こんちはっ(^^)/
ブログ記事の見ためには「見出し」「リスト」「引用」以外にも、適切な画像や写真を使うことも有効です。それらについての記事もぜひ参考にしてみてください。
画像についての補足説明を少しだけ。人間にとっては「見ため」「デザイン」で充分ですが、Googleなどの検索エンジンにはimgタグの「alt」による説明が重要になってきます。
また表示速度の高速化のためにはimgタグの「width」「height」も欠かせません。スタイルシートでもいいです。多くの画像・写真を扱う場合には面倒になりがちですが、意識的に設定するのがSEO・アクセスアップへの近道です。
ではさっそくですが、このブログで実際に使っている「見出し」「リスト」「引用」について公開していきます。2013年8月14日時点のものです。1ヶ月後には全然違うデザインになっているかもしれません（笑）
私のブログの見出し「h2、h3」のデザイン
見出しタグとは「h1〜h6」のことです。HTMLでの表現は<h1> … </h1>や、<h2> … </h2>などです。これらはGoogleも重要視しているようです。ただ適切に使わないとSEO的にもマイナスになるので注意してください。
マイナスになるのは、ただキーワードを囲んでいる場合などです。あくまでも「見出し」なので、本でいうと目次に表示される「章」や「節」の短い題名です。だから「見出し」の後には本文がなければおかしいです。
私は本文中の大きなくくりの章には「h2」を、その中の小さな章には「h3」を利用しています。「h1」はページのタイトルに使っています。「h4〜h6」は今は使ってないはず。テーマによっては利用されてるかも。
よく話題になる「h1」はページ中に1回しか使えないのかの件ですが、「HTML5」で適切に「section」タグを配置している中でならページ中で複数使えます。でも旧ブラウザは解釈できないかも。
現在の「見出し」スタイルは下図1のとおりです。「h2」「h3」はあまり違いがないよう表現しています。下に点線のある方が「h2」タグです。
CSS（スタイルシート）は下のとおりです。よく使われているスタイルを自分の好みでアレンジしました。文字の色を変えたい場合は「color:」の後を変更すればいいです。色探しには「colourcode」が便利です。文字の左や下の枠の色は「border」行の「#」以降を変えればいいです。
文字（フォント）の大きさは「font-size:」の後の数値を変更してください。ここでは「px」のみ書いてますが「em」「rem」でもいいでしょう。見出しの周りの空白は「margin」「padding」の行の数値を好みで変えてください。
スタイルシートは拡張子「.css」のファイルです。WordPressを利用している方は管理画面「外観」→「テーマ編集」→「style.css」の中に書けばいいです。保存ボタンを忘れずに。
[css]
h2 {
margin: 15px 0 20px 0px;
padding: 5px 0 5px 10px;
border-left: 8px solid #bc4b4b;
border-bottom: dashed 1px #bc4b4b;
font-size: 19px;
color: #800000;
}
h3 {
margin: 20px 0 20px 3px;
padding: 5px 10px 5px 6px;
border-left: 7px solid #bc4b4b;
font-size: 18px;
color: #800000;
}
[/css]
図1［出典『海猿 BRAVE HEARTS』動画あり。映画感想！5つのおすすめを大震災後に考える］
リスト「ul,li、ol,li」のデザイン
上図1の例では、自動連番リスト「ol」を使っています。数字の他に「・」をつけるのが「ul」です。HTMLタグでは、<ol><li>…</li>…</ol>と、<ul><li>…</li>…</ul>です。
リストは箇条書きや要点を並べたりする時に便利です。本でもブログでも同じですが「リスト」の使い方が上手な文章はとても読みやすいし、ポイントを把握するのも楽です。
現在の「リスト」のCSS（スタイルシート）は下のとおりです。リストは無理に枠に囲まない方が好きという人もいますので、お好みで修正してみてください。
[css]
ul {
margin: 10px 0 16px 5px;
padding: 5px 0;
border: 2px solid #ffdd00;
background-color: #ffffdd;
list-style: disc outside;
font-size: 14px;
-o-border-radius: 15px;
-ms-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
ul li {
text-indent: -5px
}
ol {
margin: 10px 0 16px 5px;
padding: 5px 0 5px 7px;
border: 2px solid #ffdd00;
background-color: #ffffdd;
list-style: decimal outside;
font-size: 14px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
ol li {
text-indent: -8px
}
[/css]
引用「blockquote」のデザイン
図2［出典【映画感想】［桐島、部活やめるってよ］階層と本音！日本社会の風刺か］
上図2のグレイで囲まれた部分が「引用」です。「引用」を表すためのHTMLタグは<blockquote> … </blockquote>です。本文より少し小さめの文字にしたり、枠で囲んだり、引用符をつけたりして表現することが多いです。
他のブログやサイトからコンテンツを抜き出してきた時には、それが「引用」であることを示す必要があります。さもないとGoogleなどに「パクリ」「コピー」サイトだと判定されかねません。最悪、検索エンジンに表示されなくなります。
書評や映画などの感想、商品のレビューなどを書く場合も、Amazonやウィキペディア、映画サイトなどから文章をコピーすることがあると思います。その場合も「引用」だと示す方が読者にも検索エンジンにも優しいと思います。
現在の私の「引用」のCSS（スタイルシート）は下のとおりです。引用符「“」を左上に固定表示しています。もっときれいなフォントが見つかれば変更するつもりです。
[css]
blockquote {
position: relative;
margin: 5px 0 5px 5px;
padding: 5px 3px 5px 24px;
background-color: #eee;
border-left: 4px solid #ddd;
line-height: 1.3;
font-size: 12px;
color: #666;
}
blockquote:before {
position: absolute;
left: 0;
top: 0;
padding: 0;
content: "“";
line-height: 1em;
font-family: Georgia,Arial;
font-size: 400%;
color: #999;
}
[/css]
まとめ：今日のゆめぴょんの知恵
「見出し」「リスト」「引用」のスタイルについては以上です。HTMLやCSSについては下の記事も参考にしてみてくださいね。
ゆめぴょんでした。ちゃおっ！
