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

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 で作らないといけません。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。
エントリー編集画面の UI について見直しを考えてみる

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

a-blog cms バージョン管理 UI について見直しを考えてみる

バージョン管理 UI について見直しを考えてみる

a-blog cms Training Camp 2024を開催しました

a-blog cms と htmx で作る SPA(Single Page Application) なブログテーマの実装方法

JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ

Chat GPT が書く a-blog cms の紹介ブログ記事