【Diver】カスタマイザー機能の設定項目とプレビュー画像

Diverのカスタマイザー機能は、他のWordPressテーマと比較すると設定できる項目がかなり多いです。

このページでは、カスタマイザー機能の詳細と設定変更した際のイメージを紹介していきます。

他の機能についてはこちらfa-commenting

WordPressテーマ「Diver」について

2019.1.3

WordPressの有料テーマである「Diver」を1年以上使用している筆者が、搭載されている機能や特徴、レビューなどを紹介しています。...

Diverのカスタマイザー機能で設定できること

カスタマイザー機能で設定できることはとてもたくさんあります。
まず大きな分類から紹介します。

まい

大きな分類だけでも結構なボリュームがありますが、細かい設定内容はもっともっとたくさんあります…！

それでは、細かい設定内容を順にみていきましょう。

サイト基本情報（タイトルやキャッチフレーズ）

サイトの基本情報では、以下の内容を設定/変更できます。

まい

サイトタイトルやキャッチフレーズはDiver以外のテーマでも設定できる項目なので、割愛します(´・ω・`)

サイトアイコン

ブラウザのブックマークやタブ、WordPressのモバイルアプリで表示されるアイコンを設定できます。いわゆるファビコンです。

設定するアイコンは、512ピクセル×512ピクセル以上のサイズを使用してください。これより小さいサイズだとうまく作動しませんでした。

Microsoft Edgeのファビコンと、Google Chromeのファビコンはサイトアイコンを設定することで表示されたのを確認しています。

「サイトロゴ・アイコン」という設定項目にファビコン設定があるのですが、そちらは設定しなくても動作すると思います。

メディアの種類（GIFやJPEGなど）は指定がないので、どれでも大丈夫です。

まい

まいのサイトではPNGを使っています（｀・ω・´）

メイン設定（基本的なデザイン設定）

メイン設定では、以下の内容を設定/変更できます。

まい

順に詳しく見ていきます。

ナビゲーション設定

ナビゲーション設定では、2項目を設定/変更できます。

ナビゲーションメニューの位置

この項目では、ナビゲーションメニューの位置を2通りのデザインから選択/変更できます。

まい

ナビゲーション設定で変わる部分を撮影しました。
どんな感じに変わるのか、参考にしてもらえれば幸いです！

 

ロゴを中央揃えにした場合は、メニューの表示デザインに違いがほとんどありません。

ロゴ：左寄せ ロゴと並列	ロゴ：左寄せ 独立	ロゴ：中央揃え ロゴと並列	ロゴ：中央揃え 独立

ナビゲーションメニューのエフェクト

この項目では、ナビゲーションメニューを開くときのエフェクトを5種類から選択できます。

固定ヘッダー設定

固定ヘッダーとは、ページをスクロールしても上部に表示されるヘッダーの事を指します。ページ上部に表示されるヘッダーとは別の物です。

固定ヘッダー設定では、3項目を設定/変更できます。

まい

まいのサイトでは固定ヘッダーは非表示にしています！

 

個人的にウィンドウ画面が広いのが好きなのです(´・ω・`)笑

固定ヘッダーで表示するメニューの選択/変更

固定ヘッダーに表示するメニューを、メインメニューか「ヘッダーロゴの右」というウィジェットに設定しているメニューかを選択できます。

まい

こちらも、設定によってどのように表示が変わるのか撮影しました。

 

ちなみに、「ヘッダーロゴの右」というウィジェットはナビゲーション設定で「独立」に設定していないとロゴの右側には表示されません。

メインメニュー	ウィジェット

ミニヘッダーの表示/非表示

ミニヘッダーとは、キャッチコピーが表示されている場所のことを指します。

まい

まいのサイトで言うと、一番上にあるオレンジの帯が消えます。

 

表示にした場合と非表示にした場合のプレビューを撮影しました。

表示	非表示

記事一覧設定

記事一覧設定では、6項目を設定/変更することができます。

まい

記事一覧のタイトルは、未入力でタイトルを非表示にすることができます！

 

日付や作成者、タグの表示/非表示を撮影しました。

全表示	全非表示
日付のみ表示	作成者のみ表示	タグのみ表示

