コンテンツの読み込みに時間がかかっています

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

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;
}

responsive.css

こちらも div.column2 と同様なモノを div.column2_3 で作らないといけません。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

a-blog cms と View Transitions API で作るページ遷移のアニメーションの実装について

Entry_Summaryループ内クラス設定を運営者でも触れるようにする

a-blog cms のベンチマークモードの活用法

iframe タグを設定するカスタムフィールドで利用する校正オプション setWidthFull

定期開催のイベントサイトを作る際のブログ設定

エントリー編集画面の UI について見直しを考えてみる

エントリー編集画面の UI について見直しを考えてみる