WordPress の賢威７で２カラムレイアウトにしている時、デフォルトの右カラム左カラムの割合や、右カラムと左カラムの隙間の割合を変更する方法を解説します。
この方法は、全ページ同じ割合で反映されます。
変更するファイルは？
カラム幅の指定は、ＣＳＳファイルで行われています。
変更するファイルは、賢威テンプレート内にある base.css ファイルです。
「賢威の設定」 → 「サイトの基本レイアウト」で、「２カラム」または「２カラムリバース」の２パターンで、それぞれ設定されていますので、必要な箇所をそれぞれ２ヶ所変更するだけなのでとても簡単です。
具体的な変更方法
賢威７のコーポレート版テンプレート、base.css を元に解説します。
変更箇所は、５１３～５３３行目です。
※バージョンにより行数が若干異なる可能性があります。
「２カラム」用
「２カラム」用は、こちら。
左側にコンテンツが入るパターンです。
.col2 .main-conts{
float: left;
width: 65%;
}.col2 .sub-conts{
float: right;
width: 30%;
}
賢威７はデフォルトで、左右幅 1200px の指定になっていますので、そのうち左側のコンテンツ割合が６５％、右側の割合が３０％、左右カラムの間の隙間の割合が差し引き計算上５％となっています。
この割合を変更すると表示の割合を変える事が出来ます。
因みに当サイトは、左カラムが６９％、右カラムが３０％、左右の隙間は１％の設定にしております。
「２カラムリバース」用
「２カラムリバース」用は、こちら。
右側にコンテンツが入るパターンです。
.col2r .main-conts{
float: right;
width: 65%;
}.col2r .sub-conts{
float: left;
width: 30%;
}
賢威７はデフォルトで、左右幅 1200px の指定になっていますので、そのうち右側のコンテンツ割合が６５％、左側の割合が３０％、左右カラムの間の隙間の割合が差し引き計算上５％となっています。
この割合を変更すると表示の割合を変える事が出来ます。
bace.css の変更は、子テーマで
テーマを直接編集すれば変更は出来ますが、失敗すると最悪の場合ブログが表示されなくなってしまいます。
その危険を避けるためにも、子テーマを用意してそこで修正する方が安全です。
子テーマの用意については、こちらの記事を参考にして下さい。
