マニュアル

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

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

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

One Page

特長

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

テーマ「One Page」の使い方

  1. 画像の設定
  2. 記事(ニュース)を作る
  3. ウェブページ(ブロック)を作る
  4. テーマ標準の画像等を変更する
  5. プッシュ通知を使う
  6. 共通変数設定でできること

画像の設定

メインイメージ

設定>全般 の「メインイメージ」から背景になる画像をアップロードします。
全面に表示されるため、大きなサイズの画像がオススメです。

ロゴ画像

設定>全般 の「メインイメージ」からタイトルロゴの画像をアップロードします。

目次に戻る



記事(ニュース)を作る

記事ページの生成が行われ、メインページ下部の「ニュース」エリアに記事へのリンクがついたサムネイル画像、タイトル、概要が表示されます。
記事ページでは、HTMLが使用できます。あらかじめ基本的なスタイルは用意してありますので、必要に応じてスタイルを適用してください。

関連リンク
【活用ブログ】必見!記事、ウェブページの本文に対応するCSSまとめ

<カスタムフィールド>

メインイメージ

記事のサムネイルやog:imageの画像を指定します。指定がない場合はデフォルトの画像が表示されます。

目次に戻る



ウェブページ(ブロック)を作る

ウェブページを作ると、メインページ上で各ブロックとなって表示されます。
ナビゲーションメニューにも自動的に追加されるため、トップページとヘッダーナビゲーションが作成できます。

onepage01.jpg

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

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

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

<カスタムフィールド>

メインイメージ

メインページで各ブロックに表示する画像を指定します。

メインイメージの配置

指定したメインイメージをブロック内に配置する位置を決めます。
背景全体、上、下を選択できます。

onepage02.jpg

目次に戻る



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

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

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

目次に戻る



プッシュ通知を使う

記事が更新された際に、購読者へ通知が届く「Webプッシュ通知」に対応しています。
新着記事がすぐにお届けできるので、メディアサイトに最適です。

Webプッシュ通知の設定方法は、Webプッシュ通知を利用するにまとめておりますので、ぜひご確認ください。

・Webプッシュ通知を使用する

設定>Webサービスから、「Webプッシュ通知」を「有効」にチェックをいれます。

 サイドバーに「プッシュ通知の購読」ボタンが表示されます。
(対応していないブラウザでは表示されません。)

クリックするとモーダルが表示され、閲覧者側が購読/解除を選択できます。

関連リンク
【マニュアル】Webプッシュ通知を利用する

目次に戻る


共通変数のカスタマイズでできること

色指定、SNSの設定、アカウントの管理、表示件数などを「config」モジュールで設定しています。
「config」モジュールを書き換えることで、直接htmlを触ることなく、スタイルの変更が可能です。

キーワードを設定する

  • 全ページ共通 meta keywords
    全ページのhead部分のmeta情報として表示される共通のキーワードを指定します。

メインカラーを変更する

  • メインカラー
    見出しなどのサイトのメインとなる色を指定します。
  • トップページヘッダー背景カラー
    ヘッダーの背景色の色を指定します。
  • トップページヘッダーテキストカラー
    トップページヘッダー背景カラーの上にのるテキストの色を指定します。

1ページの表示件数

記事一覧ページなどで1ページに記事を何件ずつ表示するか指定します。

SNSのURLの設定

ソーシャルボタンで利用する FacebookやTwitterのURL記述します。

SNSのアカウント設定

OGP で利用する Facebook の AppID や、ツイートに含める Twitter のアカウントを記述します。

ソーシャルボタン

該当のSNSを表示する場合は 1 を、表示しない場合は 0 を指定します。

目次に戻る