Movable Type.net

マニュアル

テーマ「Stylish Corporate」の特長と使い方

カラムにとらわれないデザインのベーステーマ「Stylish Corporate」

テーマ「Stylish Corporate」は、従来のベーステーマにはなかった、カラムにとらわれない画面全体を使ったデザインのベーステーマです。
画面を広く使う現代的なwebページを制作したい場合にオススメです。

stylish corporate

特長

  • 編集画面からウェブページ・記事を追加するだけでスマートフォンに対応したサイトが作成できます。レスポンシブ対応。
  • ページや記事が追加されると、サイトマップ、アーカイブも自動的に生成されます。
  • ウェブページをフォルダ内に作ることで、階層構造を作ることができます。
  • ページ編集画面のチェックボックスから、グローバルナビやトップページへの表示のあり/なしを選ぶことができます。たくさんあるページから、優先順位をつけたい場合におすすめです。
  • ページに画像イメージを設定することで、対応するサムネイル・ヘッダー画像が一括で変更できます。
  • IDを入力するだけでGoogleカスタム検索(サイト内検索)、SNSの設置ができます。
  • 記事にogp画像をアップできるので、SNSからのリンクされた際の対応ができます。

Stylish Corporate テーマの使い方


●記事をつくる

記事を作成すると、ニュースページにエントリーが表示されます。
投稿画面からカテゴリーを選択すると、左メニューのカテゴリーアーカイブが自動で生成されます。 投稿日に応じて年別アーカイブも自動で生成されます。
サイトのトップページにも最新の3件が表示されます。

ニュース

・カテゴリ

編集画面右のカテゴリを選択するとカテゴリアーカイブに振り分けられます。スタイルの設定で色分けをすることもできます。

★カテゴリごとの色分け(CSS編集が可能な方向け)

ページ一覧、アーカイブのページでカテゴリごとに設定した色を表示できます。

  1. 記事>カテゴリから使用するカテゴリを作成し、パスを設定します
  2. デザイン>テンプレートから、アーカイブ・テンプレートにあるstyle.cssを開きます。
  3. style.cssからカテゴリのスタイルが指定されている該当箇所を探し、先ほど作ったカテゴリのパスに置き換え保存します。
    「…genrename--(パス名)」となっています。(画像参照)
  4. 複数ある場合も同様に設定してください。

<カスタムフィールド>
・記事ogpイメージ

編集画面のカスタムフィールドから記事ogpイメージを選択することで、SNSでシェアされた際の画像を設定できます。


●ウェブページをつくる

サイトのページを作成します。
本文エリアで使えるタグにはあらかじめスタイルが設定されています。
作成したページはフォルダの構成どおりにフッターに表示されます。

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

ウェブページ

<カスタムフィールド>
・ページ内イメージ

ページヘッダーに表示させる背景画像や、ぺージ一覧時のサムネイルに使われる画像、トップページに表示の背景に使われる画像を一括で設定します。

ページ内イメージ使用箇所2 ページ内イメージ使用箇所3

・トップページに表示

トップページ中段に、このページへのリンクを表示します。その場合、概要フィールドに入力した文言を500文字まで表示できます。重要なお知らせや、キャンペーン告知など、ページを目立たせたい場合に有効です。
背景画像はページ内イメージのフィールドで設定し、ない場合はデフォルトの背景色が表示されます。
「トップページに表示」は、サイト全体で4つまで選択できます。

・フォルダのトップに設定

フォルダのトップページに設定します。フォルダのトップに設定すると、グローバルナビゲーションから優先的にリンクされるページになります。
ページのレイアウトをぺージ一覧にしていると、フォルダ内のページを一覧するトップページを作ることができます。
1つのフォルダにつき1ページのみ設定でき、設定する場合はファイル名を「index.html」にしてください。

・ページのレイアウト

  • 個別ページ(デフォルト)… 通常の単体のページのレイアウトです。
  • ページ一覧 … 同じフォルダのページを一覧で表示するレイアウトです。フォルダのトップに設定と組み合わせると、アーカイブのようなトップページが作れます。

・グローバルナビに表示

グローバルナビに、このページへのリンクを表示します。ページがフォルダに入っている場合、グローバルナビにはフォルダ名が表示されます。このため、1つのフォルダ内で1ページのみ設定することが好ましいです。
フォルダのトップに設定と組み合わせて使うと、グローバルナビからフォルダのトップページへのリンクが貼られるので、自然な構成になります。


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

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

  • index_image.jpg…インデックスページに使用されているメイン画像です。推奨サイズは1280px×475px以上です。
  • news_image.jpg…ニュースページに使用されているヘッダー画像です。推奨サイズは1280px×301px以上です。
  • pages_image.jpg…ページに使用されているヘッダー画像です。推奨サイズは1280px×301px以上です。
    ウェブページ編集画面のカスタムフィールドページ内イメージで設定されている場合は、そちらが優先されます。


●メインカラーを変更する

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

  • メインテキストカラー…文字色
  • 抜きテキストカラー…背景に画像や背景色がある場合の文字色。デフォルトは白。
  • メインカラー…デフォルトで赤い部分
  • サブカラー…デフォルトで青い部分
  • ポイントカラー…電話番号などデフォルトで黄色い部分
  • 中間カラー…デフォルトでグレーの部分。文字色と背景色の中間ほどがオススメです。
色指定場所


●SNS・そのほか設定

・ソーシャルボタンの設置

デザイン>テンプレート>テンプレート・モジュール
のconfigモジュールから、SNSの設定が可能です。

  • SNSシェアボタンの設置…「ソーシャルボタン」の行から該当のソーシャルボタンを表示する場合は 1 を、表示しない場合は 0 を指定します。
  • SNSのURL…Facebook、Twitter、Google+のページがあればアドレスを入力します。無い場合はボタンが非表示になります。

・ogp画像の設置

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

  • ogimage.jpg…サイズは1200px×630px以上を推奨です。

・電話番号の設定

デザイン>テンプレート>テンプレート・モジュール
のconfigモジュールの電話番号の箇所から設定可能です。スマートフォンから閲覧する場合、自動で電話番号にリンクがはられます。