抜粋文字数

記事一覧で表示される、記事の抜粋をどこまで表示するかの設定です。

まい

文字数はデフォルトで160文字です。

nbsp;

最大で3行分しか表示されないので、設定した文字数より少なく表示される場合もあります。

100文字	150文字	160

固定記事

固定記事では、固定記事一覧のタイトルを設定できます。未入力だとタイトルが非表示になります。

スライダー記事

スライダー記事とは、トップページに表示されるくるくると回る記事リストです。

ここでは、4項目を設定/変更することができます。

まい

スライダー記事は、設定したタグが付いている記事を表示します。

 

スライダーをアイキャッチ画像のみの表示にした状態を撮影しました！

通常表示	アイキャッチ画像のみ

ピックアップカテゴリー

ピックアップカテゴリーは、トップページに表示できる機能です。

ユーザーに注目してほしいカテゴリーをトップページに表示できます。

まい

ホームページのレイアウトを「最新の投稿（記事一覧デザイン）」に設定している場合にのみ利用できる機能です。

ピックアップカテゴリー表示数

ピックアップカテゴリーで表示する記事数の設定です。

newラベル設定（パンくずやスクロールボタン設定も含む）

newラベルは、投稿して間もない記事を目立たせる機能です。

newラベル設定では、5項目を設定/変更することができます。

まい

newラベルのデザインとページスクロールボタンのカラーは、デザイン設定①の項目で変更することができます。

背景画像設定

背景画像を設定/変更することができます。

デフォルトの背景画像は、削除してしまっても「デフォルト」ボタンで復帰できます。

まい

背景画像の変更でどこが変わるのかを撮影しました！

デフォルト	変更した状態

投稿ページ（投稿ページに関する設定）

投稿ページでは、以下の内容を設定/変更できます。

まい

各「表示/非表示」設定は、撮影した画像をまとめて紹介します！

タイトル直下の項目全表示		タイトル直下の項目全非表示
公開日	更新日	読了時間	作成者（タイトル直下）
		記事直下の項目全非表示
作成者（記事直下）	作成者の最新記事	投稿の前後の記事	関連キーワード

まい

作成者の最新記事は、作成者（記事直下）を表示させている場合にのみ表示が可能です！

pickup記事表示設定（スライダー記事）

pickup記事表示設定では、pickup記事（スライダー）が表示される場所を3種類から設定することができます。

まい

スライダーを記事上に配置した場合と、記事下に配置した場合を撮影しました！

記事上（top）	記事下（bottom）	記事下非表示

関連記事設定

関連記事設定では、2項目を設定/変更することができます。

まい

関連記事数は、0にすることで関連記事を非表示にすることもできます！

関連記事の取得条件

関連記事に表示する記事は、3つの取得方法があります。

公開日順と更新日順は、それぞれの日時が新しい記事を順番に取得します。

ランダムは、完全にランダムで関連記事を取得します。

おすすめ記事設定

おすすめ記事は、全投稿記事からランダムで取得して表示する記事一覧です。

おすすめ記事設定では、3項目を設定/変更することができます。

まい

記事数は関連記事と同様、0にすることで非表示にできます。

 

おすすめ記事の表示スタイルを撮影したので、紹介します！

おすすめ記事の表示スタイル

おすすめ記事の表示スタイルは、2種類から選択することができます。

1カラム	2カラム

コメント設定

コメント設定は、2項目を設定/変更することができます。

まい

コメント一覧のタイトルは、未入力だと非表示になります！

コメントの表示スタイル

コメントの表示スタイルは、3種類から選択することができます。

まい

コメントの表示スタイルは、通常コメントを撮影しました！

 

