マニュアル

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

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

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

Shop

特長

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

テーマ「Shop」の使い方

  1. 記事を作る
  2. ウェブページを作る
  3. 上部ナビゲーションについて
  4. Instagramのリンク先とウィジェットのソースの貼り付け
  5. 右サイドバーのインフォメーションを変更
  6. ロゴ画像、ヘッダーイメージの指定
  7. テーマ標準の画像等を変更する
  8. configモジュールで色やソーシャルボタンをコントロールする

記事を作る

ブログの記事を作ります。

<カスタムフィールド>

ピックアップ

記事の編集画面でピックアップに表示したい記事でチェックを入れると、「PICKUP おすすめ」として、メインページに記事へのリンクが表示されます。

メインイメージ

一覧で表示されるサムネイル画像や、Facebookなどでシェアされるときに表示されるog:imageなどを指定することができます。

目次に戻る



ウェブページを作る

ウェブページを作ります。

<カスタムフィールド>

グローバルナビに表示

グローバルナビにこのページへのリンクを表示する場合はチェックします。

フッターメニューにのみ表示

カスタムフィールドの「フッターメニューにのみ表示」にチェックを入れると、フッターにウェブページへのリンクが表示できます。
例えばプライバシーポリシーなど、フッターのみにあるようなメニューを作成したい場合にオススメです。

メインページに表示

メインページに表示する場合にチェックを入れます。左カラム表示されます。

目次に戻る



グローバルナビゲーションは、記事と「グローバルナビに表示」にチェックを入れたウェブページ、フォルダが表示されます。
デモページを例に、表示されるパターンをご紹介します。

shopnav.jpg

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

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

目次に戻る



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

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

Shop.jpg

instaurl.jpg

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

instathumb.jpg

目次に戻る



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

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

infomation.jpg

目次に戻る



ロゴ

設定> 全般ロゴ画像のフィールドから、ロゴ画像を指定します。

メインイメージ

設定> 全般メインイメージのフィールドから、メインページのヘッダーイメージを指定します。

shop-images.jpg

目次に戻る



テーマ標準の画像等を変更する

デザイン>ファイルマネージャの「images」ディレクトリ内にある該当ファイルを必要に応じて差し替えてください。 同じ名前で画像をアップロードすると上書きされるため、テンプレートをさわらずに画像を差し替えることができます。

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

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

目次に戻る



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

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

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

目次に戻る