HOME  >  MOVABLETYPE > レスポンシブテンプレート for MovableType5-7

レスポンシブテンプレート for MovableType5-7

MovableType3.3(動作確認済) ※ただしテーマは利用できず
MovableType4(動作未確認)
MovableType5(動作確認済)
MovableType6(動作確認済)
MovableType7(動作確認済)

ダウンロードファイル

「theme from ~」フォルダ(MovableType5-7用テーマ)

MovableType5-7用のテーマフォルダ
JavaScriptファイル
imgフォルダ(画像)

MovableType3.3用テンプレート(インデックステンプレート、アーカイブテンプレート、テンプレートモジュールの各テキストファイル)も同梱しております。

インストール方法

Themeフォルダに、MT5フォルダ内のテーマフォルダをアップロードし、テーマを選択して適用すれば、簡単にインストールできます。

JavaScriptファイル2つと、imgフォルダは、ブログのトップページ設置と同じ階層(ディレクトリ)に設置します。

特別なMTタグやプラグインを使用していないため、MovableType5,6,7のバージョンでも動作します。

MovableType3と同様に、MT3フォルダ内のテンプレートを一つ一つ、管理画面において、テキストファイルの内容を貼りつけることもできます。

ダウンロード方法&設置・運用方法のご説明

http://kanehara.net/movabletype/

レスポンシブテンプレート for MovableType

SEOに特化したhtmlコード、下記の特徴があります。

Title、Descriptionを自動生成します

人為的に入力することによるページ説明の乱れを廃し、Descriptionが検索結果に表示されやすいことが経験上からは見られます。

HTML5による文書構造

header、main、nav、article、section、aside、footerタグにより、文書構造と、コンテンツの重要性を検索エンジンに伝えます。

パソコン、タブレット、スマホの3段階レスポンシブ

アコーディオンメニューによりサイト内回遊性を高めます

Inclideタグでテンプレートモジュールをお好みで挿入

レスポンシブテンプレート04 for MovableType3.3 (- 5, 6, 7)

パソコン / タブレット / スマートフォン表示

タブレット表示

スマホ表示

サンプルサイト

ダウンロード方法&設置・運用方法のご説明

テンプレートのダウンロード

note内の筆者の有料ページにて、ダウンロードURLを記載しています。有料ページの閲覧には、noteでのユーザー登録が必要になります。

有料ページの閲覧料金で、ご自由にダウンロードしていただくことができます。

使用方法、設定方法はこのサイトにてご説明いたします。

ダウンロードファイル

下記のZIPファイル(選択したテーマのもの)がダウンロードできます。

ZIPファイルの中身は、下記のとおり、「MOVABLETYPE」(選択したテーマのもの)フォルダになっています。

「MOVABLETYPE」フォルダの中身は、下記の通り、「MT3」フォルダ、「MT5」フォルダと、「bootstrap.min(3.36フルバージョン).css」になります。

それぞれの用途

「MT3」フォルダ

MovableType3.3はもちろん、それ以降のバージョンである5(オープンソース版)で使用できます。特殊なタグやプラグインを使用していないため、最新版でも使用できます。
テンプレート、アーカイブテンプレート、テンプレートモジュールを、テキストファイルで用意しています。
MovableTypeの管理画面で、各テキストファイルの中身をテンプレートにすれば、設定できます。

imgフォルダには、このサンプルサイトで使用しているのと同じ画像が入っています。imgフォルダは、MovableTypeで作成するサイトのトップページと同じ階層に設置します。

「MT5」フォルダ

MovableTypeのテーマです。
MovableType5以降では、テーマのインポートをすることにより、使用できるようになっています。

「bootstrap.min(3.36フルバージョン).css」

各テーマでは、インデックステンプレート中に、bootstrap3.36のcssと、独自のstyle.cssを使用しています。

bootstrapのcssは非常に長いため、カルーセルなど、使用しないcssは省いています。
bootstrapのその他のさまざまな機能を利用したい場合には、bootstrapのサイトでダウンロードするか、bootstrap.min(3.36フルバージョン).cssに差し替えて、ファイル名をbootstrap.min.cssに変更して使用できるため、同梱しています。
必要がなければ使用しません。

imgフォルダ

imgフォルダは、このサンプルサイトで使用している画像を格納しています。

MovableTypeで作成するサイトのトップページと同じ階層に、imgフォルダをFTPでアップロードします。

※異なる階層に設置する場合には、テンプレートで使用している画像のURLを修正する必要があります。

