●2カラム(左サイドバー)に変更する
公開テンプレートは、標準で3カラム表示となっています。カラムレイアウトは、各テンプレートの body 要素の class 属性を書き換える事により切り替えることができます。
「イの葉」のHPは、2カラム(左サイドバー)なのでこれに合わせて、3カラム・レイアウトから2カラム・レイアウト(左サイドバー) に変更した場合を紹介します。
まず、各テンプレートの
<body class="layout-three-column">
となっている赤色部分を
<body class="layout-two-column-left">
と青色に変更します。
「公開テンプレート」は、メインページ/カテゴリー・アーカイブ/日付アーカイブ/
エントリーアーカイブは全て3カラムの状態になっておりますので、例えば2カラム(左サイドバー)に変更する場合は、
右カラムを表示する
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
:
(ここに書かれているものをコピー)
:
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
の間に書かれている必要なメニュー(検索・カテゴリーアーカイブ・バナー等)をコピーし、左カラム
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
:
(ここにペースト)
:
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
にペーストしてください。そのあと
<!-- 右カラム開始 -->
:
<!-- 右カラム終了 -->
を丸ごと削除します。
この修正を行った後に「サイトを再構築」を行うと、
こんな感じで、左側にサイドバーがずらり並びます。
他のテンプレートも変更してみました。その結果がこれ!!
このテンプレートは、「エントリー・アーカイブ」です。
こんな風に、エントリー内容が左にずれてしまいました。この原因は何なのでしょか??
じつは前回、変更に変更を重ね最後の一歩のところでこうなってしまい、その原因を突き止める気もなくなってしまったことがありました。
今回はその原因を突き止めてみます。(笑)