MARBLEテーマを設定するには、以下の設定を行います。
基本設定
メニューの設定
スライダー設定
アイキャッチ設定
ヘッダー設定
コンテンツブロックウィジェット設定

テーマオプション設定
基本設定
タイポグラフィー
地図設定
フッター
スタイル
記事
レイアウト
カスタムCSS
SNSシェアボタン設定

各種設定方法
ウィジェット設定
アニメーション設定

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


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

メニューの設定

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

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

スライダー設定

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

スライダーを表示

スライダーを表示するかどうかを指定できます。

スライダー画像

スライダー用の画像をアップロードするには、「追加」ボタンをクリックします。

スライダーの設定画面が開きますので、ここで画像をアップロードします。(推奨サイズ : 横1500px以上)
必要に応じて、「タイトル」、「説明」、「リンク」を入力します。
「追加」ボタンをクリックすると、複数のスライダー画像をアップロードできます。

フル幅で表示

初期設定では、スライダーは、横幅フルで表示されますが、この設定をOFFにすると、[テーマオプション]-[スタイル] > [サイトの最大幅]で指定した幅で、スライダーが表示されます。

スライドの方式

スライダーの切り替わり方法について、フェードかスライドを選択します。

アニメーションの種類

スライドアニメーションの種類を、6種類のスタイルから選択できます。

スライドする間隔

スライドとスライドが移動する間隔の時間を設定します。
初期設定は7000ミリ秒=7秒で、値が低いほど早く、高いほど遅くなります。

アニメーションのスピード

スライドの切り替わり時のアニメーション効果にかかるスピードを設定します。
数値が低いほど早く、高いほど遅くなります。

スワイプ動作

指でタッチ操作するのを許可するかどうかを設定します。

スライダーのナビゲーションを表示

スライドのページ送りについて、表示/非表示を設定できます。

両サイドにあるprevとnextのコントロールボタンを表示

スライドの左右のナビゲーションついて、表示/非表示を設定できます。

オーバーレイヤー色

スライダー画像の上に、オーバーレイヤーを敷くことができます。
カラーピッカーで、オーバーレイヤー色を設定します。

オーバーレイヤーの透明度

スライダーにかぶせるオーバーレイヤーの透明度を指定します。

スライダーの高さ(デスクトップ[1025px]以上)

スライダーの表示高さを設定します。(初期設定は500px)

スライダーの高さ(タブレット)

ブラウザ幅1024px以下のデバイスでの、スライダーの表示高さを設定します。(初期設定は400px)

スライダーの高さ(スマートフォン)

ブラウザ幅480px以下のデバイスでの、スライダーの表示高さを設定します。(初期設定は250px)

アイキャッチ設定

アイキャッチブロックを表示

アイキャッチブロックの表示/非表示を設定します。

見出し

見出し用のテキストを入力します。

表示ページ

アイキャッチブロックに表示したい固定ページを選択します。
チェックボックスで複数選択できます。

カラム(列)数

表示列を、3カラムと4カラムから選択できます。
例えば、3カラムで表示ページを6つ選択した場合は、3列2段で表示されます。

並び順に使用するパラメーター

表示させる固定ページの並び順を、以下から選択できます。

・ID
・タイトルのスラッグ名
・日付
・親ページのID
・ランダム
・ページの表示順

並び順

並び順の、昇順・降順を設定できます。

画像の角丸設定

アイキャッチブロックに表示される画像に角丸を設定することができます。
数値が大きいほど、角丸の設定が大きくなります。

ヘッダー設定

ヘッダーの表示スタイルを、2つのスタイルから選択できます。

ヘッダーを固定

ヘッダーの表示スタイルで、スタイル2を選択した場合に、この設定をONにすると、サイトのスクロール時に、サイト上部にヘッダーを固定表示します。

カスタムロゴ

ロゴ画像をアップロードします（自動で最大高さ50pxにリサイズされます）。
画像がアップロードされていない場合は、テキストでサイトタイトルを表示します。

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

アップロードしたロゴ画像の表示高さを設定します。
ここで設定したサイズの2倍の解像度のサイズの画像をアップロードすることで、Retinaディスプレイ対応のディスプレイやスマートフォンで、ロゴ画像を綺麗に表示することができます。

ロゴの上下余白

ロゴの上下余白と、ロゴの高さを含めた高さを設定できます。
この数値が大きいほど、ロゴの上下に余白がつきます。
フォントサイズ

メニューのフォンサイズを設定します。

メニューのテキスト色

メニューのテキスト色を設定します。

メニューを太文字にする

