「White Room デモサイト」の作り方、第5回は「About ページ」の作成方法についてご紹介します。
固定ページとは
About ページの作成方法の前に、まずは「固定ページ」についてご説明します。固定ページとは、ブログ記事のような時間を基準にして並ぶようなページではない、固定的なページのことです。これから作る About のようなページや、お問い合わせ、などのページも固定ページになりますね。固定ページとして作成したページはブログの記事一覧ページに混じることはありません。
固定ページは ダッシュボード > 固定ページ > 新規作成 から作成できます。
About ページの作成
ダッシュボード > 固定ページ > 新規作成 と進み、固定ページの作成画面を開いてください。そして、タイトルに「About」と入力してください。タイトルの入力が完了したら、その下のページ内容入力欄でページを作成していきます。
「About ページ」は次の 4 つのパーツで構成されています。
- ヘッダー画像
- Our Story セクション
- 地図・住所セクション
- 写真セクション
About ページ
ヘッダー画像
前回「#4 テーマカスタマイザーで全体のデザインを設定する」でトップページのヘッダー画像の設定方法をご説明しましたが、White Room では各（固定）ページごとにもヘッダー画像の設定を行うことができます。
各ページのヘッダー画像は固定ページ作成ページの右下「ヘッダー画像」メタボックスから設定できます。もし右下に表示されていない場合はページ右上にある「表示オプション」をクリックして「ヘッダー画像」にチェックを入れてください。
ヘッダー画像メタボックス
ヘッダー画像メタボックス内の「ヘッダー画像を設定」をクリックするとメディアアップローダーが開きます。そこから任意の画像をアップロードしてヘッダー画像を設定してください。「About ページ」では 1280 × 280 の画像を設定しています。
ここで設定したヘッダー画像は、このページだけではなく、このページの子ページにも表示されるようになります。今回は About ページの子ページの作成は行いませんが、ご自身でオリジナルのサイトを作成されるときに活用してみてください！子ページでヘッダー画像を設定すれば、そちらが優先して表示されます。
Our Story セクション
いよいよページ内容入力欄に内容を入力していきます。まずは次のコードを入力欄に貼り付けてみてください。
[ section title="Our Story" ] ファイブカフェは、当時大学生だった有坂ひとみと田中はじめの「何か一緒に面白いことやりたいね。」の一言から始まりました。 翌2004年に、港区南青山5丁目にオープンし、この地の憩いの場となりたいという想いから、5丁目を意味する5(Five)を店名としました。 今年で10週年を迎え、より心地よく美味しい時間を提供できるように努力してまいります。 （このサイトはWordPress無料テーマWhiteRoomを使用したダミーサイトです。実際の店舗は実在しません。） [ /section ]
貼り付けたら、「ファイルカフェは、」から「実在しません。）」の部分までを選択して「中央揃え」ボタンをクリックしてください。
中央揃えボタン
クリックできたら、エディタ上で文章が中央揃えされたと思います。確認できたら、ページ右上の「プレビュー」ボタンをクリックしてみてください。実際の画面でどのように表示されるか確認することができます。
プレビュー画面ではデモサイトの About ページと同じように Our Story セクションの上下に適度な余白が開き、「Our Story」という中央揃えされた見出しが表示されているのではないでしょうか。この余白と中央揃えされた見出しを表示するのが section ショートコードです。先ほど貼り付けたコードを見ると、Our Story の文章が [ section title=”Our Story ] [ / section ] で囲まれているのがわかると思います。この section ショートコードで囲むことで、各セクションごとに適度な余白を取り、統一された中央揃えの見出しを表示させることができます。section ショートコードでは背景色も設定することができます。それについては下記で説明します。
地図・住所セクション
次は地図・住所セクションを作成していきます。入力欄に次のコードを追加してください。その前に、一つ注意点があります！ここに表示している地図は GoogleMap の埋め込み機能を利用したものですが、この埋め込みコードは HTML となっているのでビジュアルエディタ上に直接貼り付けることができません（HTML自体がそのまま表示されてしまうため）。そのため、一旦、ビジュアルエディタからテキストエディタに変更してから貼り付けてください。
ビジュアルエディタ・テキストエディタの切り替え
[ section bgcolor="#f5f5f5" ] [ row ] [ col size="8" ] <iframe style="border: 0px currentColor;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.5933154948934!2d139.71332585!3d35.662390200000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b60f7ab061d%3A0xf121fe1f2d0a5238!2z5p2x5Lqs6YO95riv5Yy65Y2X6Z2S5bGx77yV5LiB55uu!5e0!3m2!1sja!2s!4v1403772717815" width="770" height="400" frameborder="0"></iframe> [ /col ] [ col size="4" ] 〒107-0062 東京都港区南青山5丁目12345xxx TEL／03-5472-77xx FAX／03-5473-77xx（このサイトはWordPress無料テーマWhite roomを使用したダミーサイトです。実際の店舗は実在しません。） [ /col ] [ /row ] [ /section ]
貼り付けたらまたプレビューで確認してみてください。灰色の背景色がついたセクションが 2 カラムに分割され、左のカラムに地図が、右のカラムに住所が表示されているのではないでしょうか。
ここでは [ section bgcolor=”#f5f5f5″ ] [ /section ] で囲むことで中央揃えしたタイトルは表示せずに背景色だけ設定しています。背景色はカラーコードで指定できます。その中に、新しいショートコード [ row ] と [ col ] があります。
この 2 つは常にセットで使うショートコードで、[ col ] が実際のカラム分割を行うショートコード、それらのカラムを全体的に包むものが [ row ] になります。[ col ] は [ row ] で囲まないとカラム分割を行わないので、必ず [ row ] で囲んでください。また、[ row ] は [ col ] を使うことで生じる余白のズレの調整などを行っているので、[ row ] の直下に [ col ] 以外の文字や画像を置くとズレの原因となります。[ row ] の直下には必ず [ col ] だけを配置するようにしてください。
カラムのサイズ指定方法
col ショートコードではカラムのサイズを指定することができます。先の例では [ col size=”8″ ] 地図 [ /col ] [ col size=”4″ ] 住所 [ /col ] となっていました。1 ページの横幅は 12カラム 分の横幅を持っています。つまり、size が 8 ならページ横幅の 2/3 、size が 4 なら ページ横幅の 1/3 のサイズということになります。ある row ショートコード内の col のサイズ数の合計が 12 未満の場合は、ページの右側に空きが生じることになります。
col ショートコードには size 以外にもいくつかの属性が用意されており、カラムの左側に余白を作ったり、スマートフォン表示時にも強制的にカラム分割を行ったりすることができます。詳しくは「マニュアル」にてご確認ください。
写真セクション
最後は写真セクションです。コードを貼り付ける前にエディタをビジュアルエディタに戻してください。ビジュアルエディタに戻したら、次のコードを追加してください。
[ section ] [ row ] [ col size="3" ] 画像 [ /col ] [ col size="3" ] 画像 [ /col ] [ col size="3" ] 画像 [ /col ] [ col size="3" ] 画像 [ /col ] [ /row ] [ /section ]
「画像」となっているところには画像をアップロードして挿入してください。デモサイトでは 740 × 493 の画像を挿入しています。ここではそれぞれの col の size に 3 が指定されています。つまり、ページの横幅に対し 1/4 のサイズのカラムが 4 つ配置されます。
コメント欄の設定
ここまででページ内容の入力はできあがりました。ここからはページ作成の最後の仕上げ作業を行っていきます。まずはコメント欄の設定を行います。WordPress はもともとブログツールだったので、各ページにコメント欄が用意されています。ですが、今作成している About のようなページではコメント欄は特に必要ありません。そのようなときは「ディスカッション」メタボックスでコメント欄の表示をオフにすることができます。ディスカッションメタボックスは通常入力欄の下に表示されますが、もし表示されていない場合はページ上部の「表示オプション」をクリックし、「ディスカッション」にチェックを入れてみてください。
ディスカッションメタボックス内の「コメントの投稿を許可する。」「このページでトラックバックとピンバックを許可する。」の 2 つのチェックを外してください。これでコメント欄が表示されなくなります。
ディスカッションメタボックス
スラッグの設定
最後にスラッグの設定を行います。スラッグとは、URL 上の各ページの名称のことです。特に設定しない場合はページのタイトルが使用されます。例えばページタイトルが「このサイトについて」であれば、
http://example.jp/このサイトについて/
のようになります。ここで作成しているページの場合はスラッグを about と設定することになりますが、ページタイトル自体も About なので実は特に設定する必要はありません(^^; ですが、今後設定することもあると思いますので、どこで設定するかは覚えておきましょう！スラッグはページタイトル入力欄の下部で設定できます。
スラッグの設定
全て完了したら、ページ右上の「公開」をクリックしてページを公開してください。これで About ページの作成は完了です。きちんと デモページ と同じ表示になったでしょうか？
次回はスタッフページを作成します！