facebookコメントの方は、まいがfacebookを利用していないので撮影できませんでした、ごめんなさい(´・ω・`)

コメント非表示	通常コメント

記事下facebookいいねボックス設定

記事下facebookいいねボックス設定では、2項目を設定/変更することができます。

まい

メインテキストを未入力にすると、いいねボックス自体が非表示になります。

 

ボックスの背景画像は、アイキャッチ画像を利用するので、いいねボックスを使うときはアイキャッチ画像を忘れず設定しましょう！

記事下Twitterボックス

記事下Twitterボックスでは、メインテキストを設定/変更することができます。

メインテキストを未入力にすると、Twitterボックス自体が非表示になります。

まい

まいはFacebookもTwitterも利用していないので、Diver公式のデモサイトからイメージ画像をお借りしました。

基本カラー（基本的なカラー設定）

基本カラーでは、以下の内容を設定/変更できます。

テーマカラー

テーマカラーでは、基本カラー設定で変更できるカラーリングを、プリセットカラーから選択するか、カスタムカラー（個別に自分で設定する）かを選ぶことができます。

プリセットカラーは、5種類から選ぶことができます。

まい

各プリセットカラーのイメージを撮影しました！

 

フッタータイトルなどのオレンジ色になっている部分は、プリセットカラーでは変更にならない部分です。

light（白基調）
ヘッダー周り			フッター周り
ドロワーメニュー		ポップアップメニュー		横スクロールメニュー
dark（黒基調）
ヘッダー周り			フッター周り
ドロワーメニュー		ポップアップメニュー		横スクロールメニュー
blue（青基調）
ヘッダー周り			フッター周り
ドロワーメニュー		ポップアップメニュー		横スクロールメニュー
red（赤基調）
ヘッダー周り			フッター周り
ドロワーメニュー		ポップアップメニュー		横スクロールメニュー
green（緑基調）
ヘッダー周り			フッター周り
ドロワーメニュー		ポップアップメニュー		横スクロールメニュー

カスタムで配色を設定できる場所

カスタムで配色を設定できる場所は、基本カラーの「テーマカラー」以外の項目です。

どの項目がどこの配色を変更できるのか、紹介します。

投稿内テキスト	ヘッダー	ミニヘッダー	固定ヘッダー
独立メニュー	スクロールメニュー	ビッグフッター	フッター
ウィジェット	投稿ブロック背景	ドロワーメニュータイトル	フッター固定メニュー
ページネーションボタン

まい

無指定の文字色、リンク/リンク：マウスオン時は、おすすめ記事一覧や関連記事などに適用されます。

 

無指定の背景色は、「メイン設定」で背景画像を設定している場合、反映されません。

サイズ設定（画面サイズ設定）

サイズ設定では、以下の内容を設定/変更することができます。

レイアウト設定

レイアウト設定では、以下の内容を設定/変更することができます。

まい

順番に見ていきます！

ヘッダーロゴ設定

ヘッダーロゴ設定では、ロゴの配置を2種類から設定することができます。

まい

ロゴの配置も撮影しました。

左寄せ	中央寄せ

記事一覧レイアウト設定

記事一覧レイアウト設定では、5項目を設定/変更することができます。

PCでの記事一覧レイアウト

PCでの記事一覧レイアウトでは、3種類の記事一覧デザインから選択することができます。

まい

各レイアウトのプレビュー画像です！

 

タブレットはpcの記事一覧デザイン設定が反映されます。

リスト表示	グリッド表示	ミニリスト表示

SP:モバイルでの記事一覧レイアウト

SP:モバイルでの記事一覧レイアウトでは、2種類の記事一覧デザインから選択することができます。

まい

sp（モバイル）は画面が小さいので、見やすい（タップしやすい）と感じるデザインがおすすめです！

リスト表示	グリッド表示

グリッド表示時の高さに関する設定

グリッド表示時の高さに関する設定では、2項目から選択/変更することができます。

グリッドの最大カラム数

グリッドの最大カラム数は、1～4の間で選択することができます。

まい

PCのウィンドウサイズが大きい時もカラム数を増やしたくない時は、カラム数を少なめに設定するといいです！

グリッドの最小カラム数

グリッドの最小カラム数は、1か2から選択することができます。

サイドバーの表示位置設定

サイドバーの表示位置設定では、2項目を設定/変更することができます。

全体のサイドバーの位置

全体のサイドバーの位置は、3種類から選択することができます。

まい

ホームページや記事一覧ページ、カテゴリーページなどが該当します！

左（left）	右（right）	非表示（none）

個別ページのサイドバーの位置

個別ページのサイドバーの位置は、3種類から選択することができます。

左（left）	右（right）	非表示（none）

フッター設定

フッター設定では、ビッグフッターのカラム数を3種類から設定することができます。

まい

大きいウィンドウサイズだと4カラムが映えます。

 

小さいウィンドウサイズの時にどう見えるのかをチェックしておくといいと思います！

非表示	3カラム	4カラム

デザイン設定（①と②）

デザイン設定は、実際のカスタマイザーで①と②に分かれています。

ここでは、①と②で変更できる設定項目をまとめて紹介します！

ブロック要素

ブロック要素では、2つの項目を設定/変更することができます。

まい

ブロック要素は、記事一覧やスライダー記事に適用されます！

囲み方（デザイン）

囲み方（デザイン）は、3種類から選択することができます。

まい

角を丸くするにチェックを入れると、ブロックを角丸四角形にすることができます！

 

プレビュー画像を撮影しました(*'ω'*)

角を丸くする：オフ
無し	影	ライン
角を丸くする：オン
無し	影	ライン

まい

角丸オン状態での影効果が、スクリーンショットではほぼ見えないのですが、実機で見るとうっすら見えます(´・ω・`)

