« ココログのCSSファイル | トップページ | ココログのカスタムCSSの編集~2段組レイアウトの設定~ »

2008年2月 2日 (土)

ココログのカスタムCSSの編集~ブログの横幅を変更する~

このブログは「唐草模様」のテーマを「右サイドバー付」のレイアウトで使っています。記事の幅はデフォルトでは400px、右サイドバーの幅は200pxとなっていて、記事の幅が狭い感じになっています。記事の幅を600pxに広げる方法を説明します。

「唐草模様」のテーマのCSSファイル
http://shirabemono.cocolog-nifty.com/.shared-cocolog/themes/texture/theme-arabesque.css
を見ると、次のセレクタ定義があります。

    /* one-column tweaks */	
    .layout-one-column #container
    {
      width: 400px;
    }

    .layout-one-column #alpha
    {
      display: block;
      float: none;
      width: auto;
    }

    .layout-one-column #alpha-inner
    {
      border: 0;
      padding: 15px 15px 15px 15px;
      background: #FFFFFF;
    }

    /* two-column-left tweaks */
    .layout-two-column-left #container
    {
      width: 600px;
    }

    .layout-two-column-left #alpha
    {
      width: 200px;
    }

    .layout-two-column-left #alpha-inner
    {
      border: 0;
      padding: 15px 15px 15px 15px;
      background: #CCCC99;
    }

    .layout-two-column-left #beta
    {
      width: 400px;
    }

    .layout-two-column-left #beta-inner
    {
      border: 0;
      padding: 15px 15px 15px 15px;
      background: #FFFFFF;
    }

    /* two-column-right tweaks */
    .layout-two-column-right #container
    {
      width: 600px;
    }

    .layout-two-column-right #alpha
    {
      width: 400px;
    }

    .layout-two-column-right #alpha-inner
    {
      border: 0;
      padding: 15px 15px 15px 15px;
      background: #FFFFFF;
    }

    .layout-two-column-right #beta
    {
      width: 200px;
    }

    .layout-two-column-right #beta-inner
    {
      border: 0;
      padding: 15px 15px 15px 15px;
      background: #CCCC99;
    }

    /* three-column tweaks */
    .layout-three-column #container
    {
      width: 800px;
    }

    .layout-three-column #alpha
    {
      width: 200px;
    }

    .layout-three-column #alpha-inner
    {
      border: 0;
      padding: 15px 15px 15px 15px;
      background: #CCCC99;
    }

    .layout-three-column #beta
    {
      width: 400px;
    }

    .layout-three-column #beta-inner
    {
      border: 0;
      padding: 15px 15px 15px 15px;
      background: #FFFFFF;
    }

    .layout-three-column #gamma
    {
      width: 200px;
    }

    .layout-three-column #gamma-inner
    {
      border: 0;
      padding: 15px 15px 15px 15px;
      background: #CCCC99;
    }
  • .layout-one-columnは、サイドバーなしレイアウト
  • .layout-two-column-leftは、左サイドバー付レイアウト
  • .layout-two-column-rightは、右サイドバー付レイアウト
  • .layout-three-columnは、両サイドバー付レイアウト
  • #containerは、それぞれのレイアウトの全幅の設定
  • #alphaは、記事の幅の設定
  • #beta、#gammaは、サイドバーの幅の設定

このブログは右サイドバー付レイアウトなので、次の3つのセレクタを上書き設定することで幅を変えることができます。

  • .layout-two-column-right #container
  • .layout-two-column-right #alpha
  • .layout-two-column-right #beta

「カスタムCSSの編集」で次のCSSを追加します。

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

この設定で全体の幅が800px、記事の幅が600px、サイドバーの幅が200pxに変更することができます。

« ココログのCSSファイル | トップページ | ココログのカスタムCSSの編集~2段組レイアウトの設定~ »

コメント

横幅広げたいとずっと思っていました。カスタムCSSにちょっと加えるだけなんですね。とても参考になりました。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/17925326

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~ブログの横幅を変更する~:

« ココログのCSSファイル | トップページ | ココログのカスタムCSSの編集~2段組レイアウトの設定~ »