レスポンシブWebデザインテーマ 「Rainier」

Rainier は、Media Queries (CSS) を利用したマルチデバイス対応のテーマです。PC、スマートフォン、タブレットなどのサイズを検知して、最適なデザイン表示を行います。また、テーマのロゴやヘッダーバナー画像、ナビゲーションの内容を簡単にカスタマイズできる機能を実装しています。

Rainier の機能

Rainier には以下のような機能があります。

• タイトル表示を、アップロードした任意のロゴ画像に置き換えることができます。
• カバー画像を、アップロードした任意の画像に置き換えることができます。
• アイテムアップロード機能を使って favicon を設定できます。
• 特定のウェブページをメインナビゲーションに追加できます。
• og:image を、アップロードした任意の画像に置き換えることができます。
• トップページには最新10件の記事がリスト表示されます。mt-search.cgiを利用してページ分割され、10 件ずつページ送りが行われます。
• パンくずナビゲーションが表示されます。（トップページ、エラーページ、検索結果ページを除く）
• テーマの適用後、エディタ用のスタイルシートファイルが設定され、記事の編集画面にRainierのスタイルが適用されます。
• Classic Blog テーマで利用可能だったデザイン（Cityscape シリーズや、Minimalist シリーズなど）も、Media Querisによりマルチデバイス対応となります。(ただし、どのレイアウトを選んでも右側にサイドバーの2カラムレイアウト固定になります)

Media Queries について

Media Queries は、WWW コンソーシアム（W3C）により勧告が行われた、CSS3 の仕様です。表示デバイスの横幅に応じて、CSS を切り替え、最適なレイアウト表示を行うことができます。

Rainier の初期状態では、Media Queries を利用して、以下の条件でレイアウト表示が変わります。

• 横幅 930px 以上 : 2 カラムレイアウト。メニューは全て表示されます。
• 横幅 700px 以上、約 930px 未満 : 1カラムレイアウト、メニューはヘッダ部分のセレクトメニューのみ表示されます。検索など一部の要素はセンタリングされます。
• 横幅 700px 未満 : 1 カラムレイアウト。メニューはヘッダ部分のセレクトメニューのみ表示されます。グリッドレイアウトは無効化されます。検索など一部の要素はセンタリングされます。

Rainier をカスタマイズする

Rainier は、ロゴの設置やメイン画像の変更などが簡単に行える仕組みが提供されています。実際のカスタマイズ方法を解説します。

タイトル表示をロゴ画像に変更する

初期状態のRainierは、ブログ名をブログのタイトルとしてテキスト表示を行います。このタイトルを、任意のロゴ画像に変更することができます。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [アイテム] - [新規] を選択する
3. [ファイルを選択] ボタンをクリックして画像アイテム（幅 200px 以上を推奨）をアップロードする
4. アップロードした画像アイテムをクリックする
5. タグ欄に @SITE_LOGO と入力し、ページ下部の [変更を保存] ボタンをクリックする

再構築を行うと、アップロードした画像がロゴ画像として表示されます。

カバー画像の設置

初期状態の Rainier は、タイトルの背景に黒い画像を表示しています。このカバー画像を、任意の画像ロゴに変更することができます。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [アイテム] - [新規] を選択する
3. [ファイルを選択] ボタンをクリックして画像アイテム（幅 1024px * 768px 以上を推奨）をアップロードする
4. アップロードした画像アイテムをクリックする
5. タグ欄に @SITE_COVER_IMAGE と入力し、ページ下部の [変更を保存] ボタンをクリックする

再構築を行うと、アップロードした画像がロゴ画像として表示されます。

特定のウェブページをメインナビゲーションに追加する

スペース・ワークスペースのページ上部メニューおよび下部メニューのナビゲーション部分に、指定したウェブページへのリンクを表示することができます。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [ウェブページ] - [新規] を選択する
3. タイトルと本文を入力後、タグ欄に @ADD_TO_SITE_NAV と入力し、[公開] ボタンをクリックする

ブログやワークスペースを作成する際、そのスペース、サイトがどのような内容なのかを説明する「アバウトページ」を作ることがよくあります。アバウトページへのリンクをナビゲーションに表示ししてみましょう。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [ウェブページ] - [新規] を選択する
3. タイトルと本文を入力後、タグ欄に @ABOUT_PAGE と入力し、[公開] ボタンをクリックする

og:image, microdata image を設定する

