サポート
カスタムテーマで記事表示幅やサイドバーの幅を変更する方法
ブログのデザインに「カスタムテーマ」をご利用の場合は、以下の手順でサイドバーや記事表示部分の幅を変更することができます。
カスタムテーマで記事表示幅やサイドバーの幅を変更する方法
- [ブログ管理] - [デザイン] - [カスタムCSSウィザード] を開く
- 左側のメニューから [カスタムCSS] を開く
- ご利用のレイアウトに合わせて、以下いずれかのソースを貼り付ける
※ 今回は記事表示部分を 700 px で表示するように設定しています。 - [適用] をクリックする
- [変更を保存] をクリックする
2列(左サイドバー)の場合
.layout-two-column-left #container { width: 900px; } .layout-two-column-left #alpha { width: 200px; } .layout-two-column-left #beta { width: 700px; }
2列(右サイドバー)の場合
.layout-two-column-right #container { width: 900px; } .layout-two-column-right #alpha { width: 700px; } .layout-two-column-right #beta { width: 200px; }
3列の場合
.layout-three-column #container { width: 1100px; } .layout-three-column #alpha { width: 200px; } .layout-three-column #beta { width: 700px; } .layout-three-column #gamma { width: 200px; }
3列(右サイドバー)の場合
.layout-three-column-right #container { width: 1100px; } .layout-three-column-right #alpha { width: 700px; } .layout-three-column-right #beta { width: 200px; } .layout-three-column-right #gamma { width: 200px; }
1列の場合
.layout-one-column #container { width: 700px; }
以上の手順で、記事表示幅を変更できます。
また、上記ソース内の「#alpha」「#beta」「#gamma」は「記事表示部分」「サイドバー」のいずれかに該当し(利用しているレイアウトにより異なります。1 カラム、2 カラムの場合は「gamma」は利用しません)、「#container」は「記事表示部分」と「サイドバー」の合計になります。
この方法を利用することで、「カスタムテーマ」以外のベーシックテーマも記事表示幅やサイドバーの幅を変更できますが、ベーシックテーマはサイドバーの画像サイズやバナー画像のサイズが決まっているため、上記の手順以外にも微調整が必要になるかと思います。