公式テーマ「Habakiri」をカスタマイズ(2)

『公式テーマ「Habakiri」をカスタマイズ』の2回目です。コーポレートサイトっぽくするために、まず、トップページによくありがちなスライドショーを組み込み、スライドショーの下に、3カラム分の情報エリアを作ります。

トップページをコーポレートサイトっぽくする

管理画面から「固定ページ」→「新規追加」をクリックして、新規固定ページを作成します。
例では見出しの部分に「薩摩藩株式会社」、本文は適当に入れています。
ここでポイントは右側に表示される「固定ページの属性」。テンプレートを「リッチフロントページ」にします。

管理画面から「外観」→「カスタマイズ」→「固定フロントページ」とクリックします。

「固定フロントページ」の設定で、フロントページの表示を「固定ページ」にし、フロントページのプルダウンメニューで、さきほど作成したページを選ぶと、右側のプレビューエリアに、なんだかかっこいいスライドショー画面が！

スライドショー画像の設定

Habakiriではテンプレートを「リッチフロントページ」にすると、もともとテーマに設定されていた画像でスライドショーが表示されるようになっています。
これを自分のサイト用に入れ替えます。

まずはスライドショーに使いたい画像を、管理画面の「メディア」に突っ込んでおきましょう。その後、「外観」→「カスタマイズ」→「フロントページスライドショー」と進みます。設定画面の雰囲気からいくと、5枚までスライドショーにできそうです。

準備した画像を「画像(1)」「画像(2)」…にそれぞれ設定します。
ちなみに画像を1枚しかアップロードしなかった場合は、スライドショーではなく静止画になります。

「画像を選択」ボタンをクリックし、メディアライブラリから画像を選択します。
「内容」にテキストを入力すると、スライド画像の上にテキストが表示されます。
「URL」は、スライド画像をクリックしたときのリンク先です。
2枚目を設定すると、右側のプレビュー画面ではスライドショーが始まります。

スライドショーについて詳細設定をしたい場合は、「設定」画面から、スピードやエフェクトなどをいじれます。画像でかすぎるんだけど！という場合は、高さ(px)を調整することができます。

スライドショー画像下に3カラムの情報エリアを作る

コーポレートサイトとかによくある、スライドショー下の情報エリア。WordPress公式サイトのQ&Aを参考にカスタマイズします。Habakiriは使う人の色に染めて使いやすいように、骨格の部分はしっかり作り込みながらも、HTML と CSS で自由にレイアウトができるように設計されています。

管理画面の「固定ページ」から、フロントページとして指定したページを開きます。固定ページの編集画面で、編集モードを「テキスト」にして、下記コードをコピペします。
（耄碌ババアの失敗：編集モードを「ビジュアル」でコピペしました。HTMLコードが、ことごとく特殊文字に化けて、なーんにも認識してくれませんでした；；）

コードの骨格は下記の通りですが、日本語部分は適宜書き換えてください。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            ３カラムに分割する場合
        </div>
        <div class="col-md-4">
            ３カラムに分割する場合
        </div>
        <div class="col-md-4">
            ３カラムに分割する場合
        </div>
    </div>
</div>

「col-md-4って何よ？」
…これはCSSフレームワークのBootstrapで使うクラスです。…とか偉そうに言ってますが、フレームワークってそれなに？というレベルなんですけど、とりあえず、ああそうですかということで、次に行きましょう。

Habakiriは、Bootstrapのグリッドシステムが使えるようになっています。
Bootstrapのグリッドシステムは、画面を縦に12等分して、そのうちのいくつ分を横幅として使うかをクラス名で指定する仕組みになっています（超絶おおざっぱに言うと）。

上記のサンプルで使われている「col-md-4」というクラスは、12等分したうちの4個分の幅を取るよ…ということになります。「md」は、画面幅がPCサイズ（768px以上 992px未満）の場合です。これを「row」（行）というクラスの中に入れ込んで、レイアウトを作ります。

詳しくは下記サイトからどうぞ。

英語の堪能な方はこちら。
参考Bootstap公式サイト

TOEIC390点の耄碌ババア並に英語ができない方はこちら。
参考Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

このようなかたちで、3カラムの領域ができました。

もし、3カラムじゃなくて4カラムにしたい場合は、下記のようなコードになります。
3+3+3+3で12ですね。

<div class="container">
    <div class="row">
        <div class="col-md-3">
            ４カラムに分割する場合
        </div>
        <div class="col-md-3">
            ４カラムに分割する場合
        </div>
        <div class="col-md-3">
            ４カラムに分割する場合
        </div>
        <div class="col-md-3">
            ４カラムに分割する場合
        </div>
    </div>
</div>

……もうここまででババアは疲労のために青息吐息で倒れそうなので、続きはまた次回。