【決定版】ワードプレステーマ「Diver」の外観カスタマイズ方法の全て

 

 

ワードプレステーマ「Diver」の外観カスタマイズ方法の解説です。

 

Diver の外観カスタマイズは細かく設定できる部分が多く

非常に長いページになるので、カスタマイズしたい項目が決まっている方は

下の「目次」から直接確認したい場所へ移動してくださいね。

 

外観のカスタマイズ画面へは、ワードプレスの管理画面左側のメニューから

外観 → カスタマイズ と選択することで移動することができます。

１．サイト基本情報

サイト基本情報です。

ブログのタイトルなど最も基本的な部分なので

1度設定をし終えれば、あとはほとんどさわる必要はないでしょう。

サイトタイトル

当ブログなら「わー研。」に当たるタイトルの部分。

ブログのジャンルが決まっているなら、それに近いタイトルをつけましょう。

キャッチフレーズ

あなたのブログがどういうブログなのかを説明する欄。

長くなりすぎず、できるだけ簡潔に「ここはどういうブログなのかを説明」しましょう。

サイトアイコン

スマホのショートカットなどに表示されるアイコンです。

512×512ピクセル以上の ”正方形の画像” をアップロードしましょう。

２．メイン設定

ヘッダーやトップページなど、ブログのメインとなる外観を設定する項目です。

ナビゲーション設定

ナビゲーションメニュー（ヘッダー下メニュー）の表示方法を設定できます。

 

ロゴと並列

 

メニュー独立

 

ナビゲーションドロップダウンエフェクト

ナビゲーションメニューをドロップダウンさせる設定にしている時の

メニューの挙動を変更できます。

 

固定ヘッダー設定

画面を下にスクロールしたときに、追いかけてくるヘッダーの設定です。

※「固定ヘッダーを表示する」にチェックが入っていないと設定が反映されません。

メインメニュー

メインメニューが、固定ヘッダーの右側に表示されます。

 

ウィジェット

こちらは何も表示されません。

 

固定ヘッダーを表示する

固定(追従)ヘッダーを表示するか、しないかの設定。

 

ミニヘッダーを表示する

ミニヘッダーを表示するか、しないかの設定。

画像のハイライト部分が、ミニヘッダーです。

 

記事一覧設定

トップページの記事一覧に関しての設定項目です。

 

記事一覧タイトル

記事一覧のタイトルを設定します。未入力の場合は非表示になります。

 

記事一覧の並び替え

記事一覧の並び順を、公開日順にするか、更新日順にするかから選択できます。

 

記事一覧で優先表示するカテゴリー

記事一覧で優先表示するカテゴリーを

親カテゴリー か 子カテゴリー から選択できます。

 

日付を表示する

日付(投稿日)を表示するか否かを設定できます。

 

作成者(author)を表示する

作成者を表示するか否かを設定できます。

 

タグを表示する

タグを表示するか否かを設定できます。

 

抜粋文字数

記事一覧の 抜粋文字数(メタディスクリプション) を変更することができます。

 

固定記事

固定記事を表示させている場合、タイトルを変更することができます。

記事一覧と同じく、未入力だと非表示になります。

 

固定記事を表示させるには、投稿編集画面で「この投稿を先頭に固定表示」にチェックを入れるだけでOK

 

スライダー記事

スライダー記事(下の画像参照)の表示方法について設定できます。

 

スライダー記事タイトル

スライダー記事タイトル(ハイライト内赤枠部分)のテキストを変更できます。

 

スライダー記事のタグを設定

ここで設定したタグを含んでいる記事が、スライダー記事に表示されます。

初期設定では「 pickup 」になっているので、特に変更する必要はないでしょう。

 

スライダーをアイキャッチ画像のみの表示にする

スライダー記事にタイトルが表示されなくなります。

 

トップページで非表示にする

トップページで ”のみ” スライダー記事を非表示にする設定です。

トップページをカスタマイズしている方以外は、チェックは外したままで大丈夫でしょう。

 

ピックアップカテゴリー

