暮らしとお財布にやさしい、心とお金の余裕を生む情報活用TOP SEO対策、インターネット・PCスキル
> パンくずリストを設置してみました

パンくずリストを設置してみました 

つい最近マーチャントJPで知り合い、そのコミュでの質問にも
答えてくれたキョンさんの勧めに則り、パンくずリストを設置
してみました。

手順としては、ネット上でスクリプトを拾ってきて、HTML内に
挿入し、その挿入部分の一部と、CSS内の数値を調整する
のですが、多少のソース理解が必要と思われますので、
以下で、具体的にどうしたかを説明したいと思います。


まず、HTMLのほうですが、

<!--Content S-->
<div id="content">

<!-- パンくずリスト S-->
<div style="margin: 0 0 0 15px; font-size: 110%; color: #555555">

<a href="<%url>"><!-- <%blog_name> -->スローライフアフィリエイトに学ぶ、心とお金の余裕を生むコンテンツ活用法TOP</a>

<!-- カテゴリ -->
<!--category_area-->
> カテゴリー [<%sub_title>]
<!--/category_area-->
<!-- カテゴリ -->

<!-- 月別アーカイブ -->
<!--date_area-->
> 月別アーカイブ [<%now_year>年<%now_month>月]
<!--/date_area-->
<!-- 月別アーカイブ -->

<!-- 検索 -->
<!--search_area-->
> [<%sub_title>] を含む記事
<!--/search_area-->
<!-- 検索 -->

<!-- 記事 -->
<!--permanent_area-->
<!--topentry-->
> <a href="<%topentry_category_link>"><%topentry_category></a><br>
> <%topentry_title>
<!--/topentry-->
<!--/permanent_area-->
<!-- 記事 -->

</div>
<!-- パンくずリスト E-->

のように、
<!--Content S-->
<div id="content">
の直後に、スクリプトを挿入します。

そして、茶文字の部分が自分なりに、書き換えた箇所です。

フォントを少し大きめにしたことと、ブログ名も記事タイトルも
長いものが多く、3階層目までの表示になると、中途半端な
箇所で自動改行されてしまうため、<br> をひとつ入れて、
3階層目まで表示が必要なときのみ、>の直前で
改行されるようにしています。


次にCSSですが、こちらは見栄えの調整だけです。

#content {
width : 930px;
margin: 10px 15px 0px 15px;
}

の部分の、margin: で設定されている数値を変えて、
このパンくずリストの周囲の隙間の大きさを調整しています。

元々は、
margin: 0px 0px 0px 15px;
だったのですが、これではパンくずリストが上のオレンジ色の
ヘッダー部分にくっついてしまうため、隙間を空けています。

marjin: の後続の4つの数字は、順に、contentエリア周囲の
上・右・下・左のマージンの大きさを表しています。

ここでは、上部に10pixel入れて、左右は適当です(どうせ
配置はセンタリングされますので)。


パンくずリストは、キョンさん曰く、内部リンクの強化になり
SEO的にベターです。
また何より、トップページ以外から入ってきた訪問者にやさしく
なると思いますので、テンプレートをさわれる方は、試して
みられてはどうでしょうか。

それでは。
関連記事

コメント

コメントの投稿














管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://dohgo.blog22.fc2.com/tb.php/52-922ea639

美容整形