ブログでは黄金比率率ともいわれ、アフィリエイトでもよく使われている3カラム方式に改造してみました。
やり方は、人によっていろいろあると思いますが、表示比率は以下の通りとします（結果的にそうなった部分もあるのだが）。
|
幅のマージン：850px（開設当初と同じ）。 |
まず、スタイルシートのテンプレートを改造します。 かなり下の行（914行目あたり）に、3カラムに相当する設定部分があります。939行目以降に右側に相当する項目を追加しました。
|
.layout-three-column #delta { margin: 15px 5px 0 5px; width: 200px; background:
none; } |
このように追加したら、左側と中央の部分の数字を訂正して、段崩れが起こらないようにします。
|
.layout-three-column #alpha { margin: 0; width: 200px; background: #e6ecf2;
} |
終わったら、テンプレートを再構築します。
メインテンプレートの訂正
メインテンプレート部分では、左側に相当する部分を追加、中央と右側に相当する部分を訂正します。 31行目以降を訂正することになりますが、20行目をスタイルシートで設定した項目に合うようにします。この部分は、デフォルトでは左がエントリー、右が項目表示となっています。この部分を書き換えると、左寄りレイアウトや3カラムレイアウトにできます。 赤文字で示した部分が直した箇所です。
|
body class="layout-three-column main-index" |
次に、左側部分は、スタイルシートで指定した#alpha、中央は#beta、右側は#deltaになるようにしておきます。 中央部分と右側の部分は文字を入れ換えるだけで済むので、最初にこれを行っておくのがよいでしょう。 33?34行目のところはデフォルトでは以下のようになっています。
|
<div id="alpha"> |
この部分を赤文字で示したように直します。
|
<div id="beta"> |
この部分は、中央の部分となります。
76-77行目の部分も同じように赤文字のように直します。
|
<div id="delta"> |
この部分は、右側となります。
最後に、左側に相当する部分を追加します。挿入位置は、33行目の手前部分です。
|
<div id="beta"> |
終わったら、テンプレートを再構築します。それから、サイトの確認をして下さい。
3カラムにする方法は、いろいろとあると思いますし、配布されているテンプレートを使うのも良いですが、テンプレートを解析してみるのもHTMLやCSSを知る上で良い勉強になると思います。
コメントする