ここで設定したカテゴリーが、ピックアップカテゴリーに表示されるようになります。

 

ピックアップカテゴリーを表示した例

カテゴリーを設定すると、このように新着記事の上にピックアップカテゴリーが表示されます。

 

ピックアップカテゴリーの並び替え

記事一覧と同じく、公開日順 と 更新日順 のどちらかで記事を並び替えることができます。

 

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

ピックアップカテゴリー一覧を表示させる数を選ぶことができます。

 

newラベル設定

newラベルに関しての設定です。

 

newラベルタイトル

newラベルタイトル「NEW!」の部分のテキストを変更できます。

 

表示期間設定

newラベルを表示させる期間を変更できます。単位は「時間」です。

例えば「48」に設定すると、新しく記事を投稿してから「2日間」ラベルを表示しておくことができます。

 

パンくず表示設定

パンくずの表示非表示を設定できます。

 

「パンくず」とは、記事ページのヘッダー下(h1タイトル上)に表示される

サイトの中の現在地を示すテキストリンクの事です。

 

背景画像を設定します。

メイン設定最後の項目は、背景画像の設定です。

ブログの背景画像を任意の画像に変更することができます。

 

以下がブログの背景エリアになります。

設定する場合は、複雑な模様や、目が痛くなるような色のものは避けるようにしましょう。

 

３．投稿ページ

投稿ページ内の表示設定項目です。

 

日付や作成者などの表示設定

 

公開日を表示する

投稿ページの公開日の表示非表示が選択できます。

 

更新日を表示する

投稿ページの更新日の表示非表示が選択できます。

 

読了時間を表示する

投稿ページの読了時間(ページを全て読むのにかかる大まかな目安の時間)の、表示非表示が選択できます。

 

作成者(タイトル直下)を表示する

h1タイトル(大見出し)の右下に、作成者情報を表示できます。

 

作成者(記事直下)を表示する

投稿ページの最下部、コメント欄のすぐ上にプロフィールを表示できます。

プロフィールとアバターの作り方については、以下の記事を参考にしてください。

内部リンクカンタン！ワードプレスでアバターを表示する方法２選

 

作成者の最新記事を表示する

プロフィール欄の下に、執筆者の最新記事を表示することができます。

 

投稿の前後の記事を表示する

投稿ページ下部に、前後の記事を表示することができます。

 

pickup記事表示

投稿ページ内の、pickup記事(スライダー記事)の表示の有無を選択できます。

 

記事上(top)

記事一覧ページと同様、記事の一番上にpickup記事を表示させます。

 

記事下(bottom)

記事最下部、投稿の前後の記事リンクと、おすすめの記事の間にpickup記事が表示されます。

 

非表示(hidden)

投稿ページにpickup記事が表示されなくなります。

 

 

関連キーワードを表示する

ページ最下部に、関連キーワード(投稿に関連するタグ)を、表示するか否かを選択できます。

 

関連記事

投稿ページの記事下に表示する「カテゴリーの関連記事」に関する設定です。

 

関連記事表示数

関連記事の表示数を選択できます。

「０」に設定すると、関連記事が非表示にります。

 

関連記事の取得条件

関連記事の並び順を変更できます。

公開日順：公開日が新しいものから順番に表示します。

更新日順：更新日が新しいものから順番に表示します。

ランダム：ランダムに記事を表示します。

 

おすすめ記事

関連記事のさらに下に、ランダムで表示されるおすすめ記事の表示設定です。

 

おすすめ記事表示数

おすすめ記事に表示させる記事数を変更できます。

「０」に設定すると、おすすめ記事が非表示になります。

 

オススメ記事タイトル

おすすめ記事のタイトルを変更できます。

 

おすすめ記事の表示スタイルを設定します。

おすすめ記事の表示スタイルを選択できます。

※2カラムの場合

※1カラムの場合

 

コメント

記事下コメント欄の表示設定ができます。

非表示

コメント欄が表示されなくなります。

 

facebookコメント

Facebookと連携した(見た目もFacebook風)の、コメント欄を表示することができます。

通常コメント

