先日の AWS Summit Tokyo で MT東京 の 木村康子様（株式会社ネットフォレスト様 所属）がデザインされ、ハンズオンセミナーを行っていただいた内容をご提供いただきましたので、「Simple Product」テーマの活用方法としてご紹介します！
- 「Simple Product」テーマを設定したブログ（ウェブサイト）を作成する
- デザインに必要な画像、.css、.js をアップロードする
- カスタムフィールドを作成する
- 記事、ウェブページを作成する
- 「スタイルシート」テンプレートを編集する
- 「header」、「header_news」テンプレートを編集する
- 「footer」テンプレートを編集する
- 「インデックスページ」テンプレートを編集する
実際のデモサイトはこちらをご覧ください。
続いて、それぞれの詳しい作業手順をご説明します。
「Simple Product」テーマを設定したブログ（ウェブサイト）を作成する
- 「Simple Product」テーマを設定したブログ（ウェブサイト）を作成する
ブログを作成する： https://movabletype.net/support/entrywebpage/webpageedit.html
デザインに必要な画像、.css、.js をアップロードする
- wow.min.jsとanimate.cssをダウンロードする
参考：
https://github.com/matthieua/WOW wow.min.jsはGitHubページのdistフォルダ配下にあります。
http://daneden.github.io/animate.css/ - [デザイン] - [ファイルマネージャ] を開く
- ファイルマネージャに「css」ディレクトリを作成しその中に「animate.css」をアップロードする
- ファイルマネージャの「js」ディレクトリに「wow.min.js」をアップロードする
- 「images」内の画像をすべて削除し、ファイル内の画像 6 件をアップロードする cafeimage.zipをダウンロード
カスタムフィールドを作成する
- [カスタムフィールド] - [新規] を開く
- 必要事項を入力し、カスタムフィールドを作成する
システムオブジェクト：ウェブページ 名前：背景画像 タイプ：画像 識別子：bgimg
記事、ウェブページを作成する
- 記事を作成する
任意の記事を数件作成する - ウェブページを作成する
「About」、「Menu」、「Shop」というタイトルでそれぞれウェブページ内に画像を挿入し作成する
（ウェブページ作成画面内のカスタムフィールド「背景画像」項目で画像を設定するとウェブページの背景に任意の画像を設定できます。必要に応じて設定してください）
「スタイルシート」テンプレートを編集する
- [デザイン] - [テンプレート] の「スタイルシート」を開く
- 次のファイルをダウンロードし、内容をコピー＆ペーストしてテンプレートを「保存」する
styles.cssをダウンロード
「header」、「header_news」テンプレートを編集する
- [デザイン] - [テンプレート] の「header」、「header_news」を開く
- 次のコードを<nav class="navbar-collapse collapse"> に変更し、テンプレートを「保存」する
<nav class="navbar-collapse collapse navbar-right">
- 次のコードを<a href="<$mt:BlogRelativeURL$>news.html">News</a> に変更し、テンプレートを「保存」する
<a href="<$mt:BlogRelativeURL$>news.html">ニュース</a>
「footer」テンプレートを編集する
- [デザイン] - [テンプレート] の「footer」を開く
- 次のコードを<div id="footer-logoarea"> を変更し、テンプレートを「保存」する
<div class="col-sm-6" id="footer-logoarea">
「インデックスページ」テンプレートを編集する
- [デザイン] - [テンプレート] の「インデックスページ」を開く
- <head> タグの中にコードを追加する
<link rel="stylesheet" href="<$mt:BlogURL encode_html="1"$>css/animate.css">
- </body> タグの直前にコードを追加する
<script src="<$mt:BlogRelativeURL$>js/wow.min.js"></script>
<script>
new WOW().init();
</script>
- <section class="webpages" id="<$mt:PageBasename$>"> を、次のコードに変更する
<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>
- <a href="<$mt:EntryPermalink$>" class="col-sm-3"> を、次のコードに変更する
<a href="<$mt:EntryPermalink$>" class="col-sm-6 col-md-3 news wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".5s">
- 「$('#top-news .col-sm-3').tile(4);」を「$('#top-news .news')」に変更して保存する
今回のデザインに利用した画像などを変更すると印象もずいぶんとかわるので、自分のお店のコンセプトにあわせてメイン画像などを変更してみるのもおすすめです！
