Eigerwand
Movable Type 9 のデフォルトテーマとなる「Eigerwand」を追加しました。既存のテーマ「Eiger」をベースに、HTML構造やナビゲーションを見直し、不要な要素を削除しました。
Movable Type の機能を使ってロゴやトップページの画像、ナビゲーションの内容を簡単にカスタマイズできます。
Eigerwanad の機能
Eigerwandには以下のような機能があります。
- タイトル表示を、アップロードした任意のロゴ画像に置き換えることができます。
- メイン画像を、アップロードした任意の画像に置き換えることができます。
- アセットアップロード機能を使ってファビコンを設定できます。
- 特定のウェブページをメインナビゲーションに追加できます。
- og:image を、アップロードした任意の画像に置き換えることができます。
- トップページには最新の記事10件の記事がリスト表示されます。
- トップページの右側に簡単なテキスト、およびバナー画像をサンプルで実装しています。バナー画像は簡単に入れ替えることができます。
- サンプルウィジェットを4つ用意しています。
- パンくずナビゲーションが表示されます。(トップページ、エラーページ、検索結果ページを除く)
Eigerwandをカスタマイズする
Eigerは、ロゴの設置やメイン画像の変更などが簡単に行える仕組みが提供されています。実際のカスタマイズ方法を解説します。
タイトル表示をロゴ画像に変更する
初期状態の Eigerwand は、サイト名をサイトのタイトルとしてテキスト表示を行います。このタイトルを、任意のロゴ画像に変更することができます。
- 『ナビゲーション』からサイトを選択する
- 『サイドバー』から [アセット] - [アップロード] を選択する
- アップロードするファイルを選択または画面にドラッグ＆ドロップし画像アセット（幅 200px 以上を推奨）をアップロードする
- アップロードした画像アセットの編集リンクをクリックする
- タグ欄に @SITE_LOGO と入力し、ページ下部の [変更を保存] ボタンをクリックする
再構築を行うと、アップロードした画像がロゴ画像として表示されます。
メイン画像の設置
初期状態の Eigerwand は、メイン画像にグレーの画像を表示しています。このメイン画像を、任意の画像ロゴに変更することができます。
- 『ナビゲーション』からサイトを選択する
- 『サイドバー』から [アセット] - [アップロード] を選択する
- アップロードするファイルを選択または画面にドラッグ＆ドロップし画像アセット（幅 200px 以上を推奨）をアップロードする
- アップロードした画像アセットの編集リンクをクリックする
- タグ欄に @SITE_MAIN_IMAGE と入力し、ページ下部の [変更を保存] ボタンをクリックする
再構築を行うと、アップロードした画像がロゴ画像として表示されます。
特定のウェブページをメインナビゲーションに追加する
ウェブサイトのページ上部メニューおよび下部メニューのナビゲーション部分に、指定したウェブページへのリンクを表示することができます。
- 『ナビゲーション』からサイトを選択する
- 『サイドバー』から [ウェブページ] - [新規] を選択する
- タイトルと本文を入力後、タグ欄に @ADD_TO_SITE_NAV と入力し [公開] ボタンをクリックする
ウェブサイトを作成する際、そのサイトがどのような内容なのかを説明する「このサイトについて」を作ることがよくあります。そのリンクをナビゲーションに表示ししてみましょう。
- 『ナビゲーション』からサイトを選択する
- 『サイドバー』から [ウェブページ] - [新規] を選択する
- タイトルと本文を入力後、タグ欄に @ABOUT_PAGE と入力し [公開] ボタンをクリックする
og:image、microdata image を設定する
Facebook などのソーシャルネットサービスで記事を共有するとき、og:image の指定を行うと、指定を行ったサムネイル画像が SNS サービス上のタイムラインで利用されます。
- 『ナビゲーション』からサイトを選択する
- 『サイドバー』から [アセット] - [アップロード] を選択する
- アップロードするファイルを選択または画面にドラッグ＆ドロップし画像アセット（短辺 320px 以上を推奨） をアップロードする
- アップロードした画像アセットの編集リンクをクリックする
- タグ欄に @SITE_ICON と入力し、ページ下部の [変更を保存] ボタンをクリックする
バナーを入れ替える
初期状態では、トップページの右サイドに 3 つのサンプルバナーが表示されています。これらのバナーは、[デザイン] - [ウィジェット] - [サンプルウィジェット 03]に収められています。 [サンプルウィジェット 03]の画像を入れ替えることで、バナーを任意の画像に置き換えることができます。
サンプルウィジェットを活用する
トップページに表示されている「サンプルウィジェット 03」以外にもサンプルウィジェットが用意されています。[デザイン] - [ウィジェット] 画面から、ウィジェットを入れ替えてご利用ください。
その他の機能
Eigerwand に実装されている、その他の便利な機能をご紹介します。
コピーライトを変更する
ページ下部に表示されているコピーライト表記を変更してみましょう。
- 『ナビゲーション』からサイトを選択する
- 『サイドバー』から [デザイン] - [テンプレート] を選択する
- テンプレートモジュールのバナーフッターの編集画面を開くと、一行目のテキストにコピーライト情報が記述されているので、任意に変更する
- ページ下部の [変更を保存] ボタンをクリックする
ファビコンを設定する
スマートフォンでショートカットを画面に保存する際、アイコン表示される画像のことを「ファビコン」と呼びます。Eiger は、ファビコンの設定を簡単に変更できます。
