MODEテーマを設定するには、以下の設定を行います。

 

基本設定
メニューの設定
スライダー設定
記事設定

テーマオプション設定
ヘッダー
フッター
スタイル
レイアウト
カスタムCSS
SNSシェアボタン設定

各種設定方法
ウィジェット設定
アニメーション設定
ショートコード によるカラム設定
メニューのタイトル下にサブタイトルを表示するには

MODEテーマのTOPページは、以下のような構成となっています。


ウィジェット設定を行うには、「外観 > ウィジェット」をクリックします。
MODEテーマでは、最大9箇所のウィジェットエリアに、7つのカスタムウィジェットを設定できます。

下記ページから、デモサイトで設定しているウィジェットの設定画面のキャプチャ画像をダウンロードできます。
https://isotype.blue/download/

ショートコードの使用方法については、下記ページで説明しています。
https://isotype.blue/shortcode/

メニューの設定

まずは、[外観]-[メニュー]から、メニューの設定を行います。
まだメニューを作成していない場合は、新規メニューの作成から、メニューを設定してください。


 

次に、「位置の管理」タブをクリックして、「ヘッダー」と「フッター」に表示するメニューを選択します。

スライダー設定

[外観]-[テーマオプション]から、 [スライダー]タブを選択します。

スライダー用のメディア(画像、動画ファイル)をアップロードするには、「追加」ボタンをクリックします。
設定画面が開きますので、ここでメディアファイルを設定します。

設定できるメディアは、

・画像
・動画(mp4形式)
・YouTube

です。

画像のアップロード

「画像」の横にある＋ボタンをクリックして、画像をアップロードします。

動画のアップロード

「動画」の横にある＋ボタンをクリックして、動画ファイルをアップロードします。
再生可能な動画形式はmp4(H264-MPEG)形式のみです。
mp4動画をアップロードする場合は、必ず画像もアップロードしてください。(スマートフォン時に動画の代替画像として表示されます。)

YouTube動画

「YouTubeの動画ID」に、YouTubeの動画IDを入力します。


必要に応じて、「タイトル」、「説明」を入力します。
入力した「タイトル」、「説明」は、スライダー上に表示されます。
「追加」ボタンをクリックすると、複数のメディアを無制限に設定することができます。

ボックスレイアウト

ボックスレイアウトをONに設定すると、[スタイル]-[サイトの最大幅]で指定した横幅で表示されます。
OFFにすると、ブラウザ全幅で表示されます。

一度に表示する枚数

スライダーに1度に表示する枚数を指定します。(初期値 : 1)

要素を中央寄せ

ONに設定すると、左右に、前後のスライドを少しだけ表示させることができます。

中央寄せをONにした場合の、両サイドの表示領域のサイズ

「要素を中央寄せ」をONに設定した際の、左右に表示するスライドの表示指示を指定します。

 

記事

投稿一覧の見出しタイトル

見出しタイトルを設定できます。

メニューの並び順の要素

カテゴリーメニューの並び順に使用する要素を指定します。

投稿のないカテゴリーを出力するかどうか

ONにすると、投稿の無いカテゴリーメニューも表示されます。

除外するカテゴリーのID

カテゴリーメニューから除外したいカテゴリーのIDを、カンマ(,)区切りで複数指定できます。

指定したカテゴリーIDの子孫カテゴリーをすべて表示

ONにすると、任意のカテゴリーに属する子カテゴリーのみを表示対象にします。

無限スクロールを有効

ONにすると、スクロールするごとに記事一覧を動的に読み込み、表示します。記事の読み込みを終えるまでスクロールが可能です。
OFFにすると、[設定]-[表示設定]  > [1ページに表示する最大投稿数]で設定している件数の記事のみが表示されます。(初期値 : 10件)

角丸設定

ONにすると、絞込ボタンと記事のアイキャッチ画像に角丸が設定されます。

アイキャッチ画像のサイズを2倍にするには

