カスタマイズ ガイド - movabletype/mt-theme-rimo GitHub Wiki

Rimo はメディアサイトを構築するのに必要な様々な仕組みが提供されています。実際のカスタマイズ方法を解説します。

テーマ共通の設定

すべてのテンプレートで共通化されている設定は 共通変数 テンプレートでおこないます。

全ページ共通の「meta keywords」を設定する

meta keywordsは共通変数 テンプレートの meta_keywords 変数で一括変更することが可能です。

  1. ページ上部のナビゲージョンから ブログ を選択する
  2. サイドメニューから [デザイン] - [テンプレート] を選択する
  3. [共通変数] テンプレートモジュールを編集する
  4. meta_keywords 変数を書き換える
  5. [変更を保存]ボタンをクリックする
  6. 再構築する
<mt:Ignore>共通の meta キーワードを入力してください。</mt:Ignore>
<mt:SetVarBlock name="meta_keywords">movable type,mt,テーマ,theme</mt:SetVarBlock>

テンプレートごとに変更する場合は、各テンプレートに記述されている meta keywords を変更してください。

メインカラーとサブカラーを設定する

リンク色やカテゴリの背景色などを 共通変数 テンプレートで設定することができます。 webセーフカラーを入力してください。

  1. ページ上部のナビゲージョンから ブログ を選択する
  2. サイドメニューから [デザイン] - [テンプレート] を選択する
  3. [共通変数] テンプレートモジュールを編集する
  4. main_color 変数、sub_color 変数を書き換える
  5. [変更を保存]ボタンをクリックする
  6. 再構築する
<mt:Ignore>本テーマで利用している色（メインカラー・サブカラー）です。</mt:Ignore>
<mt:SetVarBlock name="main_color">#004B9A</mt:SetVarBlock>
<mt:SetVarBlock name="sub_color">#0076BF</mt:SetVarBlock>

メインカラーはカテゴリの背景色やhrタグの線色で利用され、サブカラーはリンク色などで利用されます。

Google カスタム検索を利用する

共通変数 テンプレートの google_search 変数を使用することで、簡単にGoogle カスタム検索でのサイト検索を実装することができます。

  1. ページ上部のナビゲージョンから ブログ を選択する
  2. サイドメニューから [デザイン] - [テンプレート] を選択する
  3. [共通変数] テンプレートモジュールを編集する
  4. google_search 変数にカスタム検索のIDを入力する
  5. [変更を保存]ボタンをクリックする
  6. 再構築する
<mt:Ignore>Google カスタム検索 IDを入力してください。</mt:Ignore>
<mt:SetVarBlock name="google_search"></mt:SetVarBlock>

rimo-image01

初期状態では google_search 変数は空になっています。google_search 変数にカスタム検索のIDを入力することで、サイドバー最上部に検索窓が表示されます。

記事一覧の件数を設定する

記事一覧に表示する記事数を 共通変数 テンプレートで設定することができます。

  1. ページ上部のナビゲージョンから ブログ を選択する
  2. サイドメニューから [デザイン] - [テンプレート] を選択する
  3. [共通変数] テンプレートモジュールを編集する
  4. entries_per_page 変数を書き換える
  5. [変更を保存]ボタンをクリックする
  6. 再構築する
<mt:Ignore>記事の一覧に表示する件数を指定してください。</mt:Ignore>
<mt:SetVarBlock name="entries_per_page">12</mt:SetVarBlock>

RimoのTOPページとカテゴリアーカイブにはdata-apiとjavascriptによる無限スクロールが実装されています。 表示する件数が少ないと無限スクロールのイベントが発火しない場合がありますので、10件以上を推奨します。

OGPで使用する Facebook の AppID を設定する

Facebook の AppID を設定すれば、Open Graph が利用できるようになります。

  1. ページ上部のナビゲージョンから ブログ を選択する
  2. サイドメニューから [デザイン] - [テンプレート] を選択する
  3. [テーマ設定] テンプレートモジュールを編集する
  4. fb_app_id 変数を書き換える
  5. [変更を保存]ボタンをクリックする
  6. 再構築する
<mt:Ignore>OGP で利用する Facebook の AppID や、ツイートに含める Twitter のアカウントを記述します。</mt:Ignore>
<mt:SetVarBlock name="fb_app_id"></mt:SetVarBlock>

Twitter の ツイート元を設定する

ツイートボタンからツイートするときのツイート元を指定できます。

  1. ページ上部のナビゲージョンから ブログ を選択する
  2. サイドメニューから [デザイン] - [テンプレート] を選択する
  3. [テーマ設定] テンプレートモジュールを編集する
  4. twitter_via 変数を書き換える
  5. [変更を保存]ボタンをクリックする
  6. 再構築する
<mt:SetVarBlock name="twitter_via"></mt:SetVarBlock>

ソーシャルボタンの表示を設定する

個別ページに表示されるソーシャルボタンの表示・非表示を指定できます。

  1. ページ上部のナビゲージョンから ブログ を選択する
  2. サイドメニューから [デザイン] - [テンプレート] を選択する
  3. [テーマ設定] テンプレートモジュールを編集する
  4. 「social_button」から始まる変数のうち、表示したいボタンを 1 にし、表示したくないボタンは 0 にする
  5. [変更を保存]ボタンをクリックする
  6. 再構築する