通常のコメント欄が表示されます。

 

記事下facebookいいねボックス

記事下に、facebookいいねボックスを設置することができます。

 

記事下twitterボックス

記事下に、twitterボックスを表示することができます。

 

４．基本カラー

サイトの基本カラーを設定できます。

 

テーマカラー

デフォルトでは、5種類のテーマカラーが用意されています。

基本的には、この中から好みのものを選択すると良いでしょう。

一番下の「カスタマイズ」を選択することで、さらに細かく設定できるようになります。

 

カスタマイズカラー

上でカスタマイズカラーを選択した場合に、細かく設定するための項目です。

全て解説すると量が多くなりすぎるので、この項目については別ページで解説したいと思います。

 

５．サイズ設定

サイトの各部分のサイズを設定できます。

 

サイト全体のサイズ

サイト全体の表示サイズを指定することができます。

指定方法は、%(パーセント)と、px(ピクセル)の2種類から選択可能です。

 

サイト全体のサイズとは、以下のハイライト部分の事を指します。(メインカラム)

 

個別ページメインカラム

個別ページのメインカラムサイズを設定できます。

 

 

サイドバー

サイドバーのサイズを指定することができます。

 

サイドバーとは、以下のハイライト部分の事を指します。

 

記事一覧画像の高さ(リスト)&(グリッド)

記事一覧をリスト表示、グリッド表示した際の

アイキャッチ画像の高さを、それぞれ設定することができます。

 

 

 

６．レイアウト設定

サイト全体のレイアウトについての設定項目です。

 

ヘッダーロゴ設定

ヘッダーロゴの配置を設定できます。

 

左寄せ

ヘッダーロゴを左寄せにします。

 

中央寄せ

ヘッダーロゴを中央寄せにします。

 

記事一覧レイアウト設定(PC)

”PCで表示した時の”記事一覧のレイアウトを設定できます。

下に表示サンプルを置いておきますので、あなたの好みのものを選びましょう。

 

リスト表示

 

グリッド表示

 

ミニリスト表示

 

記事一覧レイアウト設定(SP)

”スマホで表示した時の”記事レイアウト設定です。

こちらもサンプル画像置いておきます。

 

リスト表示

 

グリッド表示

 

グリッドのカラム数

”記事をグリッド表示した時”の、最大カラム数と最小カラム数をそれぞれ設定できます。

 

サイドバー表示位置設定

サイドバーの表示位置を変更することができます。

「サイト全体」と「個別ページ」のサイドバーの位置を、それぞれ設定できます。

 

フッター設定

フッター(サイト最下部のエリアのこと)の表示に関しての設定項目です。

 

「非表示」「3カラム」「4カラム」の中から選びます。

 

７．デザイン設定①

デザイン設定その１。細かい部分のデザインを設定できます。

 

ブロック要素

ブロック要素や、囲み方について設定できます。

 

囲み方

ブロック要素は、以下の３つの内から選択することができますが

正直、僕の環境では違いが確認できなかったので割愛します。

 

角を丸くする

ブロック要素の角を丸くして表示させることができます。

 

Newラベルスタイル

Newラベルのデザインを変更することができます。

 

背景色・文字色

Newラベルの背景色と文字色を変更することができます。

 

スタイル

Newラベルのデザインを変更することができます。

 

 

記事一覧サムネイル

記事一覧画面での、サムネイル(アイキャッチ)画像の挙動を変更できます。

 

選べるサムネイルのアニメーションは、以下の６つ。

 

さらに、下のチェックボックスを ON にすることで

記事一覧のアイキャッチを非表示にすることもできますが、基本的には使うことはないでしょう。

 

トップスクロールボタン

ブログを下にスクロールすると出てくる「トップスクロールボタン」の

背景色と文字色を変更することができます。

 

 

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

ランキングウィジェットで表示する、順位の数字の部分のデザインを変更できます。

 

選べるデザインは、以下の５つです。

 

８．デザイン設定②

デザイン設定②では、見出しやタイトルの色やスタイルを変更することができます。

 

