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

METRIXテーマを設定するには、以下の設定を行います。

基本設定
メニューの設定
スライダー設定
アイキャッチ設定

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

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

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

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

下記ページから、デモサイトで設定しているウィジェットの設定画面のキャプチャ画像をダウンロードできます。
https://isotype.blue/download/

ショートコードの使用方法については、下記ページで説明しています。
https://isotype.blue/shortcode/

メニューの設定

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

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

スライダー設定

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

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

スライダーの設定画面が開きますので、ここで画像をアップロードします。(推奨サイズ : 横1500px以上)
必要に応じて、「タイトル」、「説明」を入力します。
動画をアップロードする場合は、必ず画像もアップロードしてください。(スマートフォン時に動画の代替画像として表示されます。)

「追加」ボタンをクリックすると、複数のスライダー画像をアップロードできます。

スライダー画像は、ブラウザ幅481px以上の場合は、画像の比率に関わらず、ブラウザの高さいっぱいに表示されます。
(ブラウザの横幅に応じて、左右はトリミングされて表示。)

スマートフォン(ブラウザ幅480px以下)の場合は、ブラウザの高さの50%の高さで表示されます。

アニメーション

スライダー画像が切り替わる際のエフェクト効果について、ズームイン、ズームアウトを設定できます。

パララックス(視差)効果

サイトをスクロールした際のパララックス(視差)効果を指定できます。
数値が大きい程、視差効果の大きくなります。
0に設定すると、パララックス効果が適用されません。

スライドする間隔

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

スワイプ動作

スマートフォンで、指でタッチ操作するのを許可するかどうかを設定します。

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

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

カスタムロゴ

スライダー上にロゴ画像を表示する場合、ロゴ画像をアップロードします。
アップロードした画像は、スライダーの中央に表示されます。

ロゴ画像の最大高さ

スライダー上のロゴ画像の表示上の高さを設定します。

ヘッダーのロゴ

ヘッダーで表示するロゴ画像をアップロードします。

スマートフォンドロワーメニュー内のロゴ

スマートフォンのドロワーメニュー内に、ロゴ画像を表示する場合に、ロゴ画像をアップロードします。

電話番号

電話番号を入力すると、スマートフォンのドロワーメニュー内に、ロゴ画像の下部に、「電話をかける」ボタンが表示されます。

アイキャッチ設定

アイキャッチブロック設定

アイキャッチブロックは、TOPページのスライダー下部に、「見出しテキスト」と、「説明テキスト」を表示できるリアです。

TOPページのブロックコンテンツ設定

ブロックコンテンツは、アイキャッチブロックの下部に表示できる、「画像」、「見出し」、「説明テキスト」、「ボタン」からなるブロックで、このブロックは、「追加」ボタンから、複数設置することができます。

アイキャッチ画像

画像やテキストが、左からマスクがかかったようにスライドして表示されるアクションを無効にしたい場合は、[基本設定]で、「マスクエフェクトを使用」をOFFにしてください。

※2017年10月現在、アイキャッチ画像のマスクエフェクトは、macOS High Sierraに対応していません。

余白

各ブロック間の上下余白を設定します。(0~200px)

ボタンのテキスト

アイキャッチ画像の設定の際に、リンク先URLを指定した場合に、ここで入力したテキストのボタンが表示されるようになります。

タイポグラフィー

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

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

[gmaptag latlng="35.6894875,139.69170639999993" zoom=17　width="300px" height="200px"]

表示倍率

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

マーカーアイコン

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

吹き出し

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

地図のメインカラー

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

彩度

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

明るさ

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

ガンマ値

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

明度を反転

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

地図の高さ

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

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

日本語版 Google Maps API Styled Map Wizard

フッター

フッターの背景色

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

フッターのテキスト色

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

分割ウィジェット

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

フッターロゴ

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

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

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

スタイル

サイトの最大幅

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

カラー設定

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

記事

タイトルの文字数を省略する

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

アイキャッチ画像をグレースケール化

この設定をONにすると、アイキャッチ画像をグレースケールで表示します。(マウスホバー時には、普通の明るさになります。)

下層ページのヘッダーにアイキャッチ画像を表示

この設定をONにすると、アイキャッチ画像が登録されている場合、ヘツダーに横幅フルサイズで、「テキストヘッダーのアイキャッチ画像の高さ」をで指定した高さで、アイキャッチ画像が表示されます。

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

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

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

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タグに下記の記述をすることで、特定の要素にアニメーション効果をつけることができます。

例) 要素をフェードインで表示

<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 カラムのレイアウトを組むことができます。

エディタを「テキスト」モードにします。
「ショートコードを選択」のプルダウンメニューから、2columnか、3columnを選択します。

記述例) 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]