マニュアル

テーマ「Shop」の特長と使い方

飲食店やショップサイト向けテーマ「Shop」

テーマ「Shop」はカフェなどの飲食店やショップサイト向けのテーマとなっています。3カラムのデザインで、情報量の多いサイトもカバーできるようになっており、InstagramやFacebookをサイドバーに配置することも可能です。Twitterが配布しているCSSフレームワークの「Bootstrap」をベースに、複雑な部分を除き、使いやすいようにカスタマイズしています。

Shop

■特長

  • オススメ記事や、重要なニュース記事を、簡単にピックアップして表示させることが可能です。
  • メインカラーは、カラーコードを指定するだけで簡単に変更することが可能です。

テーマ「Shop」の使い方

■上部ナビゲーションについて

shopnav.jpg

右上のメニューは、記事とウェブページ、ウェブページに設定するフォルダが表示されます。
具体的には以下のようになります。

  • ホーム
    トップページへのリンクです。
  • ニュース▼
    クリックするとブログ記事一覧のトップページへのリンクである「TOP」と、記事のカテゴリ名がプルダウンメニューとして表示されます。
  • メニュー▼
    ウェブページのフォルダ名です。クリックすると該当フォルダが設定されているウェブページ名がプルダウンメニューとして表示されます。
    また、これらのメニューはメインイメージの左下に展開されて表示されます。
  • 当店について、アクセス、スタッフ募集
    フォルダを設定していないウェブページ名です。クリックすると該当のウェブページが表示されます。

また、これらはスマートフォンサイズになると左メニューとして展開して表示されます。

■ロゴとメインイメージの変更

shop-images.jpg

トップページのロゴとメインイメージは画像で設定しています。
[デザイン] - [ファイルマネージャ] ページの「images」ディレクトリ内に以下のような名称でアップロードすると自動的に配置されます。

  • logo.png (542x182)
  • slide01.jpg (1500x750)

メインイメージ画像のテキストは [デザイン] - [テンプレート] ページの「メインページ」テンプレートで変更ができます。

また、「images」ディレクトリ内の以下画像についても差し替えるだけで変更が可能です。

  • noimage-s.jpg(ニュース一覧で表示されるときに画像がない場合の標準の画像)
  • favicon.ico (ファビコン)
  • ogimage.png (facebook などにシェアした時に表示される og:image)

■Instagramのリンク先とウィジェットのソースの貼り付け

Shop.jpg
スマートフォンの時に左メニューに表示される、Instagramのリンクは [デザイン] - [テンプレート] ページの「config」テンプレートでリンク先 URL の変更ができます。

instaurl.jpg

PC版の左メニューのInstagramのサムネイル画像は、 [デザイン] - [テンプレート] ページの「instagram」テンプレートで外部サービス SnapWidget で生成されたスクリプトソースを貼り付けます。

instathumb.jpg

■右サイドバーのインフォメーションを変更

infomation.jpg
右側に常に表示されるインフォメーションは [デザイン] - [テンプレート] ページの「information」テンプレートで内容を編集できます。

■PICKUP オススメ部分はカスタムフィールドで実現

デモサイトにあるPICK UP おすすめ部分は、以下のようにカスタムフィールドを作成して

  • システムオブジェクト:記事
  • 名前・説明:好きな内容
  • タイプ:チェックボックス
  • 識別子:今回は「entry_pickup

[デザイン] - [テンプレート] ページの「メインページ」テンプレートを開きます。

shopindex.jpg

以下のソースコードをNEWS ニュースの上のclass「group」のdivの上に貼り付けます。

<mt:SetVarBlock name="pickup_count"><mt:Entries lastn="5" field:entry_pickup="1"><$mt:EntriesCount$></MTEntries></mt:SetVarBlock>
<mt:If name="pickup_count">
<div class="group">
  <h2>PICKUP おすすめ</h2>
  <mt:Entries lastn="3" field:entry_pickup="1">
  <div class="entry">
    <a href="<$mt:EntryPermalink$>"><img src="<mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="160"$><mt:Else><$mt:BlogRelativeURL$>images/noimage-s.jpg</mt:EntryAssets>" alt="<$mt:EntryTitle$>"></a>
    <h3><$mt:EntryTitle$></h3>
	<p><$mt:EntryDate format="%Y.%m.%d"$><br /><$mt:EntryExcerpt$></p>
	<p class="text-right"><a href="<$mt:EntryPermalink$>" class="button"><i class="fa fa-angle-double-right"></i> 続きを見る</a></p>
  </div>
</mt:Entries>
</div><!-- group -->
<mt:Else>
</mt:If>

後は記事の編集画面でピックアップに表示したい記事でチェックを入れます。

shopentry.jpg

■configモジュールで色やソーシャルボタンをコントロールする

デザイン>テンプレート>テンプレート・モジュールのconfigモジュールでは、以下の変更が可能です。

  • 全ページ共通 meta keywords
    全ページのhead部分のmeta情報として表示される共通のキーワードを指定します。
  • メインカラー
    ヘッダーバナーの背景色などメインの色を指定します。
  • メインテキストカラー
    メインカラーの上にのるテキストの色を指定します。
  • サブカラー
    ピックアップ!の背景色などサブカラーを指定します。
  • 1ページの表示件数
    トップページなどで1ページに何件ずつ表示するかを指定します。
  • Facebook AppID、Twitterアカウント情報
    OGP で利用する Facebook の AppID や、ツイートに含める Twitter のアカウントを記述します。
  • ソーシャルボタン
    表示したいソーシャルボタンをコントロールできます。表示する場合は 1 を、表示しない場合は 0 を指定してください。

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

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