サイトマップで使用している画像は、他の画像に変更できます。
幅は変えない方がよいですが、画像の高さは変更できます(例えば正方形にできます)。

JavaScript

MovableTypeで作成するサイトのトップページと同じ階層に、2つのJavaScriptをFTPでアップロードします。

※異なる階層に設置する場合には、テンプレートで使用しているScriptのURLを修正する必要があります。


テンプレート一覧
インデックステンプレート
※各テーマとも共通

名前 出力ファイル名

404エラー 404error.html
bootstrap bootstrap.min.css
htaccess .htaccess
sitemap.xml sitemap.xml
サイトマップ sitemap.html
スタイルシート style.css
メインページ index.html

アーカイブテンプレート
※各テーマとも共通
※アーカイブパスは自由に設定可能(下記は当方推奨のアーカイブパス)

名前 アーカイブパス

ウェブページ folder-path/page-basename.html
カテゴリ別ブログ記事リスト <$MTCategoryLabel dirify=”1″$>.html
ブログ記事 archives/<$MTEntryID$>.html
月別 %y%m/%i

テンプレートモジュール
※「Toppage_ad1」「Toppage_ad2」は、テーマによっては「Toppage_ad」のみ存在
※「Navigation_menu」はテーマにより存在しない

Accordion_menu
 アコーディオン開閉式新着記事。注目記事等にカスタマイズ可。
 トップページにてInclude。不要ならInclude削除。
CategoryCanonical
 カテゴリーページの他との重複ページを避けるため、特定のカテゴリーで、カテゴリーページ以外にcanonical設定可。
 カテゴリーページのheadにてInclude。使わなければそのまま。
Categorypage_ad
 カテゴリーページ下部の広告スペース。
 及びSNSシェアボタン、更新日時、著者ページへのリンク。
 カテゴリーページにてInclude。不要ならInclude削除。
EntryCanonical
 エントリーページの他との重複ページを避けるため、特定のカテゴリーで、エントリーページ以外にcanonical設定可。
 エントリーページのheadにてInclude。使わなければそのまま。
Entrypage_ad
 エントリーページ下部の広告スペース。
 及びSNSシェアボタン、著者ページへのリンク。
 エントリーページにてInclude。不要ならInclude削除。
Footer_left
 Footer左側自由欄。全ページにてInclude。
Footer_right
 Footer右側自由欄。全ページにてInclude。
Lastmodified
 カテゴリーページの更新日時、必要に応じ手動入力。
 テンプレートモジュールCategory_adにて読み込み。
 カテゴリーページにてInclude。不要ならInclude削除。
Navigation_menu(テーマ03)
 ページ上部ナビゲーション設定
 全ページにてInclude。
Sitemap
 ページ上半部カテゴリーメニュー。メニュー1~5の4つ分。
 全ページにてInclude。
Sitemap2
 ページ上半部カテゴリーメニュー。メニュー5~8の4つ分。
 全ページにてInclude。不要ならInclude削除。
Toppage_ad1(テーマ01,02)
 トップページ上半部の広告スペース。
 トップページにてInclude。不要ならInclude削除。
Toppage_ad2(テーマ03,04はToppage_ad)
 トップページ下部の広告スペース。
 及びSNSシェアボタン、著者ページへのリンク。更新日時、必要に応じ手動入力。
 トップページにてInclude。不要ならInclude削除。
Toppage_entry
 最新記事全文。初期値は全文で、記事1つ。
 記事数の変更や、特定のカテゴリーのみにするなど、カスタマイズ可能。
 トップページにてInclude。不要ならInclude削除。
Whatsnew1
 新着記事概要。初期値は4つ。
 エントリーのキーワードに img src タグを入れれば、サムネイル表示。
 キーワードを入れなければデフォルト画像。
 記事数の変更や、特定のカテゴリーのみにするなど、カスタマイズ可能。
 トップページにてInclude。不要ならInclude削除。
Whatsnew2
 新着記事概要(横並び2列)。初期値は4つ。
 エントリーのキーワードに img src タグを入れれば、サムネイル表示。
 キーワードを入れなければデフォルト画像。
 記事数の変更や、特定のカテゴリーのみにするなど、カスタマイズ可能。
 トップページにてInclude。不要ならInclude削除。


レスポンシブテンプレート01 for MovableType3.3 (- 5, 6, 7)

パソコン / タブレット / スマートフォン表示

MT3でimgフォルダ&JavaScript設置


MT3フォルダ内は、下記のようになっています。


MT3でテンプレート手動更新

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です