投稿時に、「アイキャッチ画像のサイズ」で、2倍表示を有効にすると、記事のアイキャッチ画像のサイズを2倍で表示することができます。
※記事の、一番先頭の記事だけは、この2倍表示が効きませんので、必ず、2件目以降の記事に対してこの機能を使用してください。


 

記事の文字抜粋数

TOP、アーカイブページで、記事本文のテキスト文字数を指定することができます。 （0で非表示）

単一記事(シングル)ページの日付表示を、相対的な日付で表示

OFF時には、「設定 > 一般 > 日付形式」で選択した日付形式となります.

タイポグラフィー

・記事h1タイトルのフォントスタイル
・記事内のh1フォントスタイル
・h2フォントスタイル
・h3フォントスタイル
・フロントページの見出しフォントスタイル
・記事本文のフォントスタイル

について、テキスト色、フォントサイズ、フォントの太さ、文字間、行間隔、余白を設定できます。

フォント

日本語フォントを、タイトルと本文それぞれについて、

・游明朝
・游ゴシック
・Google NotoSans

の3フォントから選択できます。
フォントの太さや文字間、行間隔等は、[記事フォントスタイル]-[フォントの太さ]で指定できます。

ヘッダー

カスタムロゴ

ロゴ画像をアップロードします。
※SVG形式の画像のアップロードに対応しました。

ヘッダーロゴ画像の最大高さ

アップロードした画像を表示する高さを指定します。

 

フッター

フッターの背景色

フッターの背景色を、カラーピッカーで指定します。

フッターのテキスト色

フッターのテキスト色を、カラーピッカーで指定します。

分割ウィジェット

フッターに、最大3列のウィジェットエリアを設定できます。
左右にウイジェットを配置したり、3カラムでウイジェットを設置したい場合などに便利です。

フッターのテキスト

フッターに、フリーテキストを入力できます。
入力したテキストは、フッターのロゴ下部に表示されます。

フッターロゴ

フッターにロゴ画像をアップロードできます。

フッタークレジットを表示

フッターの、「powered by isotype」の表記の表示/非表示を設定できます。

スタイル

h1タイトルフォントサイズ

投稿ページでの、タイトルのフォントサイズを指定します。

サイトの最大幅

サイト全体のコンテンツ幅を、960px～1400pxの間で指定できます。
(初期値:1020px)

 カラー設定

サイトのキーカラー、リンク色等のカラー設定を行います。

レイアウト

各ページの初期レイアウトを、個別に設定したい場合に設定します。
初期設定では、「基本レイアウト」で設定したレイアウトが、全ページに適用されます。

また、レイアウトは、投稿、固定ページの新規投稿時にも、「投稿オプション」「ページオプション」から個別に設定することができます。

カスタムCSS

カスタムCSS機能を利用することにより、テーマのstyle.cssを書き換えることなく、独自にCSSを追加することができます。
ここで入力したスタイルシートは、テーマのアップデート時にも上書きされることがありません。

また、テーマのstyle.cssより優先されますので、テーマやスタイルシートを直接変更することなく、安全にテーマをカスタマイズすることができます。


推奨プラグインである「SiteOrigin CSS」をインストールすることで、cssの知識が無い方でも、サイトをプレビューしながら、カスタムcssを自動で作成、保存することもできます。

1.　[外観]-[custom CSS]をクリックします。
2.　アイコンをクリックして、サイトをプレビューしながら、カスタマイズすることができます。

SNSシェアボタン設定

SNSアイコン設定

ユーザー個人のSNSアカウントをお持ち場合、自身のSNSページのURL、アイコン等を設定できます。登録したSNSアイコンは、フッターに表示されます。
アイコンを表示させるには、「追加」ボタンをクリックします。
そして、下記のように、アイコン、URL等を設定します。

 

SNSシェアボタンの表示設定

記事のシェアボタンの表示/非表示を指定します。