Facebookを中心としたソーシャルネットサービスで記事を共有するとき、og:imageの指定を行うと、指定を行ったサムネイル画像がSNSサービス上のタイムラインで利用されます。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [アイテム] - [新規] を選択する
3. [ファイルを選択] ボタンをクリックして画像アイテム（短辺 320px 以上を推奨） をアップロードする
4. タグ欄に @SITE_ICON と入力し、ページ下部の [変更を保存] ボタンをクリックする

その他機能

Rainier に実装されている、その他の便利な機能をご紹介します。

コピーライトを変更する

ページ下部に表示されているコピーライト表記を変更してみましょう。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [デザイン] - [テンプレート] を選択する
3. テンプレートモジュールのバナーフッターの編集画面を開くと、一行目のテキストにコピーライト情報が記述されているので、任意に変更する
4. ページ下部の [変更を保存] ボタンをクリックする

Zenback の設定

ソーシャルサービス連携を行う「Zenback」の設定を行うためには、以下のように設定します。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [デザイン] - [テンプレート] を選択する
3. テンプレートモジュールの Zenback の編集画面を開く
4. 一行目と最終行のコメントを削除し、「ここに Zenback の Script コードは貼り付けてください。」と表示されている部分を、 Zenback の Script コードと置き換える
5. ページ下部の [変更を保存] ボタンをクリックする

ファビコンを設定する

スマートフォンでショートカットを画面に保存する際、アイコン表示される画像のことを「ファビコン」と呼びます。ここでは、ファビコンの設定を行なってみましょう。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [アイテム] - [新規] を選択する
3. [ファイルを選択] ボタンをクリックして favicon ファイル(.ico or .png) をアップロードする
4. アップロードした画像アイテムをクリックする
5. タグ欄に @SITE_FAVICON と入力し、ページ下部の [変更を保存] ボタンをクリックする

デザインを適用する

Rainier テーマでは、完全ではありませんが、Movable Type 4 から使われているクラシックブログ向けに用意されたスタイルを適用できます。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [デザイン] - [スタイル] を選択する
3. ブログスタイルの選択画面の "カテゴリ" から [規定のスタイル] または [MT 4 スタイルライブラリ] をクリックする
4. 表示されたスタイルのサムネイルを選択する
5. スタイルを選択すると、"選択されたデザイン" に詳細が表示される
6. [デザインを適用] ボタンをクリックしてスタイルを適用する

Rainier の初期デザインに戻すには

Rainier の初期デザインに戻すには、以下の手順で設定を行なって下さい。

1. ページ上部のナビゲージョンから ブログ を選択する
2. サイドメニューから [デザイン] - [スタイル] を選択する
3. ブログスタイルの選択画面の "カテゴリ" から [Rainier スタイル] をクリックする
4. 表示されたスタイルのサムネイルを選択する
5. スタイルを選択すると、"選択されたデザイン" に詳細が表示される
6. [デザインを適用] ボタンをクリックしてスタイルを適用する

「Rainier」に含まれる要素

テンプレート

インデックステンプレート

• Main Index / メインページ
• Feed - Recent Entries / 最新記事のフィード
• JavaScript / Javascript
• JavaScript - Theme / Javascript テーマ用
• Stylesheet / スタイルシート
• Stylesheet for IE (8 or lower) / スタイルシート (IE8 以下用)

アーカイブテンプレート

• Category Entry Listing / カテゴリ別記事リスト
• Entry / 記事
• Page / ウェブページ
• Monthly Entry Listing / 月別記事リスト

テンプレートモジュール

• Banner Footer / バナーフッター
• Banner Header / バナーヘッダー
• Comment Detail / コメント詳細
• Comment Form / コメントフォーム
• Comments / コメント
• Entries List / 記事の一覧
• Entry Summary / 記事の概要
• HTML Head / HTMLヘッダー
• Navigation / ナビゲーション
• Pagination / ページネーション
• Trackbacks / トラックバック
• Zenback / Zenback

システムテンプレート

• Comment Preview / コメントプレビュー
• Comment Response / コメント完了
• Dynamic Error / ダイナミックパブリッシングエラー
• Popup Image / ポップアップ画像
• Search Results / 検索結果

ウィジェット

ウィジェットセット

• Related Contents / 関連コンテンツ

ウィジェットテンプレート

• Category Archives / カテゴリアーカイブ
• Page Listing / ページ一覧
• Recent Entries / 最近の記事
• Search / 検索
• Syndication / 購読
• Monthly Archives / 月別アーカイブ
• Monthly Archives Dropdown / 月別アーカイブ(ドロップダウン)