マニュアル

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

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

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

Simple Product

■特長

  • ウェブページを追加するとトップページとヘッダーメニューに追加されます。
  • ニュースやお知らせなどの記事を書くと最新記事4件がトップページに表示されます。

Simple Productテーマの使い方

■画像関連の変更方法

Simple_Product.png

左上と画面中央のサイト名は画像で設定しています。この画像を変更するには
[デザイン] - [ファイルマネージャ] ページの「images」ディレクトリに入っている

  • logo.png(高さ 50px 推奨)
  • main-img.png

を差し替える必要があります。上記2つと同じ名前で画像をアップロードすると上書きされるため、テンプレートをさわらずに画像を差し替えることができます。

また、「images」ディレクトリ内の以下画像についても同じ方法で差し替えることが可能です。

  • bg-top-main.jpg (背景画像)
  • favicon.ico (ファビコン)
  • ogimage.png (facebook などにシェアした時に表示される og:image)

■メニューとページ内のコンテンツの作成方法

webpage.png

ウェブページを作成すると、トップページにブロックのように重なっていきます(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にするなど比率で幅を調整できます。

■ニュースの更新

spnews.png

ニュースなど、ブログ記事を1つでも公開すると自動的にトップページにニュースのブロックが追加され、最新4件までが表示されるようになっています。また、ナビゲーションメニューにも追加されます。

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

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

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

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

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