Lekumo ビジネスブログ

サポート

カスタムテーマで記事表示幅やサイドバーの幅を変更する方法

ブログのデザインに「カスタムテーマ」をご利用の場合は、以下の手順でサイドバーや記事表示部分の幅を変更することができます。

カスタムテーマで記事表示幅やサイドバーの幅を変更する方法

  1. [ブログ管理] - [デザイン] - [カスタムCSSウィザード] を開く
  2. 左側のメニューから [カスタムCSS] を開く
  3. ご利用のレイアウトに合わせて、以下いずれかのソースを貼り付ける
    ※ 今回は記事表示部分を 700 px で表示するように設定しています。
  4. 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;
     }
    
  5. [適用] をクリックする
  6. [変更を保存] をクリックする

以上の手順で、記事表示幅を変更できます。
また、上記ソース内の「#alpha」「#beta」「#gamma」は「記事表示部分」「サイドバー」のいずれかに該当し(利用しているレイアウトにより異なります。1 カラム、2 カラムの場合は「gamma」は利用しません)、「#container」は「記事表示部分」と「サイドバー」の合計になります。

この方法を利用することで、「カスタムテーマ」以外のベーシックテーマも記事表示幅やサイドバーの幅を変更できますが、ベーシックテーマはサイドバーの画像サイズやバナー画像のサイズが決まっているため、上記の手順以外にも微調整が必要になるかと思います。

page top