テーマ「One Page」の特長と使い方
ビジュアル重視のシンプルなサイト向けテーマ「One Page」
「One Page」はメイン背景イメージをはじめとした画像の差し替えや、情報の更新・追加が簡単に行えます。「ビジュアルを重視したシンプルなウェブサイトにしたい」「自分でウェブサイトの雰囲気を調整しながら運用したい」そんなサイトにオススメです。
特長
- 編集画面からウェブページを追加するだけでスマートフォンに対応した１ページ完結のサイトが作成できます。
- ウェブページはメインページにブロックのように重なっていきます。
- ウェブページのブロック毎に背景画像を配置できます。
- 記事の編集画面からニュースの追加・更新が可能です。
- メインカラーの変更がconfigモジュールで一括で変更できます。
テーマ「One Page」の使い方
画像の設定
メインイメージ
設定＞全般 の「メインイメージ」から背景になる画像をアップロードします。
全面に表示されるため、大きなサイズの画像がオススメです。
ロゴ画像
設定＞全般 の「メインイメージ」からタイトルロゴの画像をアップロードします。
記事（ニュース）を作る
記事ページの生成が行われ、メインページ下部の「ニュース」エリアに記事へのリンクがついたサムネイル画像、タイトル、概要が表示されます。
記事ページでは、HTMLが使用できます。あらかじめ基本的なスタイルは用意してありますので、必要に応じてスタイルを適用してください。
ウェブページ（ブロック）を作る
ウェブページを作ると、メインページ上で各ブロックとなって表示されます。
ナビゲーションメニューにも自動的に追加されるため、トップページとヘッダーナビゲーションが作成できます。
Bootstrapがベースになっているため、以下のようなソースをエディタのソースコードから貼り付けて編集すればレイアウトのコントロールも可能です。
<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 タブやブックマーク時に表示されるアイコンです。
- noimage-s.jpg 記事で画像がない場合に、一覧部分で標準で表示される画像です。
- ogimage.jpg トップページや記事で画像がない場合にFacebookなどで標準で表示される画像です。
- main-img.png トップページの背景イメージの上にメインのロゴとして表示される画像です。
プッシュ通知を使う
記事が更新された際に、購読者へ通知が届く「Webプッシュ通知」に対応しています。
新着記事がすぐにお届けできるので、メディアサイトに最適です。
Webプッシュ通知の設定方法は、Webプッシュ通知を利用するにまとめておりますので、ぜひご確認ください。
・Webプッシュ通知を使用する
設定＞Webサービスから、「Webプッシュ通知」を「有効」にチェックをいれます。
サイドバーに「プッシュ通知の購読」ボタンが表示されます。
（対応していないブラウザでは表示されません。）
クリックするとモーダルが表示され、閲覧者側が購読／解除を選択できます。
- 関連リンク
- 【マニュアル】Webプッシュ通知を利用する
設定されているカスタムフィールド
このテーマにあらかじめ設定されているカスタムフィールドは以下のとおりです。
ブログ
- メインイメージ（識別子：main_images）
- ロゴ画像（識別子：logo_images）
ウェブページ
- メインイメージ（識別子：pageimage）
- メインイメージの配置（識別子：imageposition）
共通変数のカスタマイズでできること
色指定、SNSの設定、アカウントの管理、表示件数などを「config」モジュールで設定しています。
「config」モジュールを書き換えることで、直接htmlを触ることなく、スタイルの変更が可能です。
キーワードを設定する
- 全ページ共通 meta keywords
全ページのhead部分のmeta情報として表示される共通のキーワードを指定します。
メインカラーを変更する
- メインカラー
見出しなどのサイトのメインとなる色を指定します。 - トップページヘッダー背景カラー
ヘッダーの背景色の色を指定します。 - トップページヘッダーテキストカラー
トップページヘッダー背景カラーの上にのるテキストの色を指定します。
1ページの表示件数
記事一覧ページなどで1ページに記事を何件ずつ表示するか指定します。
SNSのURLの設定
ソーシャルボタンで利用する FacebookやTwitterのURL記述します。
SNSのアカウント設定
OGP で利用する Facebook の AppID や、ツイートに含める Twitter のアカウントを記述します。
ソーシャルボタン
該当のSNSを表示する場合は 1 を、表示しない場合は 0 を指定します。