テーマオプション設定 [MONOpolyテーマ]

クイックスタート

MONOpolyテーマは、インストールした初期の状態では、ほぼ真っさらの状態です。
まずは、メニューの設定ウィジェット設定を行い、サイトに表示するコンテンツを設定してください。

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

テーマオプション
基本設定
タイポグラフィー
ヘッダー
フッター
スライダー
スマートフォン
スタイル
記事
レイアウト
カスタムCSS
SNS共有設定

各種設定方法
ウィジェット設定
フロントページ設定
メガメニュー設定
アニメーション設定
ショートコード によるカラム設定


基本設定

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

モバイルデバイス(スマートフォン,タブレット)での、サイドバーの表示設定を行います。
isotypeテーマでは、iPhone6 Plusの横向きのピクセルサイズである738pxまでを、モバイル表示用として最適化しています。
iPhone 5  320 x 568(デバイスピクセル比2.0)
iPhone 6  375 x 667(デバイスピクセル比2.0)
iPhone 6Plus 414 x 738(デバイスピクセル比3.0)

モバイルデバイスで、ページTOPウィジェットを表示

モバイルデバイスでの閲覧時に、ページTOPウィジェットを表示するかどうかの設定を行います。002

背景色/画像の背景

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

0051

iphone用ホームアイコン

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

02

favicon(ファビコン)

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

03

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

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

02

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

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

03

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

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

単一記事(シングル)ページで、タイトルの先頭にアイキャッチ画像を表示

ONに設定すると、アイキャッチ画像が指定されている場合、単一記事(シングル)ページで、タイトルの先頭にアイキャッチ画像を表示します。(初期設定:ON)

投稿者名を表示

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

パンくずリストを表示

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

閲覧数を表示

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

ローディングアニメーションを表示

ページ読み込み時に、ローディングのアニメーションを表示します。(初期設定:ON)

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

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

カテゴリー名を表示

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

タグを表示

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


タイポグラフィー

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

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

フォント

日本語フォントを、

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

から選択できます。
フォントの太さは、[記事フォントスタイル]-[フォントの太さ]で指定できます。
※Google NotoSansについては、記事タイトル等ににのみ適用されます。
manual01

ヘッダー

ヘッダースタイル

ヘッダーの基本スタイルを、3つのスタイルから選択できます。

manual02
■ヘッダースタイル1
ロゴが左寄せ、メニューが右寄せ

■ヘッダースタイル2
ロゴが中央寄せ、メニューがロゴの下に配置

■ヘッダースタイル3
ロゴが左寄せ、メニューはその下段に配置

カスタムロゴ

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

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

manual02 ロゴ画像の表示上の高さを指定します。
(ヘッダースタイル2,ヘッダースタイル3を選択した場合のみ適用されます。)

ロゴの上下余白

manual01 (ヘッダースタイル2を選択した場合のみ適用されます。)

ヘッダーの背景色

ヘッダーの背景色を、カラーピッカーで指定できます。

ヘッダーのメニュー色

ヘッダーのメニューのテキスト色を、カラーピッカーで指定できます。

ヘッダーの透明度

ヘッダーの透明度を指定できます。
(下層ページでは、透明度は無視されます。[透明度100%])

manual03

ヘッダーを固定

ページがスクロールしても、サイト上部にヘッダーを固定します。
(ヘッダースタイル1を選択した場合のみ適用されます。)

ヘッダー固定時に、コンテンツをレイヤー配置

「ヘッダーを固定」をONにした場合に、ヘッダーは、コンテンツの上に重ねて表示されます。
(ヘッダースタイル1を選択した場合のみ適用されます。)


manual04

ヘッダーウイジェット

ヘッダー右上に、住所や電話番号などを、ビジュアルエディタで入力した内容を自由に表示することができます。
(ヘッダースタイル3を選択した場合のみ適用されます。)



フッター

フッターの背景色

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

フッターのテキスト色

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

manual06

分割ウィジェット

フッターに、0~3個のウィジェットエリアを設定できます。

manual08

フッターロゴ

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

manual07

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

powered by isotype の表記のON/OFFを指定できます。


スライダー

スライダー画像

スライダーの画像をアップロードします。
画像の上に表示するタイトルテキストと、リンク先URL、タイトル下のサブテキストを指定することもできます。
スライダー画像は、「追加」ボタンをクリックして、複数登録することができます。
登録した画像の並び順は、ドラッグで移動して変更することができます。
003

スライダー設定

・スライダーを表示
・タイトルのフォントサイズ
・タイトル色
・タイトルのアニメーションスタイル
・スライドの方式
・アニメーションの種類
・アニメーションのスピード
・スワイプ動作
・スライダーのナビゲーションを表示
・両サイドにあるprevとnextのコントロールボタンを表示
・オーバーレイヤー色
・オーバーレイヤーの透明度
・スライダーの最大高さ

ゴーストボタン
・ボタンタイトル
・リンク先URL
・リンクターゲット
・同一タブ別タブ
・ホバー時のアニメーションスタイル

について設定することができます。
※ゴーストボタンは、スライダー上にボタンを表示するものですが、「ボタンタイトル」を表示した場合のみ表示されます。
※タイトルのアニメーションスタイルについて、アニメーションの動きを、https://daneden.github.io/animate.css/から確認できます。


