4kaku design

マーケティングを勉強しているWebデザイナーのノート

a-blog cms Ver.2.1から「カスタムユニット」という機能が追加されたことは、以前のブログでご紹介しました。
今回は、カスタムユニットを使ってユニットのデザインをワンランクアップする方法をご紹介します。

カスタムユニットの基本的な使い方は、前のエントリーをご覧ください。
新機能「カスタムユニット」を使って商品説明用ユニットを作ってみよう


カスタムユニットを見映えで一工夫するために使ってみる


以前、このブログではカスタムユニット機能を使ってショッピングサイトで使える商品説明用ユニットの作り方をご紹介しました。
特定の使い方が決まっていたり、ユーザーが固定されていると、カスタムユニットをどういう用途で使うか決めるのは簡単です。しかし、個人のブログなどの場合は、案外どう使ってみればいいか困ってしまうのではないでしょうか。

今回は、機能面よりも見映えをひとひねりするためにカスタムユニットを使う方法についてご紹介します。


画像とテキストを組み合わせたユニットを作る


今回はこんなユニットを作りました


今回は、好きな画像を下に敷き、その上に見出しと本文を置けるユニットを作りました。
画像の上に重ねる画像もCSSで設定したものをラジオボタンで選べるようにしています。

出力側のソースは以下の通りです。
これをthemes/任意のテーマ/include/custom-unit.htmlに書くと、エントリー内に表示することができます。入力画面は次にご紹介します。

<div class="customUnit">
    <img src="%{ARCHIVES_DIR}{customImage@path}" alt="{customHead}" class="customImage">
    <div class="customInner {unitBg}"> /* 背景画像のクラスをつける */
        <div class="customText {textLayout}"> /* 本文の位置を選択できるようにする */
            <h2>{customHead}</h2>
            <p>{customText}[nl2br]</p>
        </div>
    </div>
</div>

画像を背景(background)に設定するのではなく、positionで画像の上に文字を持ってきています。
背景画像などはクラスを複数作れば別のものを選べるようになるのでおすすめです。

せっかくCSSで制御できるので、ブレイクポイントを設定すればPCで見たとき、スマートフォンなどで見たときのレイアウトも設定できます。画像の上に文字を重ねたままだと、スマートフォンで画面の幅が狭くなったときにテキストが画像からはみ出してしまうので、今回はPC(画面解像度が幅768pxまで)のときにのみpositionを設定し、それ以外の端末では画像とテキストが縦に並ぶようにするのが最適解ではないかと思います。

.customUnit { /* カスタムユニット全体 */
    width: 100%;
    padding: 10px 0 20px 0;
}
.customUnit img {  /* 画像をレスポンシブに対応 */
    width: 100%;
    height: auto;
}
.customUnit {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 10px 0 20px 0;
}
.customInner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.customInner.(任意のクラス) {
    /* 背景画像、背景色の設定 */
}
.customText {
    position: absolute;
    width: 40%;
    margin-top: 30px;
}
.customText.textLeft { /* テキストを左に配置 */
    margin-left: 30px;
    left: 0;
}
.customText.textRight { /* テキストを右に配置 */
    margin-right: 30px;
    right: 0;
}
.acms-entry .customText h2 { 
    /* 見出しの設定 */
}
.acms-entry .customText p { 
    /* 本文の設定 */
}

管理画面のソース


左の写真のようなユニット編集画面を作りました。
出力側で、要素にクラスを足せるようにしているので、テキストの位置だけでなく背景色や背景画像、その他のレイアウト変更を設定することも可能です。

themes/任意のテーマ/admin/entry/custom-unit.html に以下のコードを書いてください。


<table class="adminTable acms-table-admin-edit">
    <tr>
        <th>背景画像</th>
        <td>
            <!-- BEGIN customImage@path:veil -->
            <img src="%{ARCHIVES_DIR}{customImage@path}" width="500" />
            <input type="hidden" name="customImage{id}@old" value="{customImage@path}" /><br />
            <label class="acms-form-checkbox">
                <i class="acms-ico-checkbox"></i><input type="checkbox" name="customImage{id}@edit" value="delete" /> 削除
            </label>
            <!-- END customImage@path:veil -->
            <input type="file" name="customImage{id}" size="20" />
            <input type="hidden" name="unit{id}[]" value="customImage{id}" />
            <input type="hidden" name="customImage{id}:extension" value="image" />
            <input type="hidden" name="customImage{id}@width" value="940" />
            <input type="hidden" name="customImage{id}@filename" value="" />
        </td>
    </tr>
    <tr>
        <th style="background: none;text-align: right;padding: 20px!important;">背景画像</th>
        <td>
            <label class="acms-form-radio">
            <input type="radio" name="unitBg{id}" value="noBg"{unitBg:checked#noBg} /><i class="acms-ico-radio"></i>背景なし</label>
            <label class="acms-form-radio">
            <input type="radio" name="unitBg{id}" value="bgDot"{unitBg:checked#bgDot} /><i class="acms-ico-radio"></i>白色ドット柄</label>
            <input type="hidden" name="unit{id}[]" value="unitBg{id}" />
        </td>
    </tr>
    <tr>
        <th>テキストの位置</th>
        <td>
            <label class="acms-form-radio">
            <input type="radio" name="textLayout{id}" value="textLeft"{textLayout:checked#textLeft} /><i class="acms-ico-radio"></i>左に配置</label>
            <label class="acms-form-radio">
            <input type="radio" name="textLayout{id}" value="textRight"{textLayout:checked#textRight} /><i class="acms-ico-radio"></i>右に配置</label>
            <input type="hidden" name="unit{id}[]" value="textLayout{id}" />
        </td>
    </tr>
    <tr>
        <th>見出し</th>
        <td>
            <input type="text" name="customHead{id}"  value="{customHead}" />
            <input type="hidden" name="unit{id}[]" value="customHead{id}" />
        </td>
    </tr>
    <tr>
        <th>本文</th>
        <td>
            <textarea name="customText{id}">{customText}</textarea>
            <input type="hidden" name="unit{id}[]" value="customText{id}" />
        </td>
    </tr>
</table>

必要な機能が特にないWebサイトやブログでも、カスタムユニットを便利に楽しく使う方法はないかなーと思い、こんなエントリーを書いてみました。見映え以外の使い道についての情報もどんどん集めていきます。