MovableType用無料レスポンシブテーマ
選べるカラーとシンプルなデザインで、
スマートフォンにも対応したMovableType用テーマを
無料で公開しています。
- 簡単編集
-
- 共通部分（ヘッダー・フッター）の文言指定などをひとつの設定用モジュールに集約し、管理画面をあちこち移動せずに基本設定が完結
- 作ったページにタグづけするだけで、ヘッダー・フッターのナビゲーションを設定可能
- すぐに使える新着情報機能が実装済み
- プラグインの追加は不要、カスタムフィールド不使用。バージョン5.xでも利用可能なタグ記述
- 高機能
- スマートフォン表示最適化済み
-
- 表示画面のサイズに応じてレイアウトが変わるレスポンシブデザインを採用
※横幅600pxまでのデバイスでは、PC版表示（コンテンツ幅980px）が縮小表示されます
- 表示画面のサイズに応じてレイアウトが変わるレスポンシブデザインを採用
- カスタマイズしやすいHTML・CSS
-
- 入れ子構造やクラスづけを最小限にとどめたマークアップ
- 画像を使用していないプレーンなCSS装飾（ご自身でデザイン・CSS編集ができる方に最適）
- 9通りのカラーバリエーション（2017/2/6追加） ※これ以前にダウンロードされた方はこちらをご覧ください
- MovableType（以下MT）の対応バージョン
- 5.x以上（未確認ですが、それ以前のものでも動くかも知れません）
※ライセンス版、オープンソース版ともに対応 - 表示確認済みブラウザ
- IE（9以上推奨、7・8でも大きな崩れはありません）/ Chrome / Firefox / Safari / Opera
下記リンクから必要なファイル（MT用テーマファイルおよび静的ファイル一式、zip形式）をダウンロードし、
続く説明にしたがって組み込みと編集をおこなってください。
ダウンロードされた場合にはご利用に関する規約にご同意いただいたものとみなします。
大まかな手順は以下のとおりです。
- テーマファイル（arkw_tmpl02_website/、arkw_tmpl02_blog/）をフォルダごとMTテーマディレクトリにアップロード
- MT管理画面でウェブサイトx1、その配下のブログ×1を作成
- 静的ファイル一式（common/）をフォルダごとウェブサイトのルート階層にアップロード
- テンプレートモジュール「★全体設定」で必要な項目を編集
- コンテンツ（ウェブページ、新着情報記事）を作成
- 作成したウェブページにタグづけをしてナビゲーションを設定（テンプレートモジュール「レイアウト用タグ一覧」内に説明あり）
- お好みでCSSをカスタマイズし、見た目をととのえて完成
この説明だけでできそうだという方は、さっそく挑戦してみてください。
詳細な手順は以下にご案内します。（※見出しをクリックすると内容が表示されます）
Step 1 設置
※MTがインストールされたサーバがあることが前提です。（バージョン5.x以上推奨）
1. テーマファイルのアップロード
ダウンロードしたファイルのうち、「arkw_tmpl02_website」フォルダおよび「arkw_tmpl02_blog」フォルダ全体を、サーバの下記ディレクトリにアップします。
アップロード先：（MTインストールディレクトリ）/themes/
例）ルート階層を /html/ 、MTインストールディレクトリを /html/mt/ とした場合（ はアップロードするファイル）
/html/ ├ mt/ │ ├ themes/ │ │ ├ arkw_tmpl02_blog/ │ │ │ ├ templates/ │ │ │ │ └ ～.mtml │ │ │ └ theme.yaml │ │ ├ arkw_tmpl02_website/ │ │ │ ├ templates/ │ │ │ │ └ ～.mtml │ │ │ └ theme.yaml │ │ …
2. ウェブサイトとブログの新規作成
お使いのMT環境に、任意の名称のウェブサイトと、それにひもづいたブログ(新着情報用）を作成します。
既に作成済みの方は、テーマのみ下記に示したものを適用させてください。
ウェブサイト作成時の設定内容
- ウェブサイトテーマ：arkw_tmpl02_website
- ウェブサイト名：任意（サイトタイトルとして表示されます）
- ウェブサイトURL：任意（ルート階層に作成する場合は変更なし）
- ウェブサイトパス：任意（同上）
※設定保存後、再構築をおこなってください。
ブログ作成時の設定内容
- ブログテーマ：arkw_tmpl02_blog
- ブログ名：任意（表示上のブログタイトルは、インストール完了後に別の箇所で設定）
- ブログURL：news/、info/ など任意（必ず親ウェブサイトより下の階層を指定してください
- ブログパス：news、info など任意（同上）
※設定保存後、再構築をおこなってください。
※異なるウェブサイトにひもづいたブログでは、テーマがうまく適用されません。
上記で作成したウェブサイトの管理画面左カラムメニュー「ブログ」›「新規」から作成してください。
3. 静的ファイル一式のアップロード
ダウンロードしたファイルのうち、「common」フォルダ全体を、作成したウェブサイトのルート階層直下にアップします。
例）ウェブサイトのルート階層を /html/ とした場合（ はアップロードするファイル）
/html/ ├ common/ │ ├ css/ │ │ └ ～.css │ ├ img/ │ │ └ ～.gif, ～.png │ └ js/ │ └ ～.js …
ここまでで土台はできあがりです。
この時点で、トップページは下のような状態になっているはずです。
Step 2 基本設定
以降、管理画面で使われるメニュー名・項目名を で示します
ウェブサイトのデザイン›テンプレート›テンプレートモジュール（上から3つめのブロック）に、設定用モジュールが用意されています。
基本的な項目は★全体設定モジュールから編集します。初期状態では仮の内容が入っていますので、各項目を編集していきます。
» 全体設定モジュールの内容をプレビュー
注意：項目名に続く「=」の後にはスペースを入れないでください。（前に入っているのはOK）
例）variant = value …×
variant =value …○
また、★全体設定モジュールの変更結果は、再構築をおこなうまで反映されません。
設定項目群1：書き換え必須なもの
各項目の反映先は下図のとおりです。
続けて、一部の項目について補足説明いたします。（基本的な説明は★全体設定モジュール参照）
- 表示したくない項目は、その行ごと削除してください。
「=」以降が空でも、項目名が書かれたままだと、HTMLソース上に空の要素が残るものがあります。
（弊害はありませんが、無意味な記述になります） - metaDescは検索エンジンでの検索結果に利用される「meta descriptionタグ」の内容を指定します。
必ず反映されるとは限らず、また反映される場合も時間を要します。 - metaKwは検索に影響するといわれる「meta keywordタグ」の内容を指定します。表示される先は特にありません。
- launchedYearで公開年の西暦を設定すると、翌年以降は自動で以下のとおりに表記が変わります。
例）launchedYearを「2016」と設定した場合の出力結果
2016年12月31日まで：Copyright ©2016 Example Col.Ltd.
2017年1月1日以降 ：Copyright ©2016-2017 Example Col.Ltd.
2018年1月1日以降 ：Copyright ©2016-2018 Example Col.Ltd.
…
設定項目群2：通常は変更不要なもの
各項目の反映先は下図のとおりです。
続けて、一部の項目について補足説明いたします。（基本的な説明は★全体設定モジュール参照）
- サイトタイトルは、標準では管理画面上でのウェブサイトの名称がそのまま入ります。
それ以外のテキストを指定したい場合にsiteNameの値を変えてください。
HTMLテキストではなく画像を表示させたい場合は、アイテム機能を使って別の画面からおこないます。
詳しくは★全体設定モジュール内の【ヘッダーのサイトタイトル部分をテキストから画像に変更する手順】をご参照ください。 - homeDisplayに関する図解
- 新着情報記事の総件数がhomeNewsLimitの値を下回るときは、左下の過去の一覧を見るボタンが非表示になります。
- 新着情報記事の総件数がnewsListLengthの値を上回ると、新着情報ブログのトップページで、記事タイトルリストの下にページ送りのリンクテキストが挿入されます。
記事の総件数が50件、newsListLength=10 のときは、下記のように表示されます。
« 1 2 3 4 5 » - customHeaderSubNav、customGnav、customFooterSubNav、customHomeCntについては次の「コンテンツ作成」の中でご説明します。
Step 3 コンテンツ作成
ウェブサイトのウェブページから、コンテンツを作成してください。（※作成方法については、MTの操作方法の範疇となるため割愛します）
用意されている装飾はこちらのページでご確認いただけます。
ウェブサイトのインデックステンプレートスタイル一覧（サンプル）にも同じ内容が収められています。
次に、作成したウェブページのタグ欄でタグ設定をし、ナビゲーション部分にリンクを表示させます。
用意されているタグの一覧と用法
はじめに、各タグの反映先を下図に示します。
タグ付けは、ウェブページのほか、管理画面左カラムメニューのアイテムからアップロードした画像に対しても行うことができます。
ヘッダーのロゴ画像やトップページのスライダーは、アイテム画像にタグづけをして設定します。
注意： タグで使用されている「@」および数字はすべて半角です。全角で入力すると有効になりませんのでお気をつけください。
| 対象 | タグ | 表示箇所 | 表示結果 | 備考 |
|---|---|---|---|---|
| ヘッダー | ||||
| アイテム 画像 |
@ヘッダーロゴ | ヘッダーの サイトタイトル部分 |
HTMLテキストの 代わりに画像を表示 |
|
| ウェブ ページ |
@ヘッダーサブナビ | 画面右上の ヘッダーサブナビ |
ページへのリンクを表示 |
|
| ウェブ ページ |
@グローバルナビ1 @グローバルナビ2 @グローバルナビ3 @グローバルナビ4 @グローバルナビ5 @グローバルナビ6 |
グローバルナビ | ページへのリンクを表示 （1～6は左からの並び順） |
|
| ウェブ ページ |
@グローバルナビ1サブ @グローバルナビ2サブ @グローバルナビ3サブ @グローバルナビ4サブ @グローバルナビ5サブ @グローバルナビ6サブ |
グローバルナビ内の ドロップダウンリスト |
マウスオーバー時に ページへのリンクを表示 （デモサイトの「会社情報」 ボタン参照） |
|
| フッター | ||||
| ウェブ ページ |
@フッターサブナビ | 画面左下の フッターサブナビ |
ページへのリンクを表示 |
|
| トップページ | ||||
| アイテム 画像 |
@スライド1 @スライド2 @スライド3 …（20まで） |
メインビジュアル | 画像を表示 |
|
| ウェブ ページ |
@トップページ コンテンツ |
メインビジュアル下 新着情報欄の上の フリースペース |
本文欄の内容を 埋め込み表示 （HTML有効） |
|
| ウェブ ページ |
@注目のページ | 新着情報欄の右側 | ページタイトル / 概要欄の内容 / 本文欄で使用した画像の サムネイルを表示 （ページへのリンクつき） |
|
| アイテム 画像 |
@サムネイル | 注目のページ欄 | 前項を参照 | |
| ウェブ ページ |
@トップ下段右 | 新着情報欄の右側 | 本文欄の内容を 埋め込み表示 （HTML有効） |
|
さらにカスタマイズする
もう一歩踏み込んで使いこなしたい方のために、細かいながらも需要がありがちなオプションをご用意しています。
・グローバルナビで、ドロップダウンリストの親ボタンにリンク設定をしたくない
例えば、「ごあいさつ」「会社概要」「アクセス」などのページをまとめてグローバルナビでは「会社情報」と表示したいが、「会社情報」というページ自体は存在しない、という状況があると思います。
その場合、『マウスオーバーのみに反応してクリックはできない親ボタン』を作ることができます。
【編集箇所】 ウェブサイトのデザイン›テンプレート›テンプレートモジュール›★グローバルナビラベル指定
gnav0x_nolink=の記述が01から06まであります。この数字がそれぞれ、@グローバルナビ1,2,…タグと対応しています。
@グローバルナビ3が該当する箇所をリンクなし文言としたい場合、gnav03_nolink=に続けて希望の文言を記入してください。
※編集完了後は再構築をおこなってください。
・各ナビの設定にタグを使わず、HTMLを直接編集したい
ヘッダーやフッターのサブナビで作成日付にしたがった表示順では困る場合や、外部リンクを混ぜたい場合などは、タグづけによる自動表示では対応しきれません。
HTML編集の知識がある方なら、手動で記述したものと置き換えていただくことが可能です。
【編集箇所1】 ウェブサイトのデザイン›テンプレート›テンプレートモジュール›カスタム□□□ナビ
ヘッダーサブナビ、グローバルナビ、フッターサブナビそれぞれにモジュールが用意してあります。
編集用の雛型が書かれていますので、適宜書き換えてください。
※階層の異なるページにも共通して表示されるため、リンク記述は絶対パスもしくはルート相対パス（「/」で始まる）でおこなってください。
MTタグ<$MTVar name='rootUrl'$>はウェブサイトのルート階層に置き換わります。
【編集箇所2】 ウェブサイトのデザイン›テンプレート›テンプレートモジュール›★全体設定
ヘッダーサブナビ …customHeaderSubNav
グローバルナビ …customGnav
フッターサブナビ …customFooterSubNav
カスタム記述と差し替えたいものを「=0」から「=1」に変更します。この作業が完了後、再構築で反映されます。
・トップページで「注目のページ」機能を使わず、新着情報欄の右を自由記述可能なスペースにしたい
この位置にあてはめたい内容を、@トップ下段右とタグづけしたウェブページの本文欄に作成します。（※PC表示時の横幅540px）
次に★全体設定モジュールでcustomHomeCntを =1 に変更し、再構築をおこなってください。
・アクセス解析や、SNSタイムライン埋め込み用などのスクリプトを挿入したい
よくある「head終了タグ直前」、「body開始タグ直後」、「body終了タグ直前」の3箇所に、任意のコードを挿入するためのモジュールをご用意しています。
ウェブサイトのデザイン›テンプレート›テンプレートモジュール›コード挿入用：□□□□タグ□□の編集画面に適宜コードを書き込んで、再構築をおこなってください。
・トップページのスライダーの動作を変えたい
このテーマで利用しているbxSliderは、さまざまなオプションが利用可能です。
ウェブサイトのデザイン›テンプレート›テンプレートモジュール›★トップページ スライダーの設定に代表的なオプションが書き出してあります。これは、bxSliderの実行記述の下記部分に該当します。
$(function(){
$(※適用対象).bxSlider({
→→ この部分 ←←
});
});
上記リンク先の配布元サイトも参考に、お好みで調整を加えてください。
・クリックして大きい画像を表示させる機能を使いたい
モーダルウインドウ表示用プラグイン・fancyboxを組み込み済みです。該当する<a>タグにclass="zoom"を指定してください。
その他、基本的な使い方やオプションについては上記リンク先の配布元（英語）をご参照ください。検索すると、日本語で解説しているページも数多く見つかります。
実行記述は/common/js/base.js内にあります。
デザインの作り込み（CSSファイルの編集）
このテーマのCSSは、リセット / 基本設定 / ページ個別… のようにファイルが分かれておらず、「/common/css/base.css」（全体およびPC表示）と「/common/css/sp.css」（横幅600px以下のデバイス用）の2ファイルのみになっています。
どこに何が書いてあるかは、極力ファイル内にコメントアウトで示してありますので、適宜変更を加えてください。
クラス名と表示結果の対応関係はデモサイトのスタイル一覧ページもご参照ください。
ご利用について
- 当テーマのご利用は個人用・商用問わず無料です。ご報告いただく必要もありません。
（出来上がったサイトのURLをお知らせいただけたら、弊社のSNS等でご紹介させていただくことがあるかも知れません） - 編集方法などに関するサポートはおこなっておりません。
設置・カスタマイズを有償でお請けすることはできますので、ご検討の方はご相談ください。
テンプレート記述の不備や今後の改善要望につきましては、お知らせいただけると幸いです。 - 当テーマの再配布や販売は禁止いたします。発見された場合には然るべき対処をとらせていただきます。
- このテーマを利用して構築されたサイト、またそのサーバにおいて発生した損害や不利益について、弊社は責任を負いかねますのであらかじめご了承ください。