シェアアイコンの表示設定

Facebook,Twitter,Google+,はてなブックマークについて、それぞれの表示/非表示を設定できます。

Twitterユーザー名

Twitter cardを設定する場合に必要です。
Twitterのアカウント@から後ろを入力してください。

Facebook OGP画像

Facebookで、TOPページがシェアされたた時に表示される画像を設定できます。
シングルページがシェアされた場合には、自動でその投稿記事のアイキャッチ画像が表示されます。

推奨:600px×600pxの正方形内に、上下に余白を入れ、画像の中心に縦横比1:1.91(600×315px)の画像を配置。

ウィジェット設定を行うには、「外観 > ウィジェット」をクリックします。
MAJESTICテーマでは、10箇所のウィジェットエリアに、6つのカスタムウィジェットを設定できます。

 カルーセルスライダーウィジェット

固定ページや投稿の記事を、スライド表示します。


【設定可能オプション】
・タイトル
・アニメーションスタイル
・サブタイトル
・サブタイトルのアニメーションスタイル :
・投稿タイプ(投稿/固定ページ)
・最大表示件数
・カテゴリー:(投稿タイプで、「投稿」を選択した場合のみ適用)
・並び順 (新着順/コメント数順/ランダム/ID順/親ページのID順/タイトル順/最終更新日順)
・表示期間(過去1年間/過去1ヶ月/過去1週間/過去24時間)
・表示に含める投稿IDを指定 (,(カンマ)区切りで複数入力できます)
・表示に含めない投稿IDを指定 (,(カンマ)区切りで複数入力できます)
・デバイス別表示枚数(480px以下/1024以下/1024px以上)
・アイキャッチ画像のサイ(正方形/5:3)
・余白
・自動再生 :
・スライドのスピード(ミリ秒)
・ページネーションのスピード(ミリ秒)
・アイテムが最初に戻る時のスピード(ミリ秒)
・ナビゲーションを表示
・ページネーションを表示
・ホバーでストップ
・スライドをループ
・スワイプ動作

タブウィジェット

ランキング、新着記事一覧、タグクラウドの3種類を、タブ切り替えで表示します。
タブの表示、順序も指定できますので、「シンプルな新着記事一覧リスト」、「人気記事ランキング用ウィジェット」「タグクラウド」単体のウィジェットとしても使用できます。

Facebookページプラグインウィジェット

Facebbokのページプラグインを表示できます。

【設定可能オプション】
・タイトル
・FacebookページURL
・サイズ:幅/高さ
・いいね!をした人の顔写真を表示
・投稿を表示
・ヘッダー画像の表示

contact infoウィジェット

住所、電話番号、メールアドレスの情報を表示できます。

【設定可能オプション】
・タイトル
・住所
・電話番号
・Email

動画ウィジェット

YouTube等の動画を表示できます。

【設定可能オプション】
・タイトル
・動画のURL
・埋め込みソースコード

 

アニメーションの設定

HTMLタグに下記の記述をすることで、特定の要素にアニメーション効果をつけることができます。

例) 要素をフェードインで表示
上記の赤字の部分を、下記に変更することで、76種類のアニメーションを指定することができます。
それぞれのアニメーションの動作は、https://daneden.github.io/animate.css/から確認できます。

bounce
flash
pulse
rubberBand
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

ショートコードによるカラム設定

固定ページを編集する際の記事のマークアップ時に、ショートコードで簡単に2カラム、3 カラムのレイアウトを組むことができます。

1. エディタを「テキスト」モードにします。
2. 「ショートコードを選択」のプルダウンメニューから、2columnか、3columnを選択します。

記述例) 2 カラム
記述例) 3 カラム

2カラムレイアウトで、アニメーションを設定したサンプルコード

[2column]<span class="wow  fadeInLeft"><img src="画像のパス"></span>[/2column]
[2column]<span class="wow  fadeInUp">ここに内容</span>[/2column]