テーマオプション設定 [mono-haテーマ]

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

基本設定
地図設定
ヘッダー
フッター
スタイル
記事
レイアウト
詳細設定
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)

モバイルデバイスでヘッダーウィジェットを表示

ヘッダーウィジェットは、「外観 > ウィジェット 」設定で、「ヘッダー下部」ウィジェットエリアに表示するように設定したウィジェットが表示されるエリアです。
モバイルデバイス(スマートフォン,タブレット)でも、ヘッダーウィジェットを表示するかどうかの設定をします。

01

背景色/画像の背景

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

0051

iphone用ホームアイコン

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

02

favicon(ファビコン)

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

03
 

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

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

02

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

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

03

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

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

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

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

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

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

投稿者名を表示

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

パンくずリストを表示

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

閲覧数を表示

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

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

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

スムーススクロール

ページを、スムースにスクロールします。(初期設定:ON)

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

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

カテゴリー名を表示

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

タグを表示

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

地図設定

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

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


Google Mapsを表示

Google Mapsを表示する場合は、ここに、表示する住所の緯度経度を、カンマ区切りで入力します。
緯度経度を入力すると、ページのフッター上部にGoogle Mapsが表示されます。

記入例) 35.6891891,139.6894594

http://www.geocoding.jp/のサイトで、住所から緯度経度を検索できます。

表示倍率

地図の倍率を設定します。(初期値:18)

地図のメインカラー

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

彩度

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

明るさ

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

ガンマ値

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

明度を反転

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

地図の高さ

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

 

Google Maps
 


ヘッダー

カスタムロゴ

ロゴ画像をアップロードします。
アップロードしたロゴ画像は、自動で高さ60pxにリサイズされ、ヘッダー背景中央と、ヘッダー左上部に表示されます。

ヘッダーの背景画像

ヘッダーに指定する画像をアップロードします。( 必須)

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

ヘッダーの最大高さを設定します。(初期値:600px)
高さ600px以上のヘッダー画像をアップロードしてください。

ヘッダー画像に敷くオーバーレイヤーの透明度

アップロードしたヘッダー画像の上に被さる、黒のオーバーレイヤーの透明度を指定します。(初期値:70%)

ヘッダーのメニューカラー

ヘッダーのカスタムメニューのリンク色を指定します。(初期値:白)

ヘッダー画像内タイトルのテキスト色

タイトルのリンク色を指定します。(初期値:白)

ヘッダー画像内タイトル

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

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

タイトルのフォントサイズを指定します。( 初期値:40px)

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

タイトルに、Google NotoSans日本語Webフォントを指定するかどうかと、使用する場合のフォントウェイトを指定します。
数値が大きいほど、太いフォントになります。

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

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

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

タイトル下に表示されるテキストのフォントサイズを指定します。( 初期値:16px)

header

ページ内ヘッダー画像

下層ページでの、ヘッダーに表示されるヘッダー画像をアップロードできます。

pageheader

 

フッター

フッターの背景色

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

分割ウィジェット

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

フッターロゴ

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

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

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

footer

スタイル

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

Google Noto Sans 日本語フォント

記事タイトルのフォントサイズと、Google 日本語Webフォント(Noto Sans)を使用するかどうか、使用する場合、そのフォントウェイトを指定します。

(初期値は、Google Noto Sansを使用,font-size:40px, font-weight:100)

08

欧文フォント

Google Webフォントを指定できます。
指定しない場合の初期フォントは、Centuryゴシックです。ここで指定した欧文フォントは、主に、タイトル、見出し文字について適用されます。

Google Noto Sans日本語フォントを使用する場合は、ここでのフォント設定は無視されます。

09

サイトの最大幅

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

 

ヘッダー下部ウィジェットエリアの背景色

ヘッダー下部ウィジェットエリアのテキスト色

フリーエリアウィジェットのタイトルのフォントサイズ

フリーエリアウィジェットのタイトルのアニメーションスタイル

フリーエリアウィジェットのタイトルの日本語

fixheaderWebフォント設定

 

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

サイトのキーカラー、サブカラーと、コンテンツのフォント色、リンク色等のカラー設定を行います。


記事

記事の文字抜粋数

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

13

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

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

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

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

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

投稿者の情報を表示

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

17

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

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

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

18

前後の記事へのリンク

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

19

レイアウト

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

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

05

詳細設定

カスタムCSS

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

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

20

SNS共有設定

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

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

SNSボタン用コード

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

 

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

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

21

Twitterユーザー名

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

Facebook OGP画像

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

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

SNSボタン設定

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



ウィジェット設定

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



 

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

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

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

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

m4

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

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

m5

■タブウィジェット

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

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

指定した固定ページの内容を、ウィジェット内に表示できます。

■動画ウィジェット

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

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

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

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

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

■contact infoウィジェット

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

contactoinfo