movabletype.jp
検索

連載その3「見た目を変えよう!テンプレートカスタマイズ その2」

グローバルテンプレート

グローバルテンプレートとは、システム単位で利用される基本となるテンプレートです。

ウェブサイトやブログで同名のテンプレートを作成されると、当該のグローバルテンプレートは上書きされ使われなくなります。

グローバルテンプレートの編集は、システムメニューの[デザイン][テンプレート]から出来ます

ここではメールフッターの変更を例にあげます。

  1. システムメニューの[デザイン][テンプレート] を選択します。
  2. [テンプレートモジュール] から [メールフッター] を選択します。
  3. [メールフッター] テンプレートの初期値が表示されます。
    --
    Powered by Movable Type <$mt:Mersion$>
    <$mt:Var name="portal_url"$>
    
  4. [メールフッター] を修正します。MT タグを利用して動的に内容の文章を用意するなど可能ですが、ここでは静的な内容として一般的なメールフッターをサンプルとして用いています。
    --
    Six Apart Cafe.
    Email     : melody@example.com
    Web       : http://www.sixapart.jp/
    Tel & Fax : 03-1234-5678
    

サインイン画面の変更

ここではサインイン画面の"Movable Type ロゴ"を、グローバルテンプレートの修正を行うことで変更する方法を解説します。

  1. まずロゴを作成します。

    修正前

    修正後

    修正後のものを"/images/sacafe_logo.png"としてアップロードしておきます。

  2. テンプレートを修正します

    システムメニューの [デザイン][テンプレート] の [シンプルヘッダー] を選択し開きます。

    以下のように50行目の "mt_logo.png" までのパスを修正します。

    修正前:
      50        <div id="brand"><img alt="Movable Type" src="<mt:var name="static_uri">images/chromeless/mt_logo.png" /></div>
    
    修正後:
      50        <div id="brand"><img alt="Movable Type" src="/images/sacafe_logo.png" /></div>
    
  3. サインイン画面にアクセスします。

    ロゴが変更されていることが確認できました。

他画面のロゴ修正の確認

ロゴの修正をする事で他画面でもロゴが変更されています。これは複数の画面で [シンプルヘッダー] を利用しているためです。

  • サインアップ画面
  • ユーザー情報の編集画面

ユーザーが利用する画面全てのロゴが、Movable Type のものから変更されている事が確認できました。

利用規約やプライバシーポリシーの許諾ページの追加

初期設定ではコミュニティ・ソリューションへの登録時に、利用規約やプライバシーポリシーの許諾を得る箇所がありません。

この章ではグローバルテンプレートを編集する事で、利用規約やプライバシーポリシーの許諾を得るようにします。

  1. 事前に利用規約やプライバシーポリシーの許諾画面を、ウェブページなどを使って作成します。
  2. システムメニューの [デザイン][テンプレート] の [登録フォーム] をクリックします。
  3. 「テンプレートの編集」>「登録フォーム」画面が出てくるので、121行目付近のコードを書き換えます。
    </mt:Loop>
    
    <p>個人情報管理につきましては、<a href="http://www.sixapart.jp/privacy/" target="_blank">プライバシーポリシー</a>をご確認ください。</p>
    
        <div class="actions-bar">
            <button
                type="submit"
                class="sign-up action primary-button"
                accesskey="s"
                >プライバシーポリシーを許諾してサインアップ</button>
        </div>
    
    </form>
    
  4. 具体的に修正したのは以下の2点です。
    • 「<p>個人情報につきましては、...」の一行を追加し、先に準備していた利用規約やプライバシーポリシーへのリンクを張ります。
    • 「サインアップ」となっていた場所を「プライバシーポリシーを許諾してサインアップ」もしくは「利用規約を許諾してサインアップ」と書き換えます。
  5. 修正が終わったら「変更を保存」ボタンをクリックします。
  6. 修正後のサインアップ画面