モジュールの外観のカスタマイズ

このテーマは、各モジュール(他のCMSで『ウィジェット』などと呼ばれるもの)の見出し・リンクボタンなどの外観を管理画面から変更することができます。シンプルなサイトの制作や、本格的な制作前のプロトタイプ作りに役立つ機能です。

この機能が必要なく、無効化したい場合は、下記を参照ください。
モジュールオプションを無効化する

外観を編集できるモジュール


本文モジュール(Body)・ナビゲーションモジュール(Navigation)・バナーモジュール(Banner)以外の、テーマ内で使用されているすべてのモジュールがこの機能に対応しています。

カテゴリーリストなど、サイドメニューに表示されているモジュールでも使用できます。


モジュールオプションを表示する



ログイン中の状態で、テーマ内のモジュールが組み込まれている箇所にカーソルを置くと、黒い枠が表示されます。
右上に表示される「モジュール」をクリックしてください。


モジュールの設定画面が表示されるので、左上のタブ「カスタム情報」を選択してください。このテーマ独自の、モジュールオプション画面となります。


モジュールオプションを変更する



見出しの自動表示見出しのテキストの表示状態を変更します。通常は「使用しない(テキスト優先)」を選択してください。
見出しのテキスト見出しとして表示する文字列を入力します。ここではHTMLタグも書くことができます。未入力の場合はヘッダ自体が表示されなくなります。
サブ見出しサブ見出しとして表示する文字列を入力します。
キャプション見出しの下の概要分として表示する文字列を入力します。
一覧ページのリンクフッタのリンクボタンの文字列とURLを入力します。URLが未入力の場合はフッタ自体が表示されなくなります。
見出しのタグ見出し要素が初期の「h2」要素ではマークアップ上不都合な場合に、他の要素に変更できます。
追加属性モジュール全体を囲むdiv要素に属性を追加できます。


右上の青い「保存」ボタンをクリックすると、内容が変更されます。実際の表示を確認してください。

見出しの自動表示の使い方



「使用しない(テキスト優先)」以外を選択すると、ブログ・カテゴリーなど、ページ情報を持っているコンテンツに表示するときに、適切な内容の見出しを自動表示させることができます。
例えば、ローカルナビゲーションの見出しを常に「現在表示しているカテゴリー名」としたいときに使用します。

「コード」を選択すると、英語フォントに変更されます(英語フォント用のクラスが見出し要素に付与されます)。

追加属性の使い方



各モジュールは「.section」クラスが付与されたdiv要素で包括されています。このdiv要素に任意の属性を追加することで、以下のようなカスタマイズが可能です。

  • ページ内リンクを有効にする
  • トップページの背景色や体裁を、CSSを追加してセクションごとに変更する
  • パララックス効果などのJavaScript用のクラスを付与する