Newラベルスタイル

Newラベルスタイルでは、3項目を設定/変更することができます。

Newラベルスタイルのスタイル

Newラベルスタイルのスタイルでは、7種類から選択することができます。

まい

Newラベルは、新しい投稿のサムネイル画像に表示されるラベルです。

 

各スタイルを撮影したので紹介します！

縦リボン1	縦リボン2	横リボン1	横リボン2
斜めリボン	斜め三角	丸

記事一覧サムネイル

記事一覧サムネイルでは、2項目を設定/変更することができます。

まい

サイト全体のサムネイルを非表示にすると、Newラベルも非表示になります。

 

投稿記事内のアイキャッチは表示されます！

マウスオーバー時のアニメーション

マウスオーバー時のアニメーションでは、6種類から選択することができます。

まい

マウスオーバー時のアニメーションは、記事リストにマウスオーバーした際に動作します！

トップスクロールボタン

トップスクロールボタンでは、2項目を設定/変更することができます。

まい

トップスクロールボタンは、右下に出る「ページのトップに戻る」ボタンです。

 

背景色には透過設定もあるので、ページになじむカラーを設定することができます。

ランキングウィジェット順位

ランキングウィジェット順位では、5種類から選択することができます。

まい

ランキングウィジェットウィジェット順位設定は、「WordPress Popular Posts」というプラグインを導入することで使用できるウィジェットのデザイン設定です。

 

「週間人気記事」などを表示させたい場合は、「WordPress Popular Posts」を使うのがおすすめです！

なし	丸	三角
四角	大きい数字

まい

ちなみに、サムネイルの表示/非表示や抜粋の表示/非表示などのデザイン設定は、「WordPress Popular Posts」のウィジェット設定で行えます！

見出し（H2～H4）のデザイン

見出し（H2～H4）のデザインでは、3項目を設定/変更することができます。

見出し（H2～H4）のデザイン：スタイル

見出し（H2～H4）のデザイン：スタイルでは、14種類から選択することができます。

まい

カスタムは、自分で設定したCSSデザインを使うことができます！

 

マーク1と2以外はH2～H4でのデザインに違いはありません。（高さが変わります）

ボックス	ボックス（幅いっぱい）	ステッチ	吹き出し
ストライプ	タグ	上下ライン	下ライン
リボン1	リボン2	H2のマーク1	H2のマーク2
H3,H4のマーク1	H3,H4のマーク2	付箋

まい

基本色は全てオレンジです。H2のマーク1とマーク2にあるグレーの部分は、カラー変更できません。

 

H3,H4のマークはH4を撮影しました。H3ではもう少し大きなサイズになります！

見出し（H5）のデザイン

見出し（H5）のデザインでは、文字色を変更することができます。スタイル変更はできません。

まい

見出し（H5）は、画像の通りシンプルな見出しデザインです。

メインタイトルのスタイル

メインタイトルのスタイルでは、4項目を設定/変更することができます。

メインタイトルのスタイル：スタイル