ONにすると、メニューのテキストを太文字にできます。

コンテンツブロックウィジェット設定

TOPページに表示するコンテンツのブロックを、複数、自由に配置できるのが、「コンテンツブロックウィジェット」です。
「コンテンツブロック」とは、固定ページをTOPページに表示するためのウィジェットで、フロントページウィジェットエリアに配置します。

このブロックを複数設置することで、固定ページの内容を、TOPページに表示することができます。

ウィジェットの設定は、[外観]-[ウィジェット]か、[外観]-[カスタマイザー] >[ウィジェット]から行います。

以下は、カスタマイザーからの設定例です。





ウィジェットの設定オプションで、表示する固定ページの選択や、背景画像のアップロードや、見出しテキスト、背景色、オーバーレイヤー等を行います。


このウィジェットは、複数配置できます。
並び順も、ドラッグで自由に並び替えることができます。

テーマオプション設定

その他、サイトの基本設定は、「外観 > テーマオプション」から行います。

基本設定

iphone用ホームアイコン

iPhoneの「ホーム画面のに入れる」から、追加されるアイコン画像を指定します。
152px x 152px. (推奨 : 24bit PNG)

favicon(ファビコン

ブラウザのブックマークや、タブに表示されるアイコン画像を設定します。
16x16px PNG / Gif 推奨

タイポグラフィー

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

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

フォント

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

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

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

地図設定

2016/6/22以降、Google Maps の仕様変更により、APIキーの取得、設定が必要になりました。
詳しくは、下記ページをご覧ください。

Google Maps APIの仕様変更による、テーマ差分ファイルについて...

Google Mapsを表示

ONにすると、Google MapsをTOPページ下部に表示します。

Google Maps設定

おおよその住所を入力後、「住所から検索」ボタンをクリックすると、その位置のGoogleMaps座標を表示します。
ピンをドラッグして細かい位置や倍率を調整できます。


また、「googlemap設置用ショートコード」をコピーして、テキストウイジェットで任意のウィジェットエリアにGoogleMapsを表示させることも可能です。
(※1ページに複数のGoogle Mapsは表示できませんので、その場合は、「Google Mapsを表示」をOFFにしてください。)

ショートコードの記入例)

マーカーアイコン

オリジナルのマーカー画像をアップロードできます。(ショートコードで地図を表示させる場合には反映されません。)
アップロードしない場合は、標準のマーカーで表示されます。

吹き出し

下記で入力した内容が、マーカー上に吹き出しで表示されます.(HTMLタグ使用可)

地図のメインカラー

地図の色味を設定します。(初期値:白)

彩度

地図の再度を設定します。

明るさ

地図の明るさを設定します

ガンマ値

地図のガンマ値を設定します

明度を反転

明度を反転すると、黒ベースのデザインになります。

地図の高さ

表示する高さを指定します。(初期値:400px)


下記のサイトで、スタイルをプレビューすることができます。

日本語版 Google Maps API Styled Map Wizard

フッター

フッターの背景色

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

フッターのテキスト色

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

分割ウィジェット

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

フッターロゴ

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

アップロードした画像は、最大高さ25pxにリサイズされて表示されます。

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

こちらの「購入・支払い方法編」をご確認ください。

スタイル

サイトの最大幅

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

 カラー設定

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

記事

記事の文字抜粋数

TOPページ、アーカイヴページの記事一覧で、本文テキストを抜粋表示する場合の文字数を指定できます。

 アイキャッチ画像に、キャプションを表示

投稿時に設定したアイキャッチ画像とキャプションテキストを、ページのヘッダーにフル幅で表示することができます。
キャプションテキストを表示するには、投稿画面で、アイキャッチ画像をクリックし、「添付ファイルの詳細」画面で設定します。

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

ONにすると、日付表示を「○日前の投稿」というような、相対的日付を表示することができます。
初期設定は、「設定　> 一般」　> 「日付のフォーマット」で指定した日付フォーマットで表示されます。

投稿者の情報を表示

投稿記事の下部に、投稿者の情報を表示します。
情報は、「ユーザー　> プロフィール情報」に入力されている場合のみ表示されます。

関連記事表示設定/関連記事の表示タイトル

関連記事の表示に関する設定を行います。
「カテゴリー」を選択すると、同一カテゴリーの記事からランダムで関連記事を出力します。
「タグ」を選択すると、同一タグの記事からランダムで関連記事を出力します。

「関連記事の表示タイトル」の表記も、ここから編集できます。

前後の記事へのリンク

前後の記事へのリンクの表示設定を行います。

レイアウト

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

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

カスタム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]