Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

General Corporateテーマを使いこなす!

先日公開しニュースでご紹介しました、新テーマGeneral Corporate、既にお使いいただけましたでしょうか?

今回はそのGeneral Corporateテーマのより突っ込んだカスタマイズ方法を具体的にご紹介します。

  • 特定のウェブページをトップに表示。2つしかない場合はどうする?
  • configモジュールで全体の色を一括で変更し印象を変えてみる!
  • 電話番号や受付時間を変更する
  • インフォメーション部分を変更する

基本的なテーマの使い方については以下をご覧ください。

特定のウェブページをトップに表示。2つしかない場合はどうする?

このテーマにはカスタムフィールドで指定した特定のウェブページをトップページに掲載する、という機能がありますが3つ指定することを想定しているため2つの場合は以下のように間が空いてしまいます。

topbefore.jpg
これをいい感じに調整する方法をご紹介します。

まず、General CorporateテーマはFoundationというフレームワークをベースにしています。
そのルールに従った変更をするだけで簡単に調整することが可能になっています。

今回の具体的な変更箇所は、デザイン>テンプレートのテンプレート・モジュールのtop-pagesというモジュールになります。

ここに以下の箇所があるので

<div class="columns medium-4 large-4">

これを以下に変更します。

<div class="columns medium-6 large-6">

Foundationは横幅最大を12として、その比率で幅がきまるので6にすることによって2分割となります。これにより以下のように調整することができます。

topwebpage2.jpg

いかがでしょうか、丁度良い感じに収まったかと思います。

configモジュールで全体の色を一括で変更し印象を変えてみる!

続いて、メディアサイト向けテーマのRimoにもある色を一気に変更できる機能のご紹介です。

前段として、これはMT独自タグを利用して色を変数にすることによって、CSSのテンプレート内を一気に変更する、といった使い方をしています。
その変数の元をconfigにまとめることによって、一箇所変更するだけで該当箇所を一気に変えられる仕組みになっています。

デザイン>テンプレートのテンプレート・モジュールのconfigというモジュールで、以下の箇所を変更します。

変更前

<mt:Ignore>メインカラー</mt:Ignore>
<mt:SetVarBlock name="maincolor">rgb(0,51,153)</mt:SetVarBlock>

<mt:Ignore>メインテキストカラー</mt:Ignore>
<mt:SetVarBlock name="maintextcolor">rgb(255,255,255)</mt:SetVarBlock>

<mt:Ignore>サブカラー</mt:Ignore>
<mt:SetVarBlock name="subcolor">rgb(223,233,234)</mt:SetVarBlock>

変更後

<mt:Ignore>メインカラー</mt:Ignore>
<mt:SetVarBlock name="maincolor">rgb(255,102,0)</mt:SetVarBlock>

<mt:Ignore>メインテキストカラー</mt:Ignore>
<mt:SetVarBlock name="maintextcolor">rgb(255,255,204)</mt:SetVarBlock>

<mt:Ignore>サブカラー</mt:Ignore>
<mt:SetVarBlock name="subcolor">rgb(255,153,153)</mt:SetVarBlock>

まずメインカラーですが、ヘッダーなどの一番印象を決める色になります。

maincolor.jpg
続いてメインテキストカラーですが、これはメインカラーの上にのる文字の色と考えていただいて大丈夫です。メインカラーが薄い場合は濃い色に、、といったように調整してもらえればと思います。

maintextcolor.jpg

最後にサブカラーですが、記事一覧やインフォメーションの背景の色になります。

subcolor.jpg

いかがでしょうか。テンプレートを細かく編集することなく簡単に色を変更できたと思います。

電話番号や受付時間を変更する

tel.jpg
右上の電話番号と受付時間の部分は、デザイン>テンプレートのテンプレート・モジュールのheader-menuというモジュールで変更します。

上の方にはPC用、

<div class="right contact-info"><p>受付時間 10:00 - 19:00(土日祝日除く)<br /><span class="tel">TEL 03-XXXX-XXXX</span></p></div>

下の方にスマホ用があるので、両方変更してください。

<div class="contact-info-sp"><p>受付時間 10:00 - 19:00(土日祝日除く)<br /><span class="tel"><a href="tel:">TEL 03-XXXX-XXXX</a></span></p></div>

インフォメーション部分を変更する

info.jpg
全てのページで表示されるモジュールであるインフォメーションの枠は、デザイン>テンプレートのテンプレート・モジュールのinformationというモジュールで変更します。

お問い合わせフォームを作成したらそのリンクを設定する、電話番号を変更する、Facebookページを持っていればそのリンクを設定します。

また、twitterモジュールも読み込んでいるのでそのモジュール内にTwitterで発行されたソースを貼り付けると表示できます。

以上となりますが、色々な機能を盛り込んだGeneral Corporateテーマを是非お試しくださいジェネ!

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス