テーマ「Stylish Corporate」の特長と使い方
Stylish Corporateはかんたんデザイン編集に対応した新しいバージョンになっています。
従来の仕様のStylish Corporateのテーマを利用したい場合は以下のファイルをご利用ください
カラムにとらわれないデザインのベーステーマ「Stylish Corporate」
テーマ「Stylish Corporate」は、従来のベーステーマにはなかった、カラムにとらわれない画面全体を使ったデザインのベーステーマです。
画面を広く使う現代的なwebページを制作したい場合にオススメです。
特長
- 編集画面からウェブページ・記事を追加するだけでスマートフォンに対応したサイトが作成できます。レスポンシブ対応。
- ページや記事が追加されると、サイトマップ、アーカイブも自動的に生成されます。
- ウェブページをフォルダ内に作ることで、階層構造を作ることができます。
- ページ編集画面のチェックボックスから、グローバルナビやトップページへの表示のあり/なしを選ぶことができます。たくさんあるページから、優先順位をつけたい場合におすすめです。
- ページに画像イメージを設定することで、対応するサムネイル・ヘッダー画像が一括で変更できます。
- IDを入力するだけで、SNSの設置ができます。
- 記事にogp画像をアップできるので、SNSからのリンクされた際の対応ができます。
Stylish Corporate テーマの使い方
記事を作成する
記事を作成すると、ニュースページにエントリーが表示されます。
投稿画面からカテゴリーを選択すると、左メニューのカテゴリーアーカイブが自動で生成されます。 投稿日に応じて年別アーカイブも自動で生成されます。
サイトのトップページにも最新の３件が表示されます。
カテゴリ
編集画面右のカテゴリを選択するとカテゴリアーカイブに振り分けられます。スタイルの設定で色分けをすることもできます。
★カテゴリごとの色分け（CSS編集が可能な方向け）
ページ一覧、アーカイブのページでカテゴリごとに設定した色を表示できます。
- 記事＞カテゴリから使用するカテゴリを作成し、パスを設定します
- デザイン＞テンプレートから、インデックス・テンプレートにあるstyle.cssを開きます。
- style.cssからカテゴリのスタイルが指定されている該当箇所を探し、先ほど作ったカテゴリのパスに置き換え保存します。
「…genrename--（パス名）」となっています。（画像参照）
- 複数ある場合も同様に設定してください。
ウェブページを作成する
サイトのページを作成します。
本文エリアで使えるタグにはあらかじめスタイルが設定されています。
作成したページはフォルダの構成どおりにフッターに表示されます。
＜カスタムフィールド＞
ページ内イメージ
ページヘッダーに表示させる背景画像や、ぺージ一覧時のサムネイルに使われる画像、トップページに表示の背景に使われる画像を一括で設定します。
ページのレイアウト
- 個別ページ（デフォルト）… 通常の単体のページのレイアウトです。
- ページ一覧 … このページをトップとして、同じフォルダ内のページを一覧で表示するレイアウトです。同じフォルダの中でも、グローバルナビゲーションから優先的にリンクされるページになります。
グローバルナビへの表示と並び順
グローバルナビに、このページへのリンクを表示する際の並び順を指定します。表示しない場合は「表示しない」を選択します。
フォルダのトップに設定しているウェブページで設定した場合は、フォルダ名が表示されます。
メインページへの表示と並び順
メインページ中段に、このページへのリンクを表示する際の順番を指定します。表示しない場合は「表示しない」を選択します。
表示する場合、概要フィールドに入力した文言を５００文字まで表示できます。重要なお知らせや、キャンペーン告知など、ページを目立たせたい場合に有効です。
背景画像はページ内イメージのフィールドで設定し、ない場合はデフォルトの背景色が表示されます。
テーマ標準の画像等を変更する
[設定] - [全般]
をクリックし「全般設定」ページの以下項目で画像をアップロードすることで差し替えます。
- ロゴ画像
ヘッダーに表示されるタイトルロゴの画像をアップロードします。 - メインビジュアルロゴ画像
メインビジュアルに乗せるタイトルロゴの画像をアップロードします - メインイメージ
ページのメインイメージをアップロードします。
ウェブページ編集画面のカスタムフィールドページ内イメージで設定されている場合は、そちらが優先されます。
設定されているカスタムフィールド
このテーマにあらかじめ設定されているカスタムフィールドは以下のとおりです。
ブログ
- ヘッダーロゴ画像（識別子：logo_images）
- メインイメージ（識別子：main_images）
- フッターロゴ画像（識別子：footerlogo_images）
ウェブページ
- メインページへの表示と並び順（識別子：page_priority）
- ページ内イメージ（識別子：main_image_page）
- ページのレイアウト（識別子：pagetype）
- グローバルナビへの表示と並び順（識別子：navi_priority）
メインカラーを変更する
デザイン＞テンプレート＞テンプレート・モジュール
のconfigモジュールから、以下の色変更が可能です。
- メインテキストカラー…文字色
- 抜きテキストカラー…背景に画像や背景色がある場合の文字色。デフォルトは白。
- メインカラー…デフォルトで赤い部分
- サブカラー…デフォルトで青い部分
- ポイントカラー…電話番号などデフォルトで黄色い部分
- 中間カラー…デフォルトでグレーの部分。文字色と背景色の中間ほどがオススメです。
SNS・そのほか設定
ソーシャルボタンの設置
デザイン＞テンプレート＞テンプレート・モジュール
のconfigモジュールから、SNSの設定が可能です。
- SNSシェアボタンの設置…「ソーシャルボタン」の行から該当のソーシャルボタンを表示する場合は 1 を、表示しない場合は 0 を指定します。
- SNSのURL…Facebook、Twitterのページがあればアドレスを入力します。無い場合はボタンが非表示になります。
ogp画像の設置
デザイン＞ファイルマネージャ＞images
に入っている「ogimage.jpg」を必要に応じて差し替えてください。
同じ名前で画像をアップロードすると上書きされるため、テンプレートをさわらずに画像を差し替えることができます。
- ogimage.jpg…サイズは1200px630px以上を推奨です。
電話番号の設定
デザイン＞テンプレート＞テンプレート・モジュール
のconfigモジュールの電話番号の箇所から設定可能です。スマートフォンから閲覧する場合、自動で電話番号にリンクがはられます。