ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【Web制作】見出し・引用・リストのデザインでサイト好感度アップ!人とGoogleに

マッサージで好感度アップの女性

ブログ記事の中の見出し、リスト、引用などは視覚効果により文章をわかりやすくします。これらは人間にとってだけでなくGoogleなどの検索エンジンにとっても内容を解析しやすくします。今回は見出し、リスト、引用の作り方を公開します。

HTMLでの表現は、見出しは「h1〜h6」、リストは「ul,li、ol,li」、引用は「blockquote」になります。Googleはhtmlの構造で内容を理解しているようです。でも人間には見ためも重要なのでスタイルシートでデザインします。

ゆめぴょん(@yume_pyon)です。こんちはっ!

ブログ記事の見ためには「見出し」「リスト」「引用」以外にも、適切な画像や写真を使うことも有効です。それらについての記事もぜひ参考にしてみてください。

【Web制作】5分で作成!読者をひきつけるアイキャッチやスクショ編集方法【Web制作】5分で作成!読者をひきつけるアイキャッチやスクショ編集方法

ブログは内容が一番大切ですが、文章を説明するためやイメージしやすいようにアイキャ…

【WordPress】Auto Post Thumbnailでアイキャッチやサムネイル画像を自動設定!過去記事も【WordPress】Auto Post Thumbnailでアイキャッチやサムネイル画像を自動設定!過去記事も

「Auto Post Thumbnail」は新規投稿だけでなく過去記事のFlic…

画像についての補足説明を少しだけ。人間にとっては「見ため」「デザイン」で充分ですが、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」の中に書けばいいです。保存ボタンを忘れずに。

見出しタグとリストタグ

図1[出典『海猿 BRAVE HEARTS』動画あり。映画感想!5つのおすすめを大震災後に考える

リスト「ul,li、ol,li」のデザイン

上図1の例では、自動連番リスト「ol」を使っています。数字の他に「・」をつけるのが「ul」です。HTMLタグでは、<ol><li>…</li>…</ol>と、<ul><li>…</li>…</ul>です。

リストは箇条書きや要点を並べたりする時に便利です。本でもブログでも同じですが「リスト」の使い方が上手な文章はとても読みやすいし、ポイントを把握するのも楽です。

現在の「リスト」のCSS(スタイルシート)は下のとおりです。リストは無理に枠に囲まない方が好きという人もいますので、お好みで修正してみてください。

引用「blockquote」のデザイン

引用タグ

図2[出典【映画感想】[桐島、部活やめるってよ]階層と本音!日本社会の風刺か

上図2のグレイで囲まれた部分が「引用」です。「引用」を表すためのHTMLタグは<blockquote> … </blockquote>です。本文より少し小さめの文字にしたり、枠で囲んだり、引用符をつけたりして表現することが多いです。

他のブログやサイトからコンテンツを抜き出してきた時には、それが「引用」であることを示す必要があります。さもないとGoogleなどに「パクリ」「コピー」サイトだと判定されかねません。最悪、検索エンジンに表示されなくなります。

書評や映画などの感想、商品のレビューなどを書く場合も、Amazonやウィキペディア、映画サイトなどから文章をコピーすることがあると思います。その場合も「引用」だと示す方が読者にも検索エンジンにも優しいと思います。

現在の私の「引用」のCSS(スタイルシート)は下のとおりです。引用符「“」を左上に固定表示しています。もっときれいなフォントが見つかれば変更するつもりです。

まとめ:今日のゆめぴょんの知恵

「見出し」「リスト」「引用」のスタイルについては以上です。HTMLやCSSについては下の記事も参考にしてみてくださいね。

【Web制作】hタグ見出し・strong強調などのSEO対策や正しい使い方【Web制作】hタグ見出し・strong強調などのSEO対策や正しい使い方

そろそろWordPressで構築したこのブログの見栄え(テーマ)を改良しようかと…

【Web制作】HTML5タグとCSS3のIE6-8対策方法!FacebookのOGP対応も【Web制作】HTML5タグとCSS3のIE6-8対策方法!FacebookのOGP対応も

ブログやサイトを作成する時に今も悩ましいのがIE(Internet Explor…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【Web制作】HTML5タグとCSS3のIE6-8対策方法!FacebookのOGP対応も【Web制作】人気記事一覧をサイドバー固定して自動追尾する方法:次記事»
ページ
↑先頭
ホーム