元サラリーマンブロガーなつのプロフィール

Diverの目次の使い方!シンプルな作り方とプラグイン導入、色パターン一覧表も!(WordPressテーマ)

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

WordPressのテーマDiverは、初心者でも使いやすいシンプルなカスタマイズでカッコいいデザインになるテンプレートです。

目次はTOC+というプラグインを導入し、本格的なものを作れる仕組みとなっています。Diverの目次の作り方やプラグイン導入、すぐに使いこなせるようにアレンジした色パターン一覧などもお伝えします。

なつ
TOC+を使って目次を作るやり方はSANGOと同じやり方です。

初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
※今なら、6大購入特典をお付けしています!

Diverの機能紹介!初心者に向いている理由!(WordPressテーマ)


Diver(Wordpressテーマ)の目次の完成図

デフォルトでは青系のデザインでとてもシンプルなのでどんなブログにも合います。階層別に表示する場合にはとても見やすいと思います。

目次にTable of Contents Plusを使うテーマは他にもありますが、Diverのデザインはとてもシンプルで見やすいのが特徴です。

デフォルトでは、若干薄い色合いで文字が見えづらいので、他の色にも応用できるようにいろんな色の例も作ってみました。

まずは基本の目次の作り方をお伝えしていきます。

↓芸大卒のなつがDiverのオリジナルデザインを作りました!

Diverデザインのマニュアル特典
Diverのオリジナルデザインです!当ブログよりDiverを購入くださった方に特典として差し上げます。

このマニュアルの通りに作ればCTAやタブなどの設定も併せてできるようになります。全部で5種ですが、基本色を変更すれば20種類以上のデザインが楽しめます。
⇒ デザインを確認するならコチラをご覧ください。

//たった30記事で稼いだ実録記事(2,980円相当)付き!\\

Diver(Wordpressテーマ)の目次の作り方の手順

Diverの目次の表示のさせ方はとても簡単です。設置には2つの場所での設定が必要です。

  • プラグイン「Table of Contents Plus」のインストールと設定
  • Diverオプションで調整

Table of Contents Plusの設定で、どの場所に表示するか、どんな形態にするかなど詳細を設定しておき、DiverオプションでDiver特有の編集をします。

 

以下の手順で設定をしていきます

  1. Table of Contents Plusのインストール
  2. Table of Contents Plusの設定
  3. Diverオプションの設定
  4. 目次の色辞典

 

 

Diver(Wordpressテーマ)の目次の使い方 1. 「Table of Contents Plusのインストール」

まずは、目次のプラグインをインストールしていきます。

▼ プラグイン ⇒ 新規追加 

 

右上の検索窓に「Table of Contents Plus」と入力します。すると以下の画像がでてきますので、「今すぐインストール」をクリック。

画面が変わったら「有効化」をクリックするとインストール完了です。

初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」
※今なら、6大購入特典をお付けしています!

Diverの6大特典!【WordPressテーマ】初心者でも稼げる!ひとあじ違うテンプレートアイテムが魅力!

Diver(Wordpressテーマ)の目次の使い方 2. 「Table of Contents Plusの設定」

プラグインのインストールが終わったら、Table of Contents Plusの設定をしていきます。

▼ プラグイン インストール済プラグイン

 

この部分で、どんな目次をどの場所で出すかを設定していきます。

 

設定方法

設定画面が表示されたら「基本設定」をしていきます。

大きく以下の4つは設定をしておいてください。

  1. 位置
  2. 表示条件
  3. コンテンツタイプを自動挿入
  4. 見出しテキスト

入力したら「設定を更新」をクリックします。

 

1. 位置

デフォルトでは、最初の見出しの前に設置されるようになっています。ここで目次をどの位置に配置するか指定します。

  • 最初の見出しの前(デフォルト)
  • 最初の見出しの後
  • 上・・・記事の一番上
  • 下・・・記事の一番下

 

2. 表示条件

見出しがいくつある時に目次を表示させるか指示します。よく間違えるのが、ここでの設定の数より見出しの数が少ない場合に目次が表示されないことです。

例えば、表示条件を3つ以上に設定をしているのに記事に見出しが2つしかない場合には当然表示されません。

