プリセットカラーredのヘッダー部分イメージ

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

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

このページで分かること
  • カスタマイザー機能で設定できること
  • カスタマイザー機能で設定を変更した際のイメージ
  • カスタマイザー機能を使うときのコツ

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

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

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

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

カスタマイザー機能で設定できる項目
  • 適用するテーマ
  • サイト基本情報(タイトルやキャッチフレーズ、サイトアイコンなど)
  • メイン設定(基本的なデザイン設定)
  • 投稿ページ(投稿ページに関する設定)
  • 基本カラー(背景、ヘッダーなどの基本的なカラー設定)
  • サイズ設定(メインカラムやウィジェットなどの画面サイズ設定)
  • レイアウト設定(サイトロゴの位置、記事リストのデザインなど)
  • デザイン設定(見出しやスクロールボタンなどのカラー・デザイン設定)
  • カテゴリー設定(カテゴリーアイコンのカラーや表示に関する設定)
  • サイトロゴ・アイコン

まい

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

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

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

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

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

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

サイトの基本情報で設定できる項目
  • サイトタイトル
  • キャッチフレーズ
  • サイトアイコン

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

サイトアイコン

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

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

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

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

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

まい
まいのサイトではPNGを使っています(`・ω・´)

メイン設定(基本的なデザイン設定)

メイン設定(基本的なデザイン設定)

メイン設定(基本的なデザイン設定)
メイン設定(基本的なデザイン設定)

メイン設定(基本的なデザイン設定)
メイン設定(基本的なデザイン設定)

メイン設定(基本的なデザイン設定)
メイン設定(基本的なデザイン設定)

メイン設定(基本的なデザイン設定)
メイン設定では、以下の内容を設定/変更できます。
メイン設定で設定できる項目
  • ナビゲーション設定
  • 固定ヘッダー設定
  • 記事一覧設定
  • 抜粋文字数
  • 固定記事
  • スライダー記事
  • ピックアップカテゴリー
  • ピックアップカテゴリー表示数
  • newラベル設定(パンくずやスクロールボタン設定も含む)
  • 背景画像設定

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

ナビゲーション設定

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

ナビゲーション設定で変更できる項目
  • ナビゲーションの位置
  • ナビゲーションメニューのエフェクト

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

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

  • ロゴと並列
  • メニュー独立

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

 

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

ロゴ:左寄せ
ロゴと並列
ロゴ:左寄せ
独立
ロゴ:中央揃え
ロゴと並列
ロゴ:中央揃え
独立
ナビゲーション設定のイメージ(ロゴ:左寄せ、メニュー:ロゴと並列)

ナビゲーション設定のイメージ(ロゴ:左寄せ、メニュー:ロゴと並列)
ナビゲーション設定のイメージ(ロゴ:左寄せ、メニュー:独立)

ナビゲーション設定のイメージ(ロゴ:左寄せ、メニュー:独立)
ナビゲーション設定のイメージ(ロゴ:中央揃え、メニュー:ロゴと並列)

ナビゲーション設定のイメージ(ロゴ:中央揃え、メニュー:ロゴと並列)
ナビゲーション設定のイメージ(ロゴ:中央揃え、メニュー:独立)

ナビゲーション設定のイメージ(ロゴ:中央揃え、メニュー:独立)

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

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

  • エフェクトなし
  • フェード
  • 上から
  • スライド
  • 展開

固定ヘッダー設定

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

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

固定ヘッダー設定で変更できる項目
  • 固定ヘッダーで表示するメニューの選択/変更
  • 固定ヘッダーの表示/非表示
  • ミニヘッダーの表示/非表示

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

 

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

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

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

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

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

 

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

メインメニューウィジェット
固定ヘッダー表示:メインメニューを選択した場合のイメージ

固定ヘッダー表示:メインメニューを選択した場合のイメージ
固定ヘッダー表示:ウィジェットを選択した場合のイメージ

固定ヘッダー表示:ウィジェットを選択した場合のイメージ

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

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

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

 

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

表示非表示
ミニヘッダーを表示したイメージ

ミニヘッダーを表示したイメージ
ミニヘッダー非表示のイメージ画像

ミニヘッダー非表示のイメージ画像

記事一覧設定

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

記事一覧設定で変更できる項目
  • 記事一覧のタイトル
  • 記事一覧の並べ替え(公開日順/更新日順)
  • 記事一覧で優先表示するカテゴリー(親カテゴリー/子カテゴリー)
  • 日付の表示/非表示
  • 作成者(author)の表示/非表示
  • タグの表示/非表示

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

 

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

全表示全非表示
記事一覧設定(日付・作成者・タグ全表示)

記事一覧設定(日付・作成者・タグ全表示)
記事一覧設定(日付・作成者・タグ非表示)

記事一覧設定(日付・作成者・タグ非表示)
日付のみ表示作成者のみ表示タグのみ表示
記事一覧設定(日付表示/作成者・タグ非表示)

記事一覧設定(日付表示/作成者・タグ非表示)
記事一覧設定(作成者表示/日付・タグ非表示)

記事一覧設定(作成者表示/日付・タグ非表示)
記事一覧設定(タグ表示/日付・作成者非表示)

記事一覧設定(タグ表示/日付・作成者非表示)

抜粋文字数

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

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

nbsp;

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

100文字150文字160
抜粋文字数100文字

抜粋文字数100文字
抜粋文字数150文字

抜粋文字数150文字
抜粋文字数160文字

抜粋文字数160文字

固定記事

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

スライダー記事

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

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

スライダー記事で変更できる項目
  • スライダータイトル
  • スライダーで表示する記事のタグ設定
  • スライダーをアイキャッチ画像のみの表示にする
  • トップページでのスライダー表示/非表示

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

 

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

通常表示アイキャッチ画像のみ
スライダー記事の通常表示イメージ

スライダー記事の通常表示イメージ
スライダー記事:アイキャッチ画像のみの表示イメージ

スライダー記事:アイキャッチ画像のみの表示イメージ

ピックアップカテゴリー

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

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

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

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

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

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

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

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

newラベル設定で変更できる項目
  • newラベルタイトル
  • 表示時間設定(投稿してからnewラベルを表示させる時間)
  • 投稿ページのパンくず表示/非表示
  • 固定ページのパンくず表示/非表示
  • ページ上部にスクロールさせるボタン(右下にあるボタン)の表示/非表示

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

背景画像設定

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

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

まい
背景画像の変更でどこが変わるのかを撮影しました!
デフォルト変更した状態
背景画像:デフォルトのイメージ

背景画像:デフォルトのイメージ
背景画像:変更した際のイメージ

背景画像:変更した際のイメージ

投稿ページ(投稿ページに関する設定)

投稿ページ(投稿ページに関する設定)

投稿ページ(投稿ページに関する設定)
投稿ページ(投稿ページに関する設定)

投稿ページ(投稿ページに関する設定)
投稿ページ(投稿ページに関する設定)

投稿ページ(投稿ページに関する設定)
投稿ページでは、以下の内容を設定/変更できます。
投稿ページで設定できる項目
  • 公開日の表示/非表示
  • 更新日の表示/非表示
  • 読了時間の表示/非表示
  • 作成者(タイトル直下)の表示/非表示
  • 作成者(記事直下)の表示/非表示
  • 作成者の最新記事の表示/非表示
  • 投稿の前後の記事の表示/非表示
  • pickup記事表示設定(スライダー記事)
  • 関連キーワードの表示/非表示
  • 関連記事設定
  • おすすめ記事設定
  • コメント設定
  • 記事下Facebookいいねボックス設定
  • 記事下Twitterボックス設定

まい
各「表示/非表示」設定は、撮影した画像をまとめて紹介します!
タイトル直下の項目全表示タイトル直下の項目全非表示
タイトル直下の項目全表示

タイトル直下の項目全表示
タイトル直下の項目全非表示

タイトル直下の項目全非表示
公開日更新日読了時間作成者(タイトル直下)
公開日

公開日
更新日

更新日
読了時間

読了時間
作成者(タイトル直下)

作成者(タイトル直下)
記事直下の項目全非表示
記事直下の項目全表示

記事直下の項目全表示
作成者(記事直下)作成者の最新記事投稿の前後の記事関連キーワード
作成者(記事直下)

作成者(記事直下)
作成者の最新記事

作成者の最新記事
投稿の前後の記事

投稿の前後の記事
関連キーワード

関連キーワード

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

pickup記事表示設定(スライダー記事)

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

  • 記事上(top)
  • 記事下(bottom)
  • 非表示(hidden)

まい
スライダーを記事上に配置した場合と、記事下に配置した場合を撮影しました!
記事上(top)記事下(bottom)記事下非表示
pickup記事(スライダー記事)の記事上表示イメージ

pickup記事(スライダー記事)の記事上表示イメージ
pickup記事(スライダー記事)記事下表示イメージ

pickup記事(スライダー記事)記事下表示イメージ
pickup記事(スライダー記事)記事下非表示イメージ

pickup記事(スライダー記事)記事下非表示イメージ

関連記事設定

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

関連記事設定で設定できる項目
  • 記事下で表示するカテゴリー関連記事数
  • 関連記事の取得条件

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

関連記事の取得条件

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

  • 公開日順
  • 更新日順
  • ランダム

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

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

おすすめ記事設定

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

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

おすすめ記事設定で設定できる項目
  • 記事下で表示するおすすめ記事数
  • おすすめ記事のタイトル
  • おすすめ記事の表示スタイル

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

 

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

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

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

  • 1カラム
  • 2カラム
1カラム2カラム
おすすめ記事の表示スタイル(1カラム)

おすすめ記事の表示スタイル(1カラム)
おすすめ記事の表示スタイル(2カラム)

おすすめ記事の表示スタイル(2カラム)

コメント設定

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

コメント設定で設定できる項目
  • コメントの表示スタイル
  • コメント一覧のタイトル

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

コメントの表示スタイル

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

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

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

 

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

コメント非表示通常コメント
コメント非表示のイメージ

コメント非表示のイメージ
通常コメントのイメージ

通常コメントのイメージ

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

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

記事下facebookいいねボックスで設定できる項目
  • 記事下facebookいいねボックスメインテキスト
  • 記事下facebookいいねボックスサブテキスト

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

 

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

記事下Twitterボックス

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

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

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

記事下Facebookボックスと記事下Twitterボックスのイメージ

記事下Facebookボックスと記事下Twitterボックスのイメージ

基本カラー(基本的なカラー設定)

基本カラー(基本的なカラー設定)

基本カラー(基本的なカラー設定)
基本カラー(基本的なカラー設定)

基本カラー(基本的なカラー設定)
基本カラー(基本的なカラー設定)

基本カラー(基本的なカラー設定)
基本カラー(基本的なカラー設定)

基本カラー(基本的なカラー設定)
基本カラー(基本的なカラー設定)

基本カラー(基本的なカラー設定)

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

基本カラーで設定できる項目
  • テーマカラー
  • 背景色
  • 文字色
  • リンク/リンク:マウスオン時
  • 投稿内テキスト(文字色/リンク/リンク:マウスオン時)
  • ヘッダー(背景/テキスト/リンク/リンク:マウスオン時)
  • ミニヘッダー(背景/テキスト/リンク/リンク:マウスオン時)
  • 固定ヘッダー(背景/テキスト/リンク/リンク:マウスオン時)
  • 独立メニュー(背景/テキスト/背景:マウスオン時/テキスト:マウスオン時)
  • スクロールメニュー(背景/テキスト)
  • ビッグフッター(背景/テキスト/リンク/リンク:マウスオン時)
  • フッター(背景/テキスト/リンク/リンク:マウスオン時)
  • ウィジェット(背景/テキスト/リンク/リンク:マウスオン時)
  • 投稿ブロック背景
  • ドロワーメニュータイトル(背景/文字色)
  • フッター固定メニュー(背景/文字色)
  • ページネーションボタン(背景/テキスト/背景:マウスオン時/テキスト:マウスオン時)

テーマカラー

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

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

  • light(白基調の配色)
  • dark(黒基調の配色)
  • blue(青基調の配色)
  • red(赤基調の配色)
  • green(緑基調の配色)

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

 

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

light(白基調)
ヘッダー周りフッター周り
プリセットカラーlightのヘッダー部分イメージ

プリセットカラーlightのヘッダー部分イメージ
プリセットカラーlightのフッター部分イメージ

プリセットカラーlightのフッター部分イメージ
ドロワーメニューポップアップメニュー横スクロールメニュー
プリセットカラーlightのドロワーメニューイメージ

プリセットカラーlightのドロワーメニューイメージ
プリセットカラーlightのポップアップメニューイメージ

プリセットカラーlightのポップアップメニューイメージ
プリセットカラーlightの横スクロールメニューイメージ

プリセットカラーlightの横スクロールメニューイメージ
dark(黒基調)
ヘッダー周りフッター周り
プリセットカラーdarkのヘッダー部分イメージ

プリセットカラーdarkのヘッダー部分イメージ
プリセットカラーdarkのフッター部分イメージ

プリセットカラーdarkのフッター部分イメージ
ドロワーメニューポップアップメニュー横スクロールメニュー
プリセットカラーdarkのドロワーメニュー部分イメージ

プリセットカラーdarkのドロワーメニュー部分イメージ
プリセットカラーdarkのポップアップメニュー部分イメージ

プリセットカラーdarkのポップアップメニュー部分イメージ
プリセットカラーdarkの横スクロールメニュー部分イメージ

プリセットカラーdarkの横スクロールメニュー部分イメージ
blue(青基調)
ヘッダー周りフッター周り
プリセットカラーblueのヘッダー部分イメージ

プリセットカラーblueのヘッダー部分イメージ
プリセットカラーblueのフッター部分イメージ

プリセットカラーblueのフッター部分イメージ
ドロワーメニューポップアップメニュー横スクロールメニュー
プリセットカラーblueのドロワーメニュー部分イメージ

プリセットカラーblueのドロワーメニュー部分イメージ
プリセットカラーblueのポップアップメニュー部分イメージ

プリセットカラーblueのポップアップメニュー部分イメージ
プリセットカラーblueの横スクロールメニュー部分イメージ

プリセットカラーblueの横スクロールメニュー部分イメージ
red(赤基調)
ヘッダー周りフッター周り
プリセットカラーredのヘッダー部分イメージ

プリセットカラーredのヘッダー部分イメージ
プリセットカラーredのフッター部分イメージ

プリセットカラーredのフッター部分イメージ
ドロワーメニューポップアップメニュー横スクロールメニュー
プリセットカラーredのドロワーメニュー部分イメージ

プリセットカラーredのドロワーメニュー部分イメージ
プリセットカラーredのポップアップメニュー部分イメージ

プリセットカラーredのポップアップメニュー部分イメージ
プリセットカラーredの横スクロールメニュー部分イメージ

プリセットカラーredの横スクロールメニュー部分イメージ
green(緑基調)
ヘッダー周りフッター周り
プリセットカラーgreenのヘッダー部分イメージ

プリセットカラーgreenのヘッダー部分イメージ
プリセットカラーgreenのフッター部分イメージ

プリセットカラーgreenのフッター部分イメージ
ドロワーメニューポップアップメニュー横スクロールメニュー
プリセットカラーgreenのドロワーメニュー部分イメージ

プリセットカラーgreenのドロワーメニュー部分イメージ
プリセットカラーgreenのポップアップメニュー部分イメージ

プリセットカラーgreenのポップアップメニュー部分イメージ
プリセットカラーgreenの横スクロールメニュー部分イメージ

プリセットカラーgreenの横スクロールメニュー部分イメージ

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

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

カスタムで設定できる項目
  • 背景色
  • 文字色
  • リンク/リンク:マウスオン時
  • 投稿内テキスト(文字色/リンク/リンク:マウスオン時)
  • ヘッダー(背景/テキスト/リンク/リンク:マウスオン時)
  • ミニヘッダー(背景/テキスト/リンク/リンク:マウスオン時)
  • 固定ヘッダー(背景/テキスト/リンク/リンク:マウスオン時)
  • 独立メニュー(背景/テキスト/背景:マウスオン時/テキスト:マウスオン時)
  • スクロールメニュー(背景/テキスト)
  • ビッグフッター(背景/テキスト/リンク/リンク:マウスオン時)
  • フッター(背景/テキスト/リンク/リンク:マウスオン時)
  • ウィジェット(背景/テキスト/リンク/リンク:マウスオン時)
  • 投稿ブロック背景
  • ドロワーメニュータイトル(背景/文字色)
  • フッター固定メニュー(背景/文字色)
  • ページネーションボタン(背景/テキスト/背景:マウスオン時/テキスト:マウスオン時)

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

投稿内テキストヘッダーミニヘッダー固定ヘッダー
カスタムで変更できる配色:投稿内テキストの場所のイメージ

カスタムで変更できる配色:投稿内テキストの場所のイメージ
カスタムで変更できる配色:ヘッダーの場所のイメージ

カスタムで変更できる配色:ヘッダーの場所のイメージ
カスタムで変更できる配色:ミニヘッダーの場所のイメージ

カスタムで変更できる配色:ミニヘッダーの場所のイメージ
カスタムで変更できる配色:固定ヘッダーの場所のイメージ

カスタムで変更できる配色:固定ヘッダーの場所のイメージ
独立メニュースクロールメニュービッグフッターフッター
カスタムで変更できる配色:独立メニューの場所のイメージ

カスタムで変更できる配色:独立メニューの場所のイメージ
カスタムで変更できる配色:横スクロールメニューの場所

カスタムで変更できる配色:横スクロールメニューの場所
カスタムで変更できる配色:ビッグフッターの場所のイメージ

カスタムで変更できる配色:ビッグフッターの場所のイメージ
カスタムで変更できる配色:フッターの場所のイメージ

カスタムで変更できる配色:フッターの場所のイメージ
ウィジェット投稿ブロック背景ドロワーメニュータイトルフッター固定メニュー
カスタムで変更できる配色:ウィジェットの場所のイメージ

カスタムで変更できる配色:ウィジェットの場所のイメージ
カスタムで変更できる配色:投稿ブロック背景の場所のイメージ

カスタムで変更できる配色:投稿ブロック背景の場所のイメージ
カスタムで変更できる配色:ドロワーメニュータイトルの場所のイメージ

カスタムで変更できる配色:ドロワーメニュータイトルの場所のイメージ
カスタムで変更できる配色:フッター固定メニューの場所のイメージ

カスタムで変更できる配色:フッター固定メニューの場所のイメージ
ページネーションボタン
カスタムで変更できる配色:ページネーションボタンの場所のイメージ

カスタムで変更できる配色:ページネーションボタンの場所のイメージ

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

 

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

サイズ設定(画面サイズ設定)

サイズ設定(画面サイズ設定)1

サイズ設定(画面サイズ設定)1
サイズ設定(画面サイズ設定)2

サイズ設定(画面サイズ設定)2

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

サイズ設定で設定できる項目
  • サイト全体のサイズ(画面サイズ大/中)
  • 個別ページメインカラム(画面サイズ大/中)
  • サイドバーのサイズ
  • 記事一覧画像の高さ:リスト(画面サイズ大/中/小)
  • 記事一覧画像の高さ:グリッド(画面サイズ大/中/小)

レイアウト設定

レイアウト設定1

レイアウト設定1
レイアウト設定2

レイアウト設定2

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

レイアウト設定で設定できる項目
  • ヘッダーロゴ設定
  • 記事一覧レイアウト設定
  • サイドバー表示位置設定
  • フッター設定

まい
順番に見ていきます!

ヘッダーロゴ設定

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

  • 左寄せ
  • 中央寄せ

まい
ロゴの配置も撮影しました。
左寄せ中央寄せ
ヘッダーロゴ設定(ロゴ:左寄せ)

ヘッダーロゴ設定(ロゴ:左寄せ)
ヘッダーロゴ設定(ロゴ:中央寄せ)

ヘッダーロゴ設定(ロゴ:中央寄せ)

記事一覧レイアウト設定

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

記事一覧レイアウト設定で設定できる項目
  • PCでの記事一覧レイアウト
  • SP(モバイル)での記事一覧レイアウト
  • グリッド表示時の高さに関する設定
  • グリッドの最大カラム数
  • グリッドの最小カラム数

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

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

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

まい
各レイアウトのプレビュー画像です!

 

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

リスト表示グリッド表示ミニリスト表示
pcレイアウト設定:リスト表示

pcレイアウト設定:リスト表示
pcレイアウト設定:グリッド表示

pcレイアウト設定:グリッド表示
pcレイアウト設定:ミニリスト表示

pcレイアウト設定:ミニリスト表示

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

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

  • リスト表示
  • グリッド表示

まい
sp(モバイル)は画面が小さいので、見やすい(タップしやすい)と感じるデザインがおすすめです!
リスト表示グリッド表示
sp(モバイル)の記事一覧デザイン:リスト表示

sp(モバイル)の記事一覧デザイン:リスト表示
sp(モバイル)の記事一覧デザイン:グリッド表示

sp(モバイル)の記事一覧デザイン:グリッド表示

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

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

  • グリッドの高さを揃える
  • グリッドの高さを揃えない

グリッドの最大カラム数

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

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

グリッドの最小カラム数

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

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

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

サイドバーの表示位置設定で設定できる項目
  • 全体のサイドバーの位置
  • 個別ページのサイドバーの位置

全体のサイドバーの位置

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

  • 左(left)
  • 右(right)
  • 非表示(none)

まい
ホームページや記事一覧ページ、カテゴリーページなどが該当します!
左(left)右(right)非表示(none)
全体のサイドバー設定:左(left)

全体のサイドバー設定:左(left)
全体のサイドバー設定:右(right)

全体のサイドバー設定:右(right)
全体のサイドバー設定:非表示(none)

全体のサイドバー設定:非表示(none)

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

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

  • 左(left)
  • 右(right)
  • 非表示(none)
左(left)右(right)非表示(none)
個別ページのサイドバー設定:左(left)

個別ページのサイドバー設定:左(left)
個別ページのサイドバー設定:右(right)

個別ページのサイドバー設定:右(right)
個別ページのサイドバー設定:非表示(none)

個別ページのサイドバー設定:非表示(none)

フッター設定

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

  • 非表示
  • 3カラム
  • 4カラム

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

 

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

非表示3カラム4カラム
ビッグフッター設定:非表示

ビッグフッター設定:非表示
ビッグフッター設定:3カラム

ビッグフッター設定:3カラム
ビッグフッター設定:4カラム

ビッグフッター設定:4カラム

デザイン設定(①と②)

デザイン設定(①と②)1

デザイン設定(①と②)1
デザイン設定(①と②)2

デザイン設定(①と②)2
デザイン設定(①と②)3

デザイン設定(①と②)3
デザイン設定(①と②)4

デザイン設定(①と②)4
デザイン設定(①と②)5

デザイン設定(①と②)5

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

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

デザイン設定で設定できる項目
  • ブロック要素
  • Newラベルスタイル
  • 記事一覧サムネイル
  • トップスクロールボタン
  • ランキングウィジェット順位
  • 見出し(H2~H4)のデザイン
  • 見出し(H5)のデザイン
  • メインタイトルのスタイル
  • ウィジェットタイトルのスタイル

ブロック要素

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

まい
ブロック要素は、記事一覧やスライダー記事に適用されます!
ブロック要素で設定できる項目
  • 囲み方(デザイン)
  • 角を丸くする

囲み方(デザイン)

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

  • 無し
  • ライン

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

 

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

角を丸くする:オフ
無しライン
ブロック要素(角丸オフ、囲みデザイン無し)

ブロック要素(角丸オフ、囲みデザイン無し)
囲み要素(角丸オフ、影)

囲み要素(角丸オフ、影)
囲み要素(角丸オフ、ライン)

囲み要素(角丸オフ、ライン)
角を丸くする:オン
無しライン
囲み要素(角丸オン、囲みデザイン無し)

囲み要素(角丸オン、囲みデザイン無し)
囲み要素(角丸オン、影)

囲み要素(角丸オン、影)
囲み要素(角丸オン、ライン)

囲み要素(角丸オン、ライン)

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

Newラベルスタイル

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

Newラベルスタイルで設定できる項目
  • 背景色
  • 文字色
  • スタイル

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

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

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

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

 

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

縦リボン1縦リボン2横リボン1横リボン2
Newラベルスタイル:縦リボン1のプレビュー画像

Newラベルスタイル:縦リボン1のプレビュー画像
Newラベルスタイル:縦リボン2のプレビュー画像

Newラベルスタイル:縦リボン2のプレビュー画像
Newラベルスタイル:横リボン1のプレビュー画像

Newラベルスタイル:横リボン1のプレビュー画像
Newラベルスタイル:横リボン2のプレビュー画像

Newラベルスタイル:横リボン2のプレビュー画像
斜めリボン斜め三角
Newラベルスタイル:斜めリボンのプレビュー画像

Newラベルスタイル:斜めリボンのプレビュー画像
Newラベルスタイル:斜め三角のプレビュー画像

Newラベルスタイル:斜め三角のプレビュー画像
Newラベルスタイル:丸のプレビュー画像

Newラベルスタイル:丸のプレビュー画像

記事一覧サムネイル

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

記事一覧サムネイルで設定できる項目
  • マウスオーバー時のアニメーション
  • サイト全体のサムネイルを非表示にする

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

 

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

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

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

  • なし
  • ズーム
  • ぼかし
  • グレイスケール
  • セピア
  • 透過

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

トップスクロールボタン

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

トップスクロールボタンで設定できる項目
  • 背景色
  • 文字色

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

 

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

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

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

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

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

 

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

なし三角
ランキングウィジェット順位設定:なし(非表示)のプレビュー画像

ランキングウィジェット順位設定:なし(非表示)のプレビュー画像
ランキングウィジェット順位:丸のプレビュー画像

ランキングウィジェット順位:丸のプレビュー画像
ランキングウィジェット順位:三角のプレビュー画像

ランキングウィジェット順位:三角のプレビュー画像
四角大きい数字
ランキングウィジェット順位:四角のプレビュー画像

ランキングウィジェット順位:四角のプレビュー画像
ランキングウィジェット順位:大きい数字のプレビュー画像

ランキングウィジェット順位:大きい数字のプレビュー画像

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

見出し(H2~H4)のデザイン

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

見出し(H2~H4)のデザインで設定できる項目
  • 基本色
  • 文字色
  • スタイル

見出し(H2~H4)のデザイン:スタイル

見出し(H2~H4)のデザイン:スタイルでは、14種類から選択することができます。

  • ボックス
  • ボックス(幅いっぱい)
  • ステッチ
  • 吹き出し
  • ストライプ
  • タグ
  • 上下ライン
  • 下ライン
  • リボン1
  • リボン2
  • マーク1
  • マーク2
  • 付箋
  • カスタム

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

 

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

ボックスボックス(幅いっぱい)ステッチ吹き出し
見出しデザイン:ボックス

見出しデザイン:ボックス
見出しデザイン:ボックス(幅いっぱい)

見出しデザイン:ボックス(幅いっぱい)
見出しデザイン:ステッチ

見出しデザイン:ステッチ
見出しデザイン:吹き出し

見出しデザイン:吹き出し
ストライプタグ上下ライン下ライン
見出しデザイン:ストライプ

見出しデザイン:ストライプ
見出しデザイン:タグ

見出しデザイン:タグ
見出しデザイン:上下ライン

見出しデザイン:上下ライン
見出しデザイン:下ライン

見出しデザイン:下ライン
リボン1リボン2H2のマーク1H2のマーク2
見出しデザイン:リボン1

見出しデザイン:リボン1
見出しデザイン:リボン2

見出しデザイン:リボン2
見出しデザイン:H2のマーク1

見出しデザイン:H2のマーク1
見出しデザイン:H2のマーク2

見出しデザイン:H2のマーク2
H3,H4のマーク1H3,H4のマーク2付箋
見出しデザイン:H3,H4のマーク1

見出しデザイン:H3,H4のマーク1
見出しデザイン:H3,H4のマーク2

見出しデザイン:H3,H4のマーク2
見出しデザイン:付箋

見出しデザイン:付箋

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

 

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

見出し(H5)のデザイン

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

まい
見出し(H5)は、画像の通りシンプルな見出しデザインです。

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

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

メインタイトルのスタイルで設定できる項目
  • 基本色
  • 文字色
  • 背景色
  • スタイル

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

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

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

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

 

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

ボックス吹き出しリッチ付箋
メインタイトルのスタイル:ボックス

メインタイトルのスタイル:ボックス
メインタイトルのスタイル:吹き出し

メインタイトルのスタイル:吹き出し
メインタイトルのスタイル:リッチ

メインタイトルのスタイル:リッチ
メインタイトルのスタイル:付箋

メインタイトルのスタイル:付箋
タグインラインステッチ小さいライン
メインタイトルのスタイル:タグ

メインタイトルのスタイル:タグ
メインタイトルのスタイル:インライン

メインタイトルのスタイル:インライン
メインタイトルのスタイル:ステッチ

メインタイトルのスタイル:ステッチ
メインタイトルのスタイル:小さいライン

メインタイトルのスタイル:小さいライン

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

 

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

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

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

ウィジェットタイトルのスタイルで設定できる項目
  • 基本色
  • 文字色
  • 背景色
  • スタイル

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

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

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

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

 

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

ボックス下線リッチ
ウィジェットタイトルのスタイル:ボックス

ウィジェットタイトルのスタイル:ボックス
ウィジェットタイトルのスタイル:下線

ウィジェットタイトルのスタイル:下線
ウィジェットタイトルのスタイル:リッチ

ウィジェットタイトルのスタイル:リッチ
タグステッチリボン1
ウィジェットタイトルのスタイル:タグ

ウィジェットタイトルのスタイル:タグ
ウィジェットタイトルのスタイル:すてっち

ウィジェットタイトルのスタイル:すてっち
ウィジェットタイトルのスタイル:リボン1

ウィジェットタイトルのスタイル:リボン1
リボン2付箋ストライプ
ウィジェットタイトルのスタイル:リボン2

ウィジェットタイトルのスタイル:リボン2
ウィジェットタイトルのスタイル:付箋

ウィジェットタイトルのスタイル:付箋
ウィジェットタイトルのスタイル:ストライプ

ウィジェットタイトルのスタイル:ストライプ

カテゴリー設定

カテゴリー設定

カテゴリー設定

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

カテゴリー設定で設定できる項目
  • カテゴリータイトルの表示/非表示
  • カテゴリーページでの関連タグ表示/非表示
  • カテゴリーカラー

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

 

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

全表示カテゴリータイトル非表示カテゴリー関連タグ非表示
カテゴリーページ設定:全表示

カテゴリーページ設定:全表示
カテゴリーページ設定:カテゴリータイトル非表示

カテゴリーページ設定:カテゴリータイトル非表示
カテゴリーページ設定:カテゴリー関連タグ非表示

カテゴリーページ設定:カテゴリー関連タグ非表示

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

 

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

サイトロゴ・アイコン

サイトロゴ・アイコン

サイトロゴ・アイコン

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

サイトロゴ・アイコンで設定できる項目
  • ロゴ画像
  • ファビコン
  • IE用ファビコン
  • アップルタッチアイコン

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

指定拡張子推奨サイズ
サイトロゴ/250×60px
ファビコン.png32×32px
IEファビコン.ico16×16px
アップルタッチ用アイコン/144×144px

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カスタマイザー機能の保存方法を活用する

  • 公開
  • 下書き保存
  • 予約公開

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

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

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

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

カスタマイズ機能を使うときのコツ
  • 設定する項目をプレビュー画面で表示しながら変更する
  • プレビュー画面のリンクを活用する
  • 下書き保存とプレビューリンクで公開せずに実機確認する
  • 下書き保存にすれば、変更を破棄することも簡単
  • 予約公開で指定日時に自動的にデザイン公開することも可能

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

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

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

まい
これでも削った方なんです!笑

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

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

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

あらゆるデザインがDiverで叶う。それも難しい操作無しで。
Diverロゴ
イメージ画像

「企業に納品してきたノウハウと技術をすべての人に利用可能なWordpressテーマ」がモットーの有料WordPressテーマ「Diver」。 “ユーザーの質問や意見に真摯に応える” 開発陣の想いは無制限のメールサポートに留まらず、アップデートにも反映されています。もはやそれは、初心者でもあらゆるデザインが作れてしまう程の性能。Diverの能力を知ってしまったら、もう他のテーマには心移りできなくなってしまうでしょう。

販売価格 : 17,980円 (税込)/当サイト限定購入特典あり
無期限・無制限メールサポート付き/無料バージョンアップ有り
おすすめの記事