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