スマートフォン

・子メニューの表示スタイル

下層(子)メニューの表示方法を、「スライド/アコーディオン」の2種類から選択できます。

子メニューのページ数を表示

下層(子)メニューのページ数を表示するかどうかを指定できます。

枠線のスタイル

ドロワーメニューの枠線のスタイルを指定できます。

背景のテーマ色

ドロワーメニューの背景スタイルを、「白/黒/グレー」の3種類から指定できます。

背景色

背景のテーマ色ではなく、オリジナルの背景色を指定したい場合に、カラーピッカーで指定できます。

テキスト色

ドロワーメニュー内のメニューのテキスト色を、カラーピッカーで指定できます。

 

配置

ドロワーアイコン(スマートフォンメニューを開く、アイコンのことです。)をクリックした際に、ドロワーメニューのスライド方向を、「左/右」から指定できます。

電話アイコンを表示

電話番号を入力すると、上部に、電話アイコンを表示できます。

メールアイコンを表示

メールアドレスを入力すると、上部に、メールアイコンを表示できます。

アイコン色

ドロワーアイコン(スマートフォンメニューを開く、アイコンのことです。)の色を指定できます。

ドロワーボタンのアニメーションスタイル

ドロワーアイコンをクリックした際の、から、に変化するアニメーションの種類を指定できます。

※アニメーションスタイルは、https://jonsuh.com/hamburgers/から確認できます。

manual09

スタイル

サイトの最大幅

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

ボックスレイアウト

ONにすると、 サイトをボックスレイアウトにすることができます。(初期設定 : OFF)

manual10

ボックスシャドゥ

コンテンツのブロックに、影をつけることができます。manual11

カラー設定

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



記事

記事の文字抜粋数

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

TOPページの記事スタイル/アーカイブページの記事スタイル

記事一覧の表示スタイルを、2カラム、3カラムの2つのスタイルから選択できます。
TOPページと、アーカイブページで、表示形式を個別に設定することができます。
初期設定では、TOPページには記事一覧は非表示となっています。

スマートフォンでのアクセス時は、自動で1カラム表示なります。

固定ページで、ヘッダーにアイキャッチ画像を表示

シングルページで、ヘッダーにアイキャッチ画像を表示

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

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

固定ページ・シングルページで、ヘッダーに、アイキャッチ画像を自動表示

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

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

投稿者の情報を表示

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

17

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

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

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

前後の記事へのリンク

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

19

レイアウト

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

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



カスタムCSS

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

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


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

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

manual03
manual04

SNS共有設定

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

SNSシェアボタンの表示を指定します。
009

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

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

21

Twitterユーザー名

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

Facebook OGP画像

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

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

SNSボタン設定

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



ウィジェット設定

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

 

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

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

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

タブウィジェット

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

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

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

パララックスウィジェット

背景に画像や動画をアップロードした、コンテンツのブロックを作成するウィジェットです。
動画、画像のアップロード、オーバーレイヤー色、テキスト色、アニメーションスタイル、パララックス効果の移動距離等を設定できます。

「パララックス効果の移動距離」を0に設定すると、背景画像が固定になります。
パララックスウィジェットは、複数接することができます。

※動画をアップロードした場合は、高さ、パララックス効果は適用されません。
※モバイルデバイス(タブレット、スマートフォン)では、動画の代わりに、画像アップローダーで登録したて画像が表示されます。


【設定可能オプション】
・画像アップローダー
・動画アップローダー
・タイトル
・タイトルのフォントサイズ
・タイトルのアニメーションスタイル(11アニメーションスタイル)
・サブタイトル
・サブタイトルの背景色
・サブタイトルのアニメーションスタイル(11アニメーションスタイル)
・配置(左/中央/右)
・フリーエリア(ビジュアルエディタ)
・動画にドットレイヤーを敷く
・ボックスの高さ
・オーバーレイヤー色
・テキスト色
・パララックス(視差)効果の値
ゴーストボタン・ボタンタイトル
・リンク先URL
・アニメーションスタイル(11アニメーションスタイル)
・ホバー時のアニメーションスタイル(8アニメーションスタイル)
・リンクターゲット

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

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

contact infoウィジェット

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


フロントページ設定

TOPページに表示するコンテンツは、「ページTOP」か、「フロントページ」ウィジェットエリアで、表示したいウィジェットをドラッグして設定してください。
※基本的に、[設定]-[表示設定] > [フロントページの表示]は、初期設定のままにしてください。


メガメニューの設定

[外観]-[メニュー]で、[Megamenu]から、表示したいカテゴリーを指定すると、マウスオーバーで、そのカテゴリーの最新記事5件が表示される、メガメニューを表示することができます。

megamenu
 

カテゴリーの新着記事一覧を、ドロップダウンで一覧表示する メガメニュー

アニメーションの設定

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

例) 要素をフェードインで表示
<div class="wow fadeIn">ここに要素の内容</div>
上記の赤字の部分を、下記に変更することで、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を選択します。
m12
記述例) 2 カラム
[2column]ここに内容[/2column]
[2column]ここに内容[/2column]
記述例) 3 カラム
[3column]ここに内容[/3column]
[3column]ここに内容[/3column]
[3column]ここに内容[/3column]

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

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