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

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

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

基本設定

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

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

背景色/画像の背景

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

iphone用ホームアイコン

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

favicon(ファビコン)

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

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

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

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

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

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

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

固定ページで、タイトルの先頭にアイキャッチ画像を表示

アイキャッチ画像が指定されている場合、固定ページでもタイトルの先頭にアイキャッチ画像を表示する場合は、ONに設定します。(初期設定:OFF)

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

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

投稿者名を表示

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

パンくずリストを表示

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

閲覧数を表示

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

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

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

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

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

カテゴリー名を表示

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

タグを表示

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

タイポグラフィー

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

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

Google Noto Sans 日本語フォント

記事タイトルのフォントについて、Googleの日本語Webフォントを指定するかどうかと、そのフォントの太さを7 種類から指定できます。

欧文フォント

ウィジェットの見出し部分の欧文フォントを、13種類のGoogle Webフォントと、2種類のシステムフォントから指定できます。

地図設定

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にしてください。

 

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

地図のメインカラー

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

彩度

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

明るさ

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

ガンマ値

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

明度を反転

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

地図の高さ

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

 

ヘッダー

カスタムロゴ

ロゴ画像をアップロードします。
アップロードしたロゴ画像は、「ヘッダーロゴ画像の最大高さ」で指定した高さにリサイズされ、ヘッダー背景中央と、ヘッダー左上部に表示されます。

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

ロゴ画像の表示上の高さを指定します。

ヘッダーの背景画像

ヘッダーの背景に指定する画像をアップロードします。( 必須)
推奨サイズ:横1500px以上

ヘッダー画像の最低の高さ

ヘッダー 背景の最大高さを設定します。(初期値:550px)

ヘッダーのオーバーレイヤー 色

ヘッダー画像の上に被さる、オーバーレイヤーの色を指定します。

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

ヘッダー画像の上に被さる、オーバーレイヤーの透明度を指定します。

ヘッダー画像内タイトル

タイトルのテキストを入力します。

ヘッダー画像内タイトルのフォントサイズ

タイトルのフォントサイズを指定します。

ヘッダー画像内タイトル下の説明テキスト

タイトル下に表示されるテキストを入力します。

ヘッダー内説明テキストのフォントサイズ

タイトル下に表示されるテキストのフォントサイズを指定します。

ページ内ヘッダー画像

下層ページでの、ヘッダーに表示されるヘッダー画像をアップロードできます。
登録しなくても可。
(推奨サイズ: 横1500px以上)

 

フッター

フッターの背景色

フッターの背景色を設定します。

分割ウィジェット

0～3個の分割ウィジェットを設定できます。

フッターロゴ

フッターにロゴ画像をアップロードできます。
アップロードしたロゴ画像は、「フッターロゴ画像の最大高さ」で指定した高さにリサイズされます。

フッターのフリーテキスト

ビジュアルエディタで、フリーテキストを入力できます。
例えば、ショップ情報や、自由な内容をCOPYRIGHT表記の直前に表示できます。

スタイル

サイトの最大幅

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

メインカラー/フォント色/リンク色

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

記事

記事の文字抜粋数

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

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

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

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

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

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

投稿者の情報を表示

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

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

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

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

前後の記事へのリンク

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

レイアウト

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

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

詳細設定

カスタムCSS

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

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

SNS共有設定

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

SNSシェアボタンのデザインを2種類から選択できます。

オリジナルのSNSボタンのコード

SNSシェアボタンに、上記以外のSNSアイコンを追加したい場合に、その埋め込みソースコードを記述するこどできます。
SNSシェアボタンを、すべて独自のソースコードで表示したい場合は、「SNSシェアボタン表示」を非表示に設定して、ここにソースコードを入力するというような使い方も可能です。

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

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

Twitterユーザー名

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

Facebook OGP画像

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

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

SNSボタン設定

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

ウィジェット設定

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

固定ページ対応カルーセルスライダーウィジェット

固定ページへのリンクをスライド表示します。(固定ページで、アイキャッチ画像を指定しておく必要があります。)
アイキャッチ画像を画面内に3枚表示します。「表示件数」を3以上に設定した場合は、自動で3枚づつスライド表示します。(モバイルデバイスでは2枚表示)

「表示する親ページのID」を指定すると、特定のページIDの子ページに属するページだけを表示対象にできます。

例)
■親ページ　ページID : 3389  (表示されません)
■子ページ1　　　　　　　　　　　(表示対象)
■子ページ2　　　　　　　　　　　(表示対象)
■子ページ3　　　　　　　　　　　(表示対象)

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

指定したカテゴリーの記事等を、スライド表示します。
デスクトップでは3枚表示。モバイルデバイスでは2枚表示となります。
複数設置できます。

タブウィジェット

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

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

指定した固定ページの内容を、ウィジェット内に表示できます。
背景色、テキスト色も指定できます。

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

パララックス( 視差効果)を設定できます。
背景画像のアップロード、オーバーレイヤー色、テキスト色、アニメーションスタイル、パララックス効果の移動距離等を設定できます。

「パララックス効果の移動距離」を0に設定すると、背景画像が固定になります。

動画ウィジェット

YouTube動画等を、URLか、ソースコードを貼り付けるだけで表示します。(レスポンシブ対応)

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

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

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

指定したカテゴリーの記事等を、1カラムで表示します。

contact infoウィジェット

住所、電話番号、メールアドレス、サイトURL等の企業情報を表示できます。


 

 

フロントページ設定

TOPページに表示するコンテンツは、「フロントページ」ウィジェットエリアで指定します。


 

デモサイト(http://demo-isotype.blue/monomania/)を例に、「パララックスウィジェット」、「フリーエリアウィジェット」の設定方法を説明します。

「フロントページ」ウィジェットエリアは、ブラウザの横幅いっぱいに表示されます。

 

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

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

 

アニメーションの設定

「フリーエリアウィジェット」では、特定の固定ページの内容を表示できますが、固定ページを編集する際の記事のマークアップ時に、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]