Movable Type.net

MovableType.net 活用ブログ

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

「Simple Product」テーマを利用してお洒落なカフェサイトを作ってみよう

先日のAWS Summit Tokyo でMT東京の 木村康子さん(株式会社ネットフォレスト 所属)がデザインされ、ハンズオンセミナーを行っていただいた内容をご提供いただきましたので、「Simple Product」テーマの活用方法としてご紹介します!

今回の活用方法では、以下のような流れでデザインを編集します。

cafeshop01.png
  1. 「Simple Product」テーマを設定したブログ(ウェブサイト)を作成する
  2. デザインに必要な画像、.css、.js をアップロードする
  3. カスタムフィールドを作成する
  4. 記事、ウェブページを作成する
  5. 「スタイルシート」テンプレートを編集する
  6. 「header」、「header_news」テンプレートを編集する
  7. 「footer」テンプレートを編集する
  8. 「インデックスページ」テンプレートを編集する

実際のデモサイトはこちらを御覧ください。


続いて、それぞれの詳しい作業手順をご案内します。

「Simple Product」テーマを設定したブログ(ウェブサイト)を作成する

cafeshop02.png
  1. 「Simple Product」テーマを設定したブログ(ウェブサイト)を作成する
  2. ブログを作成する:
    https://movabletype.net/support/createsite/blogedit.html

デザインに必要な画像、.css、.js をアップロードする

cafeshop03.png
  1. 以下を参考にwow.min.jsとanimate.cssをダウンロードする
    参考:
    http://mynameismatthieu.com/WOW/ wow.min.jsはGitHubページのdistフォルダ配下にあります。
    http://daneden.github.io/animate.css/
  2. [デザイン] - [ファイルマネージャ] を開く
  3. ファイルマネージャに「css」ディレクトリを作成しその中に「animate.css」をアップロードする
  4. ファイルマネージャの「js」ディレクトリに「wow.min.js」をアップロードする
  5. 「images」内の画像をすべて削除し以下ファイル内の画像 6 件をアップロードする cafeimage.zipをダウンロード

カスタムフィールドを作成する

cafeshop04.png
  1. [カスタムフィールド] - [新規] を開く
  2. 以下でカスタムフィールドを作成する
  3. システムオブジェクト:ウェブページ
    名前:背景画像
    タイプ:画像
    識別子:bgimg

記事、ウェブページを作成する

  1. 記事を作成する
    任意の記事を数件作成する
  2. ウェブページを作成する
    「About」、「Menu」、「Shop」というタイトルでそれぞれウェブページ内に画像を挿入し作成する
    (ウェブページ作成画面内のカスタムフィールド「背景画像」項目で画像を設定するとウェブページの背景に任意の画像を設定できます。必要に応じて設定してください)

「スタイルシート」テンプレートを編集する

cafeshop05.png
  1. [デザイン] - [テンプレート] の「スタイルシート」を開く
  2. 以下のファイルをダウンロードし、内容をコピー&ペーストしてテンプレートを「保存」する
    styles.cssをダウンロード

「header」、「header_news」テンプレートを編集する

  1. [デザイン] - [テンプレート] の「header」、「header_news」を開く
  2. 以下を <nav class="navbar-collapse collapse"> に変更してテンプレートを「保存」する
  3. <nav class="navbar-collapse collapse navbar-right">
  4. 以下を <a href="<$mt:BlogRelativeURL$>news.html">News</a> に変更してテンプレートを「保存」する
    <a href="<$mt:BlogRelativeURL$>news.html">ニュース</a>

「footer」テンプレートを編集する

  1. [デザイン] - [テンプレート] の「footer」を開く
  2. 以下を <div id="footer-logoarea"> に変更してテンプレートを「保存」する
  3. <div class="col-sm-6" id="footer-logoarea">

「インデックスページ」テンプレートを編集する

  1. [デザイン] - [テンプレート] の「インデックスページ」を開く
  2. <head> タグの中に下記を追加する
  3. <link rel="stylesheet" href="<$mt:BlogURL encode_html="1"$>css/animate.css">
  4. </body> タグの直前に下記を追加する
  5.  
    <script src="<$mt:BlogRelativeURL$>js/wow.min.js"></script>
     <script>
        new WOW().init();
     </script>
    
  6. <section class="webpages" id="<$mt:PageBasename$>"> を以下に変更する
  7. <mt:If tag="CustomFieldValue" identifier="bgimg">
    	<section class="webpages bgimg wow fadeInUp" id="<$mt:PageBasename$>" <mt:CustomFieldAsset identifier="bgimg"> style="background-image: url('<$mt:AssetURL$>');"</mt:CustomFieldAsset> data-wow-duration=".5s" data-wow-delay=".5s">
    <mt:Else>
    	<section class="webpages wow fadeInUp" id="<$mt:PageBasename$>" data-wow-duration=".5s" data-wow-delay=".5s">
    </mt:If>
    
  8. <a href="<$mt:EntryPermalink$>" class="col-sm-3"> を以下に変更する
  9. <a href="<$mt:EntryPermalink$>" class="col-sm-6 col-md-3 news wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".5s">
  10. 「$('#top-news .col-sm-3').tile(4);」を「$('#top-news .news')」に変更して保存する

以上で、具体的な作業は完了です。
今回のデザインに利用した画像などを変更すると印象もずいぶんとかわるので、自分のお店のコンセプトにあわせてメイン画像などを変更してみるのもおすすめです!

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

アカウント作成

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

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