マニュアル

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

ビジュアル重視のシンプルなサイト向けテーマ「One Page」

One Page」はメイン背景イメージをはじめとした画像の差し替えや、情報の更新・追加が簡単に行えます。「ビジュアルを重視したシンプルなウェブサイトにしたい」「自分でウェブサイトの雰囲気を調整しながら運用したい」そんなサイトにオススメです。

One Page

■特長

  • ウェブページを追加するだけでスマートフォンに対応した1ページ完結のサイトが作成できます。
  • ウェブページを追加するとトップページにブロックのように重なっていきます。
  • ウェブページ毎にカスタムフィールドで背景画像を指定でき、ブロックの上か下または背景に配置できます。
  • メイン背景イメージはアイテムのカスタムフィールドによって簡単に変更可能です。
  • 記事の編集でニュースも追加・更新が可能です。
  • メインカラーの変更がconfigモジュールで一括で変更できます。

テーマ「One Page」の使い方

■トップページの各ブロックをウェブページで追加する

onepage01.jpg

ウェブページを作成すると、トップページにブロックのように重なっていきます(1番初めに作成したページを先頭に下へ下へと重なっていきます。)また、ナビゲーションメニューにも自動的に追加されるため、ウェブページを作成するだけで、トップページとヘッダーナビゲーションが作成できます。

Bootstrapがベースになっているため、以下のようなソースをエディタのソースコードから貼り付けて編集すればレイアウトのコントロールも可能です。

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

col-md-6の6の部分を、最大12として、4と8にするなど比率で幅を調整できます。

また、メインイメージを指定してその画像をウェブページの背景全体or上or下を選択して配置することができます。

onepage02.jpg

■記事のサムネイル画像やog:imageを指定する

記事一覧で表示されるサムネイル画像や、Facebookなどでシェアされるときに表示されるog:imageなどを、デフォルトで用意されているカスタムフィールドで指定することができます。 

■トップページのメイン背景イメージを変更する

トップページのメイン背景イメージを変更する場合は、アイテム>一覧から適用したい画像を選択し、編集画面にある「メイン背景イメージに設定」にチェックを入れ保存します。

onepage03.jpg

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

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

  • favicon.ico タブやブックマーク時に表示されるアイコンです。
  • noimage-s.jpg 記事で画像がない場合に、一覧部分で標準で表示される画像です。
  • ogimage.jpg トップページや記事で画像がない場合にFacebookなどで標準で表示される画像です。
  • main-img.png トップページの背景イメージの上にメインのロゴとして表示される画像です。

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

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

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

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

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