WordPressでテーマBizVektorを使用してブログを作成した際に、パンくずリスト(現在どのページを見ているのか階層で示してくれるガイド)を表示してくれるようになっています。

このパンくずリストの表示位置を変えてみます。(画像の赤枠は、変えた後の表示位置です)

これ、移動するのが若干面倒なのと気を付けないと、phpやhtmlの知識が無いと失敗してブログ自体表示できなくなる可能性もあるので注意が必要です。

修正箇所

まず、header.phpにおける、divタグのid=”main”の直前にある以下ソースの箇所。
div id=”panList”で囲まれた9~15行目を削除します。
[php]




[/php]

これで、従来表示していたパンくずリストが表示されなくなります。

次に、single.phpを修正。div id=”content”の後に以下のソースを追加。
[php]


[/php]

single.phpは個別投稿記事のページ。他にもpage.php(固定ページ)、カテゴリやタグ用のphpにも同じように上のソースを追加していく必要があります。

追加が終わったら、最後にCSSで見た目を整えます。style.cssの末尾に以下のソースを追加すればいいだけです。
[php]
#panListCustom { clear: both; font-size: 12px; color: #999;
display: block; overflow: hidden; width: 100%;
text-align: left; padding: 0px; }
#panListCustom ul a { color: #999; }
#panListCustom ul li { display: inline-block; padding-right: 5px; }
[/php]

ということで基本的な移設はこれでOK。

修正箇所:補足版

実は、上で説明した方法だけを実施すると、パンくずリストの周囲に大きな余白ができてしまいます。これは、ulタグとliタグによる影響なので、CSSでpadding指定を0pxにしてもこの空白は無くすことができません(多分)。

CSSの修正ではなく、module_panList.phpの修正で対処します。ここ、難所ですので必ずmodule_panList.phpの事前バックアップを。具体的な修正箇所は明示するのが大変なので、ざっくり言うと「ulタグ、liタグをすべて削除する」でOKです。

そして最後にCSSで見た目を整えます。先ほどのstyle.cssに追加したソースではなく、
[php]
#panListCustom { clear: both; font-size: 10px; color: #999;
padding: 5px; }
#panListCustom a { color: #999; }
[/php]
というソースにしてあげればOKです。paddingを試しに5pxにしていますが、この部分で余白を調整できます。あと、フォントサイズ指定のピクセル数を10pxにしていますが、12pxくらいにしてあげたほうが見やすいとは思います。