<mt:Ignore>ソーシャルボタン: 表示する場合は 1 を、表示しない場合は 0 を指定してください。</mt:Ignore>
<mt:SetVarBlock name="social_button_facebook">1</mt:SetVarBlock>
<mt:SetVarBlock name="social_button_twitter">1</mt:SetVarBlock>
<mt:SetVarBlock name="social_button_google">1</mt:SetVarBlock>
<mt:SetVarBlock name="social_button_hatena">1</mt:SetVarBlock>
<mt:SetVarBlock name="social_button_pocket">1</mt:SetVarBlock>
<mt:SetVarBlock name="social_button_line">1</mt:SetVarBlock>

faviconを変更する

Rimo はfaviconを任意の画像に変更することができます。

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

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

og:imageを設定する

Rimo はog:imageに任意の画像を設定することができます。ブログ記事には個別のog:imageを設定することも可能です。

全ページ共通のog:imageを設定する

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

再構築を行うと、アップロードした画像がog:imageとして設定されます。

ブログ記事に個別のog:imageを設定する

  1. og:imageを設定したい記事の編集画面に移動する
  2. 「OGP イメージ」に画像アイテム（幅 1200px * 630px を推奨）をアップロードする
  3. [保存（更新）]ボタンをクリックする

ヘッダーに表示されるロゴ画像を設定する

初期状態のRimo はヘッダーにRimo のロゴ画像が表示されます。このロゴ画像を任意の画像に変更することができます。

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

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

「このサイトについて」の編集

サイドバーに表示される「このサイトについて」という場所には、@about タグが付与されているウェブページの概要が表示されます。Rimo では、「このサイトについて」というウェブページがテーマの適用時に作成されています。このウェブページを編集して、サイトの方針やガイドラインなどの具体的な内容はページの本文と続きに記述し、概要には簡単なサイトの説明を入れておいくと良いでしょう。

ユーザープロフィールを表示する

初期状態の Rimo では、ユーザーのプロフィールを表示するブロックには何も記述されていません。 ユーザーのプロフィール情報を表示するには、いくつかの手順を行う必要があります。

  1. 管理画面上部メニューより 「システム」-「カスタムフィールド」-「新規」と辿り、新しいカスタムフィールドを作成します。
    • システムオブジェクト: ユーザー
    • 名前: ユーザープロフィール
    • 種類: テキスト（複数行）
    • ベースネーム: user_profile
    • テンプレートタグ: CFUserProfile
  2. ユーザー情報の編集画面を開くと、「ユーザープロフィール」という項目が追加されているので、プロフィールを入力します。
  3. 「記事」テンプレートを編集し、106行目にある <div class="profile">の下の行に<mt:CFUserProfile encode_html="1">を追加します。
  4. 「投稿者別記事リスト」テンプレートも同様に、67行目にある <div class="profile"> の下の行に <mt:CFUserProfile encode_html="1"> を追加します。
  5. 記事とユーザーアーカイブを再構築します。
プロフィールを HTML で入力される場合は、`encode_html`モディファイアを利用しないでください。

ユーザープロフィールに Facebook と Twitter のリンクを表示する

ユーザープロフィールブロックの右上に Facebook と Twitter のリンクを表示していましょう

  1. アイコン画像を用意する。画像は、縦x横 30x30 で表示すると他のアイコンとサイズが合います。
  2. アイコン画像を Movable Type にアイテムとしてアップロードする。
  3. 管理画面上部メニューより 「システム」-「カスタムフィールド」-「新規」と辿り、新しいカスタムフィールドを作成します。
    • Facebook アカウント用
      • システムオブジェクト: ユーザー
      • 名前: Facebook アカウント
      • 種類: テキスト
      • ベースネーム: facebook_account
      • テンプレートタグ: CFUserFacebookAccount
    • Tweitter アカウント用
      • システムオブジェクト: ユーザー
      • 名前: Twitter アカウント
      • 種類: テキスト
      • ベースネーム: twitter_account
      • テンプレートタグ: CFUserTwitterAccount
  4. ユーザー情報の編集画面を開くと、「Facebook アカウント」と「Twitter アカウント」という項目が追加されているので、アカウントIDを入力します。
  5. 「記事」テンプレートを編集し、106行目にある <ul class="entry-author-buttons">ブロックの最下段、「ウェブサイト」用のアイコンの下の行に以下の内容を追加します。「投稿者別記事リスト」テンプレートも同様に、72行目にある <ul class="entry-author-buttons"> のブロックに以下の内容を追加します。
  6. 記事とユーザーアーカイブを再構築します。
<mt:If tag="CFUserFacebookAccount"><li><a href="<a href="//facebook.com/<mt:CFUserFacebookAccount>">"><img src="<$mt:BlogURL$>[facebookのアイコン画像]" alt="facebook" title="facebook"></a></li></mt:If>
<mt:If tag="CFUserTwitterAccount"><li><a href="<a href="//twitter.com/<mt:CFUserTwitterAccount>">"><img src="<$mt:BlogURL$>[twitterのアイコン画像]" alt="twitter" title="twitter"></a></li></mt:If>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️