上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 ブログを見やすく作るのは、訪問者の印象を良くする一因と考えられます。印象が良ければ、ブックマークされる確率も上がるかも知れません。
 しかし、さらに本文中でタグを利用して見やすくすることは、検索エンジン最適化の上でも効果を発揮すると考えられます。




3FaithBlackのタグ構造



 3FaithBlackでは、「本文部分」を最重要視し、他の場所には「論理強調」等のタグを極力使っていません。ほぼすべての場所で「div」「span」コメントフォームで「table」タグを利用しているだけです。
 本文で論理強調を使えば、検索エンジンがクロールしたとき、自ずと本文が目立つようにする仕掛けです。(効果は分かりませんが…)

 唯一使っているのが、ブログタイトルに「H1」タグ、カテゴリに「H2」タグ、記事タイトルに「H3」タグを利用するのみです。
 そういう意味で、本文中で「H4(小見出し)」「strong(太字)(B)」「em(斜体)(I)」などを利用すると、検索エンジン最適化の観点から効果的である可能性があります。




視覚的にも分かりやすくする



 例えば、当サイトであれば↑この上の目立つ小見出しは「H4」タグを使っています。
 本文編集時、

文章文章文章…
 :
 :
<H4>見出しタイトル</H4>
文章文章文章…
 :
 :

 このように書くだけで、自動的にスタイルシートが適応されるようにしています。
 これと同じようなことをするには、スタイルシートのどこか(基本的にはどこでも可)に以下の一文を追加します。

.text_body H4{
background:#333; (背景を濃いグレーに)
border-left:10px solid #f06; (H4ブロック左に、赤い10pxの太い直線)
padding:2px 10px; (文字周りの空間 上下2px 左右10px)
color:#fff; (文字色を白に)
}

 こんな感じで記述すると、当サイトの小見出しと同じような仕組みを作ることが出来ます。

※赤字の「.text_body」というのは、「3FaithBlackの記事本文を包むブロック(クラス text_body)内にある、H4タグ」に関してのみ、このスタイルを適応する。という命令です。



H4以外にもスタイルを。

 例えばこの↑のさらに小さい見出しは、先ほどと同様の形で

<i>子小見出し</i>

 このように記述するだけで、使用出来るようにしています。(角丸はjQueryプラグイン(javasvript)を使用していますので、スタイルだけでは作れません)
 FC2ブログをはじめ、他のほとんどのブログでの記事編集画面で、ワンクリックで出せるタグです。

(例)FC2ブログ編集画面
fc2・斜体(i)


 もう一つは、文中の「太字」です。
<strong>太字</strong>


(例)FC2ブログ編集画面
fc2・太字(strong)


 これらは、H4の時同様、以下の一文をスタイルシートに追加します。

.text_body i{
background:#f06; (文字背景を赤に)
padding:4px 20px; (文字周りの空間)
color:#fff; (文字色を白に)
}
.text_body strong{
background:#eed; (文字背景を薄いベージュに)
}


 これで、記事を書く度にレイアウトに時間を取られることなく、さらにブログ記事全体でのデザインを統一して、読みやすいブログを書くことが出来るようになります。
 スタイルは、他にも色んなデザインを与えることが出来ます。詳細は以下から。
実用的スタイルシート入門


■メニューに戻る
3FaithBlack徹底攻略・はじめに
このエントリーをはてなブックマークに追加
Tue.06.28.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。