ホーム > PowerCMS > ドキュメント > 制作者ガイド > テーマの管理 >

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

「Eiger」とは

「Eiger」は企業サイトのようなブログを作成できるレスポンシブ Web デザインを採用したテーマです。Media Query（CSS）を利用したマルチデバイス対応に加え、PowerCMS の機能を使ってロゴやトップページの画像、ナビゲーションの内容を簡単にカスタマイズできます。

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

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

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

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

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

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

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

初期状態の Eiger は、メイン画像にグレーの画像を表示しています。このメイン画像を、任意の画像ロゴに変更することができます。

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

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

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

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

初期状態では、トップページの右サイドに 3 つのサンプルバナーが表示されています。これらのバナーは、[デザイン] - [ウィジェット] - [サンプルウィジェット 03]に収められています。

[サンプルウィジェット 03]の画像を入れ替えることで、バナーを任意の画像に置き換えることができます。

トップページに表示されている「サンプルウィジェット 03」以外にもサンプルウィジェットが用意されています。[デザイン] - [ウィジェット] 画面から、ウィジェットを入れ替えてご利用ください。

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

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

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

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