メインタイトルのスタイル：スタイルでは、8種類から選択することができます。

まい

メインタイトルは、ホームページの見出しやカテゴリーページの見出しです。

 

ホームページの設定を固定ページにしている場合、固定ページのタイトルが表示されますが、それはメインタイトル扱いにはなりません。

ボックス	吹き出し	リッチ	付箋
タグ	インライン	ステッチ	小さいライン

まい

全て基本色がオレンジ、文字色が黒、背景色が白色です！

 

一部の画像にピンク色の部分がありますが、Newラベルが映り込んでいます。メインタイトルのスタイルではありません。

ウィジェットタイトルのスタイル

ウィジェットタイトルのスタイルでは、4項目を設定/変更することができます。

ウィジェットタイトルのスタイル：スタイル

ウィジェットタイトルのスタイル：スタイルでは、9種類から選択することができます。

まい

ウィジェットタイトルのスタイルも撮影しました！

 

基本色青色、文字色黒色、背景色オレンジです。

ボックス	下線	リッチ
タグ	ステッチ	リボン1
リボン2	付箋	ストライプ

カテゴリー設定

カテゴリー設定では、3項目を設定/変更することができます。

まい

カテゴリーページでの関連タグは、カテゴリータイトル内に表示されます。

 

カテゴリーカラーを設定すると、カテゴリーアイコンのカラーも変わるので、アクセントになります！

全表示	カテゴリータイトル非表示	カテゴリー関連タグ非表示

まい

カテゴリーページのカテゴリタイトルには、画像を設定することもできます！

 

画像を設定するのは、カテゴリーページ作成ページで行います。

サイトロゴ・アイコン

サイトロゴ・アイコンでは、以下のロゴ等を設定できます。

各ロゴ・アイコンの指定拡張子と推奨サイズ

まい

サイトの基本情報にある「サイトアイコン」を設定すると、Microsoft Edgeのファビコンと、Google Chromeのファビコンは表示されました。

 

Firefoxなどは確認していないのであれですが、IE用ファビコンは設定しなくて大丈夫だと思います！

Diverのカスタマイザー機能を使うときの5つのコツ

Diverのカスタマイザー機能はたくさんの変更箇所があるので、デザインを確認しながら設定していくのは重要です。

カスタマイズしたけど、イメージと違う！となって何度も変更することにならないように、ポイントを押さえて設定しましょう！

まい

2つの機能から5つのコツを紹介します！

プレビュー画面を有効活用する

カスタマイズ機能は、プレビュー画面を見ながら設定できます。

設定する項目が変化するページを開きながら設定することで、このメリットを最大限に利用することができます。

また、プレビュー画面のリンクをクリックすると、カスタマイズ機能を中断しなくても別のページをプレビューできます。

いったんカスタマイズ機能を保存して閉じて、別のページを開いて、カスタマイズ機能を立ち上げて、という手間が省けるので要チェックです。

保存方法とプレビューリンクを活用する

デザインが仮決まりの時や実機で確認したい時は「下書き保存」にしましょう。また、プレビューリンクを利用して、公開せずに実機でデザインを確認することもできます。

下書き保存にしておくと、仮決まりのデザインを無しにしたい時に「変更を破棄」というコマンドで元のデザインに戻すことができます。

また、デザインが決まったけどまだ公開したくない場合（公開期日が決まっている場合）は、予約公開を利用するといいでしょう。

指定の日時になったら自動的にデザインが変更されます。

Diverのカスタマイザー機能の詳細　まとめ

いかがでしたでしょうか。

Diverのカスタマイザー機能は設定項目がかなり豊富なので、ボリュームが凄く大きくなってしまいました。

まい

これでも削った方なんです！笑

Diverでは、HTMLやCSS、スクリプトなどを操作しなくても簡単に豊富な種類のデザインを調整/設定することができます。

また、カスタマイザー機能がデフォルト状態でも問題ないくらいのデザインです。「必ずすべての設定項目を変更しなければいけない」わけではないので、「サイトを作るときに時間が凄くかかる」わけでもありません。

デザインの良いサイトを簡単に作りたい方にはとてもおすすめのWordPressテーマです。