2/3カラムの設定を追加してみました。

2012年02月16日 #ablogcms

2/3カラムの見出しです

2/3カラム(420px)の幅のサンプルテキストです。2/3カラム(420px)の幅のサンプルテキストです。2/3カラム(420px)の幅のサンプルテキストです。2/3カラム(420px)の幅のサンプルテキストです。2/3カラム(420px)の幅のサンプルテキストです。2/3カラム(420px)の幅のサンプルテキストです。2/3カラム(420px)の幅のサンプルテキストです。

1/3カラムの見出しです

1/3カラム(200px)の幅のサンプルテキストです。1/3カラム(200px)の幅のサンプルテキストです。1/3カラム(200px)の幅のサンプルテキストです。1/3カラム(200px)の幅のサンプルテキストです。1/3カラム(200px)の幅のサンプルテキストです。1/3カラム(200px)の幅のサンプルテキストです。

設定方法

画像のサイズの設定や、ユニットグループの設定を学ぶために新しい設定を追加してみます。カスタマイズ管理＞コンフィグ＞エントリー＞編集設定＞ユニットグループに 2/3カラム（column2_3）を追加設定します。さらに、このユニットグループに丁度いいサイズの画像の幅の設定も追加しておきましょう。

blog.css

/* ---------------
2/3カラム用
--------------- */
div.column2_3 {
    float: left;
    width: 420px;
    margin: 0 20px 20px 0;
}

/* 画像、Youtube、GoogleMaps */
div.column2_3 .column-image-center,
div.column2_3 .column-image-left,
div.column2_3 .column-image-right,
div.column2_3 .column-image-auto,
div.column2_3 .column-youtube-center,
div.column2_3 .column-youtube-left,
div.column2_3 .column-youtube-right,
div.column2_3 .column-youtube-auto,
div.column2_3 .column-eximage-center,
div.column2_3 .column-eximage-left,
div.column2_3 .column-eximage-right,
div.column2_3 .column-eximage-auto{
    float: none;
    width: 420px;
    margin: 0 0 20px;
    padding-right: 0;
}

.entry div.column2_3 h2,
.entry div.column2_3 h3,
.entry div.column2_3 h4,
.entry div.column2_3 h5,
.entry div.column2_3 p,
.entry div.column2_3 ul,
.entry div.column2_3 ol,
.entry div.column2_3 pre,
.entry div.column2_3 table,
.entry div.column2_3 blockquote{
    margin-right: 0;
}