movabletype.jp
検索

レスポンシブ デザインに対応した、新しいテーマ "Apex" を公開しました

Apex は、"Rainier""Eiger" と同様に Media Queries を利用したレンスポンシブ デザインのテーマです。PC、スマートフォン、タブレットなど表示するデバイスによって、最適な表示が行われます。
また、 6 種類のスタイルが同梱されていますので、スタイル・キャッチャーで簡単に見た目を切り替えることができます。

Apex は、MIT ライセンスのもと GitHub 上で公開されています。

Apex のスクリーンショット

Apex の特徴

Apex には、以下のような特徴があります。

  • ブログ(記事が時系列で並ぶウェブサイト)に最適化されたシンプルなテンプレート構造とデザイン
  • Media Queries を利用したレスポンシブ デザイン(960px, 760px, 520px でレイアウトを変更)
  • ページに含まれるアイコンとして、ウェブフォントを採用することで、CSS でスタイルを簡単に変更可能
  • 6 種類のスタイルを同梱
  • OpenGraph の各種タグに対応
  • アップロードした画像アイテムを favicon や、 og:image として利用可能
  • 記事アーカイブでは、記事に紐付いた画像アイテムを og:image として自動的に利用
  • 特定のウェブページを、ナビゲーションに追加可能
  • Ajax を利用したページネーション

Apex をカスタマイズする

Apex は、多くの点で "Rainier""Eiger" と同じようなカスタマイズを行う事ができます。

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

特定のタグが指定されたウェブページを、サイト上部にナビゲーションメニューとして追加する事ができます。

新しいナビゲーションメニューを追加する

  1. サイドメニューから [ウェブページ] - [新規] を選択する
  2. タイトル、本文に内容を入力し、タグとして @ADD_TO_SITE_NAV を指定し、ウェブページを公開する
    タイトル
    ナビゲーションメニューに表示されるリンク名になります
    本文
    ナビゲーションメニューからリンクされ、実際に表示されるウェブページになります

サイトの説明ページ(アバウトページ)を追加する

  1. サイドメニューから [ウェブページ] - [新規] を選択する
  2. タイトル、本文に内容を入力し、タグとして @ABOUT_PAGE を指定し、ウェブページを公開する
    タイトル
    ナビゲーションメニューからリンクされ、実際に表示されるページに表示されます。ナビゲーションには「アバウト」というタイトルでウェブページへのリンクが作成されます
    本文
    ナビゲーションメニューからリンクされ、実際に表示されるウェブページになります

「アバウト」というリンクのタイトルを変更する事もできます。

[テンプレートモジュール] - [バナーヘッダー] を開き、10行目付近の「アバウト」という文字を、お好きなタイトルに変更してください。

サイト全般の og:image を設定する

Facebook などのソーシャルネットサービスで記事を共有するとき、og:image が指定されていると、指定されたサムネイル画像が利用されます。

  1. サイドメニューから [アイテム] - [新規] を選択する
  2. [ファイルを選択] ボタンをクリックして、画像をアップロードする
  3. アイテム一覧から、アップロードした画像アイテムを選択して、[アクション] - [タグを追加] を行う
  4. 表示されたポップアップウィンドウに、@SITE_ICON を指定する

画像は、短辺が 320 ピクセル以上の画像を指定してください。
また、記事アーカイブでは、記事に関連付けされた画像アイテムが、優先的に利用されます。
複数の画像アイテムが存在する場合は、最新の画像アイテムが採用されます。

ファビコンを設定する

ファビコンを指定すると、ブラウザのブックマークや、スマートフォンなどでショートカットとして登録する際にアイコンとして利用されます。

  1. サイドメニューから [アイテム] - [新規] を選択する
  2. [ファイルを選択] ボタンをクリックして、画像をアップロードする
  3. アイテム一覧から、アップロードした画像アイテムを選択して、[アクション] - [タグを追加] を行う
  4. 表示されたポップアップウィンドウに、@SITE_FAVICON を指定する

他のスタイルを適用する

Apex は、標準の Apex (White) 以外にも 6 種類のスタイルキャッチャー対応のスタイルが同梱されています。気分によってスタイルを変えてみては如何ですか?スタイルの変更は、サイトの再構築も必要ないので気軽に変更することができます。

選べる 6 つのスタイル
  1. サイドメニューから [デザイン] - [スタイル] を選択する
  2. カテゴリから [Styles for Apex] を選択する
  3. 表示されたスタイルの中から、お気に入りのスタイルを選択し、[デザインを適用] をクリックする

スタイルを変えたのに、見た目が変わらないときは、ブラウザがキャッシュしている可能性があります。ブラウザのリロードを試してみてください。

Apex は、MIT ライセンスで公開されていますので、自由に修正して公開する事ができます。GitHub で公開されていますので、Fork して自分色の Apex を作ってみてはいかがでしょうか?

公開したあとは、Plugins And Themes Directory に登録してみてください!

シェアする

  • このエントリーをはてなブックマークに追加

トラックバック