もし、「目次がでない~」と焦っている方はまずこちらをご確認ください。

 

3. コンテンツタイプを自動挿入

コンテンツタイプの部分は「post」にクリックをしてください。

 

4. 見出しテキスト

目次の見え方に対する設定をここでやります。

  • 目次の上のタイトル
  • ユーザーによる目次の表示・非表示を切り替え
  • 最初は目次を非表示

 

その他

その他、階層表示の表示をしたい場合には「階層表示」にチェックを入れます。階層表示とは、見出しの大きさ、h2、h3、h4などの関係を目次でわかるようにするということです。

 


初心者でも簡単にカスタマイズできるワードプレステーマ「Diver」

※今なら、6大購入特典をお付けしています!

Diver(Wordpressテーマ)の目次の使い方 3. 「Diverオプションの設定」

Table of Contents Plusの設定が終わったら次に、Diverでの調整をします。

▼ Diverオプション ⇒ 投稿設定

 

この部分の設定はとても簡単です。まずは、TOC+プラグインにDiverスタイルを適用するをクリックすると2色設定できる部分が展開します。

ここで色を設定すると自分の好きなカラーで目次ができあがります。

なつ
目次がわかりやすく浮いた感じにならないようにするには、TOC+基本カラーを薄めの色、TOC+文字色には濃い色にするとわかりやすくなります。

 

Diver(Wordpressテーマ)の目次の色アレンジ 「色辞典」

目次の配置は上部が多いのでブログ全体のデザインとマッチしている方がカッコよく見えます。目次だけ浮いた印象を与えないためにいろんな色合いを考えてみました。

 

色合い 色番号 向いているブログ
赤系
  • #ec6d71
  • #e60033
  • 女性向け
  • 旅行ブログ
  • メイク・コスメ
  • スイーツ
ピンク系
  • #f6bfbc
  • #d9333f
  • 女性向け
  • 花・スイーツ
  • メイク・コスメ
  • ファッション
青系
  • #00a3af
  • #274a78
  • 投資・企業
  • ガジェット
  • マリンスポーツ
紫系
  • #cca6bf
  • #57375b
  • お酒
  • 外国語
  • 恋愛
  • 美術
黄色系
  • #fef263
  • #f8b500
  • 子育て
  • スポーツ
  • お笑い
  • ダンス
オレンジ系
  • #f7aa59
  • #f39800
  • 野菜
  • 漫画
  • ペット
  • 健康
緑系
  • #7ebea5
  • #028760
  • 園芸
  • 自然
  • 旅行
  • ゴルフ
モノクロ
  • #dbd9d9
  • #16160e
  • ビジネス
  • 冠婚葬祭
  • シニア
  • クラッシック
セピア
  • #b28c6e
  • #622d18
  • 山登り
  • ペット
  • ツーリング
  • 盆栽
パステル
  • #ddffbc
  • #ff9e9e
  • スイーツ
  • ポエム
  • ハンドメイド
  • ダンス

文字を薄くしてしまうと全体的にぼんやりとしてしまうので、ちょっと濃いめの色にして見やすくした方がユーザビリティが良いでしょう。

階層についても、大見出し、中見出し、小見出しと訪問者が目次を見てひとめで記事がどんな構成になっているのかわかることが理想。

 

↓ 高機能で使いやすいDiverを当ブログからお買い上げの方に特典をプレゼントしています。

Diverの6大特典!【WordPressテーマ】初心者でも稼げる!ひとあじ違うテンプレートアイテムが魅力!

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. マニュアルなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

 

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

 

出典:Diver

出典:なつオリジナルデザイン

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. マニュアルなどのサポート

なにかわからないことがあった場合、相談できる場所があるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

 

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

初心者に特におすすめのWordPressテーマ

⇒ Wordpressテーマ「Diver」はコチラ

 

  • 高機能で最新SEO対策済みのテーマ
  • 基本色変更がワンクリックで完了
  • 初心者にも使いやすい入力補助
  • ペラサイトなどもラクラク作成
  • カッコいいヘッダー背景が標準装備
  • グラデーションもかんたん

 

シェアしてね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です