見出しは「 h2(見出し2) 」～「 h5(見出し5) 」まで、各見出しごとに設定可能です。

 

見出しのスタイルは14種類あります。

デザインサンプル画像と一緒に見ていきましょう。

 

 

最後の「カスタム」は、CSSを使用して自分でカスタマイズする上級者用の項目です。

元から用意されている種類が豊富なので、既存のスタイルから選ぶことをおすすめします。

 

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

メインタイトルのスタイルを設定することができます。

ここで言うメインタイトルとは、記事一覧ページの「新着記事」や「固定記事」などの部分を指します。

見出しと同様に設定可能なので、好みのデザインを選択しましょう。

 

選べるメインタイトルのスタイルは以下８つ。

 

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

ウィジェットのスタイルを設定することができます。

 

ウィジェットタイトルとは、サイドバーに表示されるタイトルの部分を指します。

 

ウィジェットタイトルで選べるスタイルは以下の９つ。

 

９．カテゴリー設定

カテゴリーの表示方法に関しての設定項目です。

 

カテゴリーページタイトルを表示する

 

カテゴリーページに、背景付き(変更可能)のタイトルを表示することができます。

 

カテゴリーページに関連タグを表示する

 

カテゴリーページに関連タグを表示することができます。

 

カテゴリーごとのカラーの設定

 

カテゴリーごとにカラーを設定することができます。

 

１０．サイトロゴ・アイコン

サイトロゴやアイコン画像をアップロードして設定します。

 

 

ロゴ画像をアップロード

ロゴ画像をアップロードできます。(推奨画像サイズ：250×60px)

 

ロゴ画像は、サイトタイトルの代わりに表示されます。

 

ファビコン(.png)をアップロード

ファビコン用の画像をアップロードできます。推奨サイズは、32×32px、png(拡張子)形式の画像を使用します。

ファビコンとは、ブラウザでサイトを開いたときにタブに表示される小さな画像の事です。

 

IE用ファビコン(.ico)をアプロード

IE(インターネットエクスプローラー)用の、ファビコンをアップロードできます。

IEに表示させるためには、専用のファビコン画像を用意する必要があります。

サイズは、16×16px、.ico(拡張子)形式の画像を使用します。

 

アップルタッチアイコンをアップロード

アップルタッチアイコン(スマホでホームに登録した時や、検索結果に表示されるアイコン)を登録できます。

画像サイズは、144×144px 推奨。拡張子は、png形式がよいでしょう。

 

１１．メニュー

メニューに関しての設定項目です。

 

見出し2番で出てきた、ヘッダーナビゲーションやフッターメニューに関して

設定することができますが、ワードプレスの管理画面から設定したほうが使いやすいので

ここでは割愛して、また別ページで詳しく解説したいと思います。

 

１２．ウィジェット

ウィジェットの設定項目です。

 

使用しているウィジェットの一覧を確認することができますが

設定する際には、やはり管理画面で行ったほうがやりやすいので割愛します。

 

１３．ホームページ設定

ホームページ(トップページまたはフロントページ)を

デフォルトの記事一覧にするか、固定ページで作成するかを選択できます。

 

 

１４．追加CSS

追加でCSSを記載して、Diverの外観やレイアウトをさらにカスタマイズできます。

Diverはすでにかなりのカスタマイズ性があるので、ほとんど触る必要はないでしょう。

 

さいごに

おつかれさまでした！

これで、Diverの外観カスタマイズについての解説は以上となります。

 

設定項目がたくさんあるので、一気に全部を覚えるのは大変ですが

まずは必要な部分だけをさわってみて、徐々に覚えていくようにしましょう^^

 

 

※テーマ選びにかかる無駄なお金と時間を短縮

ワードプレステーマは無料・有料のものをあわせると数えきれないほどあります。僕もこれまで色々な有料テーマを使ってきましたが、結局一番使いやすく見た目も良かったのが、この Diver でした。以下のリンク先では、Diver 開発者の高木さんが作成したデモサイトが公開されているので、気になった方は、そちらもあわせてチェックしてみてください。

≫Diver デモサイト