テキストボックスを使ったSEOに役立つCSSテクニック

SEOに役立つCSSテクニック～テキストボックス～

前回のSEOに役立つCSSテクニック～画像置換え～からだいぶ間が空いてしまいましたが、今回はテキストボックス（リンクBOX）についての説明です。

企業からのお知らせ欄や新着情報欄に、過去の履歴を一覧でズラーッと表示しているサイトも多いのですが、ユーザビリティ上は履歴が多い場合にはボックス化した方が良いと感じています。

中小規模サイトのSEOにとってテキスト量はとても大切な要素ですが、画面上をテキストが覆い尽くしている状態は見栄えがよくありません。

テキストボックスの活用

テキストボックスとは特定の大きさの枠（BOX）を作り、その中にテキストやリンクを表示し、指定した高さを超える部分は隠し、スクロールバーで表示する事です。

【HTML】
<h3>SEO質問箱の最新記事</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
<a rel="nofollow" href="http://www.seo-blogs.biz/category/faq/feed/">新着情報</a>
</p>

【CSS】
ul.seo-faq{
height: 154px;
list-style-type: disc;
margin-left: 10px;
overflow: auto;
}

ul.seo-faq li{
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999999;
margin-bottom: 5px;
margin-right: 10px;
line-height: 18px;
padding-bottom: 5px;
}

ulタグを高さ指定し、154pxを超えるとoverflow: autoにより自動的にスクロールバーが表示されるようになっています。

SEO質問箱ページのようにカテゴリの新着記事を表示するには、WordPressでカテゴリ別の新着記事を表示する方法をご覧ください。

※テキストボックスが小さすぎたり、相互リンクの為のボックスとして使用するとスパム行為として検索エンジンからペナルティを受ける場合がありますので注意が必要です。