MONOSTYLEテーマの設定を行うには、まず、メニューの設定、ウィジェット設定を行い、サイトに表示するコンテンツを設定してください。

TOPページは、下記のような構成となっています。
各ウィジェットエリアには、自由にウィジェットを設定できます。


サイトのデザインにかかわる設定や、レイアウトを設定を行うには、「外観 > テーマオプション」をクリックします。

テーマオプション
基本設定
サイドバー
フッター
スタイル
記事
レイアウト
カスタムCSS
SNSシェアボタン設定

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

基本設定

モバイルデバイスのでサイドバー表示設定

モバイルデバイス(スマートフォン,タブレット)での、サイドバーの表示設定を行います。

背景色/画像の背景

背景色の指定、背景画像のアップロード、リピート指定、配置設定を行えます。

iphone用ホームアイコン

スマートフォンで、「ホーム画面に追加」を指定した時に、ホーム画面に追加される画像をアップロードできます。
(iPhone,Android対応)

favicon(ファビコン)

サイトをお気に入りに追加した際に、ブラウザのタブやブックマークに表示されるアイコン画像をアップロードできます。

メタ説明文/メタキーワード

SEO用に、メタ説明文(meta description)、メタキーワードを入力できます。
SEO系プラグインをインストールする場合は、ここでは入力する必要はありません。

Googleアナリティクス　トラッキングコード

Googleアナリティクスの（または他の）トラッキングコードを貼り付けます。入力したたソースは</body>タグの前に挿入されます。

※この設定を適用するには、ロリポップ、heteml等のサーバーでは、WAF設定をOFFにする必要があります。

固定ページでのコメント表示設定

固定ページでも、コメントフォームを表示したい場合にはONに設定します。
(初期値は、非表示)

投稿者名を表示

単一記事(シングル)ページで、投稿者名を表示します。(初期設定:OFF)

パンくずリストを表示

パンくずリストを表示します。(初期設定:ON)

閲覧数を表示

単一記事(シングル)ページで、記事の閲覧数を表示します。(初期設定:OFF)

アイキャッチ画像に、カテゴリー名を表示

アイキャッチ画像に、カテゴリー名を表示します。(初期設定:ON)

カテゴリー名を表示

カテゴリー名を表示します。(初期設定:ON)

タグを表示

タグを表示します。(初期設定:ON)

サイドバー

カスタムロゴ

ロゴ画像をアップロードします。画像がアップロードされていない場合はテキストで、サイトタイトルを表示します。

フッター

フッターのテキスト

フッターロゴの上部にフリーテキストを表示できます。(HTMLタグ使用可)

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

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

スタイル

サイト全体のメインカラー、フォントカラー、リンク色や、記事タイトルのテキスト色、サイドバー、セカンダリサイドバーの背景色、テキスト色の設定をします。

記事

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

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

投稿者の情報を表示

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

アイキャッチ画像のサイズ

記事一覧でのアイキャッチ画像のサイズを、2種類のサイズから選択します。

インフィード広告の設定

記事一覧の任意の位置に、googleインフィード広告を表示することができます。
(別途、Googleアドセンスでの設定が必要です。)

表示できるインフィード広告は、「インフィード広告」>「横の画像」です。


googleアドセンスの広告設定時に、画像サイズやフォントサイズ等を、サイトの記事と同じになるように設定してください。

「googleインフィード広告を表示する位置」で、記事一覧の何番目に広告を挿入するかどうかを指定します。
例えば、2に設定すると、記事一覧の2番目に、広告記事が挿入されます。


取得したコードを「googleインフィード広告のコード」に貼り付けてください。
また、モバイルデバイス(スマートフォン、タブレット)での閲覧時に、PCと異なる設定の別のコードを指定「googleインフィード広告のコード(スマートフォン用)」に、取得したコードを貼り付けます。

 

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

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

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

前後の記事へのリンク

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

レイアウト

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

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

カスタムCSS

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

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


 

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

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


 

SNSシェアボタン設定

SNSアイコン設定

ユーザー個人のSNSアカウントをお持ち場合、自身のSNSページのURL、アイコン等を設定できます。
登録したSNSアイコンは、フッターに表示されます。


 

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

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

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

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

Twitterユーザー名

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

Facebook OGP画像

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

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

ウィジェット設定

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

 

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

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


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

タブウィジェット

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

フリーエリアウィジェット

指定した固定ページの内容を、ウィジェット内に表示できます。
テキストのアニメーションスタイル、背景色、テキスト色も指定できます。
 

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

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

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

 

1カラム記事リストウィジェット

新着記事等を、サイドバー等に1カラムで表示できます。

【設定可能オプション】
・タイトル
・表示件数
・カテゴリー
・並び順
・表示期:
・表示設定
・カテゴリー/日付の表示

動画ウィジェット

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]