Lekumo ブログOEM

Lekumo ブログOEM マニュアル

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

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

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

  1. [ホーム] - [ブログ] - [デザイン] - [カスタム CSS を編集] を開く
  2. ご利用のレイアウトに合わせて、以下いずれかのソースを貼り付ける
    ※ 今回は記事表示部分を 700 px で表示するように設定しています。
  3. 2列(左サイドバー)の場合

    2列(左サイドバー)の場合

     .layout-two-column-left #container
     {
             width: 900px;
     }
    
     .layout-two-column-left #alpha
     {
             width: 200px;
     }
    
     .layout-two-column-left #beta
     {
             width: 700px;
     }
    

    2列(右サイドバー)の場合

    2列(右サイドバー)の場合

     .layout-two-column-right #container
     {
             width: 900px;
     }
    
     .layout-two-column-right #alpha
     {
             width: 700px;
     }
    
     .layout-two-column-right #beta
     {
             width: 200px;
     }
    

    3列の場合

    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列(右サイドバー)の場合

    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列の場合

    1列の場合

     .layout-one-column #container
     {
             width: 700px;
     }
    
  4. [変更を保存] ボタンをクリックする

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

「#alpha」「#beta」「#gamma」

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

page top