マニュアル

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

製品サイトやシンプルなサイト向けテーマ「Simple Product」

テーマ「Simple Product」はスマートフォンアプリの紹介ページや、商品プロモーション用のランディングサイトなど、1ページ+αのサイトを素早く構築できるテーマです。
構造がシンプルなため、初めてCMSを使ってWebサイトを作成する方にもオススメです。Twitterが配布しているCSSフレームワークの「Bootstrap」をベースに、複雑な部分を除き、使いやすいようにカスタマイズしています。

特長

  • ウェブページを追加するとメインページにブロックで表示されていきます。
  • 記事を書くと記事ページが生成され、最新記事4件がメインページに表示されます。

Simple Productテーマの使い方

  1. 記事を作る
  2. ウェブページを作る
  3. テーマ標準の画像等を変更する
  4. 共通変数設定でできること

記事を作る

ブログの記事を作ります。
あらかじめ基本的なスタイルは用意してありますので、必要に応じて記事内のスタイルを適用してください。
記事の公開と同時に自動的にトップページにニュースのブロックが追加され、最新4件までが表示されるようになっています。
ナビゲーションメニューにも追加されます。

<カスタムフィールド>

関連イメージ

記事のサムネイルやOGP画像を指定します。

目次に戻る


ウェブページを作る

ウェブページを作成すると、トップページにブロックのように重なっていきます。
(1番初めに作成したページを先頭に下へ下へと重なっていきます。)
Bootstrapがベースになっているので、以下のようなソースをHTMLの編集から貼り付けて編集すれば各ブロックレイアウトのコントロールも可能です。

<div class="row">
<div class="col-md-6">左カラム</div>
<div class="col-md-6">右カラム</div>
</div>

col-md-6の6の部分を最大12として、4と8にするなど比率で幅を調整できます。
ナビゲーションメニューにも追加されます。

目次に戻る


ロゴ画像・メインビジュアルロゴ画像

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

メインイメージ

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

目次に戻る


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

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

  • favicon.ico  … ファビコン
  • ogimage.png  … facebook などにシェアした時に表示される og:image

目次に戻る


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

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

  • 全ページ共通 meta keywords … 全ページのhead部分のmeta情報として表示される共通のキーワードを指定します。
  • 1ページの表示件数 … 記事一覧ページなどで1ページに何件ずつ表示するかを指定します。
  • ソーシャルサービスへのリンク … Facebook、Twitter、Google+のページがあれば入力します。なければ削除するとボタン自体が非表示になります。
  • ソーシャルシェアボタンの設定 … Facebook の AppID やツイートに含める Twitter のアカウント情報の設定や、各種ソーシャルボタンを表示するかを設置可能です。

目次に戻る