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

MINORITYテーマは、無限スクロールにより、投稿記事を自動で次々と読み込んで表示します。
一度に読み込む記事数の設定は、[設定]-[表示設定] > [1ページに表示する最大投稿数]から行います。

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

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

各種設定方法
アニメーション設定
ショートコード によるカラム設定


基本設定

ローディングアイコンを表示

ページ読み込み時に、ローディングアイコンを表示させるかどうかを設定します。(初期設定:ON)


背景色/画像の背景

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

0051

iphone用ホームアイコン

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

02

favicon(ファビコン)

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

03

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

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

02

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

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

03

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

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

投稿者名を表示

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

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

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

カテゴリー名を表示

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

タグを表示

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


タイポグラフィー

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

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

Webフォント

見出しタイトルと本文それぞれについて、日本語フォントを、

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

から選択できます。
※Google NotoSansについては、記事タイトル等にのみ適用されます。


ヘッダー

カスタムロゴ

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

カスタムロゴ(スマートフォン)

スマートフォン用の、ロゴ画像をアップロードします。
アップロードした画像は、自動で高さ30pxにリサイズされます。

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

カスタムロゴの表示上の高さを指定します。(初期値:60px)

ロゴの上余白

カスタムロゴの上余白の値を設定できます。(初期値:60px)

ロゴの下余白

カスタムロゴの下余白の値を設定できます。(初期値:60px)



フッター

分割ウィジェット

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


 

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

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

 

 


スタイル

サイトの最大幅

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

カラー設定

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


記事

カラム設定

記事一覧の表示スタイルを、1カラム~3カラムの3つのスタイルから選択できます。
(スマートフォンでのアクセス時は、自動で1カラム表示なります。)


 

記事の文字抜粋数

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

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

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

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

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

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アイコンは、フッターに表示されます。


 


アニメーションの設定

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]