MovableType.net 活用ブログ
MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。
安心・高速・サーバー不要のMovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。
MovableType.netでは、デザインテンプレートをカスタマイズして雛形となる独自のテーマを作成し、それを別のサイトで読み込んで開発しはじめる、という方法が簡単にできるので開発効率をあげることが可能です。詳しくは以下の記事もご覧ください。
上記にプラスして、コンテンツ（記事とウェブページ）のエクスポート・インポート機能を利用すると、デザインだけでなくコンテンツの雛形を用意しておくことができるので、さらに開発速度をあげることができます。
基本的には以下の方法で記事やウェブページをエクスポート・インポートすることができます。
インポート時には画像などのファイルも元のサイトのURLを指定すれば読み込むので、必要に応じて雛形のコンテンツに画像を入れておく、というのもありです。
今回は、テーマOnePage（１枚ペラ＋ニュース）用のシンプルな企業サイト向けの雛形コンテンツを用意してみました。
雛形コンテンツの入ったサンプルサイトは以下になります。デザインは特にさわらず初期状態です。
上記の記事とウェブページをエクスポート（書き出した）ファイルは以下になります。雛形としてご利用いただければと思います。
これらのコンテンツについて、以下簡単に説明していきます。
この部分は、製品を２つ紹介するということを前提に、OnePageで利用しているBootstrapのルールに則って記述されています。
<div class="row"> <div class="col-md-6">左カラム</div> <div class="col-md-6">右カラム</div> </div>
上記の書き方をすると、横幅最大を12として6:6で自動的に半分でレイアウトしてくれます。こうしておけば、ウィンドウサイズが狭くなるスマートフォンなどでは右側が下にくるなど、良い感じにレイアウトされます。
リッチテキストエディタでサンプルソースのテキストを変更したり、画像をアップするなどしてご利用ください。
会社概要の部分は通常のテキストの下に、tableタグで表を作成してあります。
MovableType.netのリッチテキストエディタには表を簡単に作れる機能があるのですが、このサンプルでそのHTMLソースを少し工夫しています。
ポイントは以下のソースのclassの所で、こちらもBootstrapのルールにあわせてtable-borderedで罫線を引き、table-stripedで交互に色をつけるというのを実現しています。
<table id="company_profile" class="table table-bordered table-striped" summary="会社概要">
こちらもリッチテキスト上でテキストを変更してご利用ください。
アクセス部分では、住所などを書いた上でGoogleマップを貼り付けています。
ポイントはwidthを100%にして、heightを350から450pxに設定することです。これにより横幅一杯に表示されつつスマートフォンでも良い感じの高さでみることができます。
また、最近Googleマップが改良され「スマートフォンで操作するときは２本指で行う」という仕様になったので、スマートフォンでスクロールしていたら地図を動かしてしまった、といった事がなくなりました。
お問い合わせ部分は、MovableType.net標準機能であるお問い合わせフォームを設置してください。
詳しくは以下のマニュアルをご覧ください。
ニュースは記事を１つでも書くと表示される部分で、今回は「お知らせ」カテゴリを追加して記事を１つサンプルで追加しておきました。
この記事は削除してご利用ください。
以上、OnePageで使えるコンテンツの雛形をご紹介してきましたが、いかがでしたでしょうか？
独自のデザインテーマと雛形になるコンテンツを用意して置くと、非常にスピーディーにサイトを構築することができます。
是非本記事のサンプルを利用する、または自社で使える雛形を用意するなどしてサイト制作を効率よく行っていただければと思います！
