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

当サイトおすすめ有料テーマ!【5大特典付き!】


\\//
✔徹底的に表示速度にこだわった完璧なSEO対策のテーマ!
高機能なのに初めてブログを作る人でもカスタマイズがしやすいテーマ。
ブログ作成の欲しい機能がギュッと詰まった今一番人気のテンプレートです。
今なら5大特典「たった30記事で15万円稼いだ方法」やオリジナルデザインマニュアルその他豪華特典付き!

 

詳しい内容は下記のボタンでご確認ください!

Cocoonの目次の作り方!プラグインTable of Contents Plusの使い方も!【WordPressテーマ】

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

無料テーマのCocoonは、カスタマイズがしやすい作りになっています。専用の管理画面でほとんどのことができてしまいます。

ブログの投稿記事をユーザーが見やすくするための目次の作り方をお伝えしていきます。

 

Cocoonの目次はどんなの?

Cocoonの目次はシンプルですが、目次プラグインTable of Contents Plusと比べても機能的には特にかわらないくらいです。

h2~h6の見出しまで設定をできますので、大きさが階層別のように整理整頓されて出てくるので、見やすいです。

 

↓ 芸大卒のなつが作ったTHE THORのオリジナルデザインです。購入特典として差し上げています。

THE THORなつ特製オリジナルデザインマニュアルプレゼント中!
今大人気のWordpressテーマTHE THORのオリジナルテンプレート6種類ができました!

このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。

ガーリー

シンプル
オーガニック


※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。

⇒ 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!

//今なら、なつ特製オリジナルデザインマニュアル付き!\\

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

Cocoonの目次でできる設定

目次の表示だけではなく表示するページの設定や、開いたままにするとか、閉めておくことも可能です。

初心者にとってはどんな効果があるのか文言も難しく感じる場合もありますが、Cocoonの表示はシンプルで簡単です。

Cocoonの目次設定でできること

Cocoonの目次設定でできることは以下の通りです。

目次の表示 目次を表示するかしないか
表示ページ どのページに目次を表示させるか
目次タイトル 目次のタイトル名
目次切り替え 最初から目次を開けておくかどうか
表示条件 見出しのいくつめで表示させるか
深さ h2~h6の見出しをどの小ささまで表示させるか
目次ナンバーの表示 目次のテキストの左の数字はどの形式か
目次の中央表示 目次を記事スペースの真ん中に置くかどうか
目次の表示順 広告やウィジェットの手前に目次を表示
見出し内タグ

テーマの中にある目次の割にはかなり細かな設定ができることがわかります。

 


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

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

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

 

Cocoonの目次の設定のやり方

Cocoonの目次を入れる具体的な設定方法をお伝えしていきます。Cocoonの専用管理画面で目次を作ることができます。

▼ ダッシュボード ⇒ Cocoon設定 ⇒ 目次

目次の詳細の設定(上部)

  1. 目次の表示
  2. 表示ページ設定
  3. 目次タイトル
  4. 目次切り替え

 

1. 目次の表示

目次自体を表示するかどうかをここで設定します。

チェックを入れると目次を表示させることができます。

 

2. 表示ページ設定

目次をどのページで表示するのか設定します。

  • 投稿ページ
  • 固定ページ
  • カテゴリーページ
  • タグページ

 

3. 目次タイトル

目次のタイトルを記入します。

「目次」「contents」などと入力している方が多いです。

4. 目次切り替え

「目次の表示切替機能を有効にする」にチェックを入れておくことで「開く」「閉じる」などの指示できるようになります。

  • 「開く」「閉じる」の文言の変更も可能
  • 「最初から目次内容を表示する」にチェックを入れると開いたままの目次がでてきます

 

目次の詳細の設定(下部)

1. 表示基準

見出しがいくつあれば目次を表示するのかここで指定します。画像の要件であれば2つ以上見出しがあると目次が出るようになります。

 

2. 目次表示の深さ

見出しの大きさh2~h6まで設定できますが、どの部分まで見せるのかというのをここで示します。

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

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

Cocoonに目次プラグイン「Table of Contents Plus」を導入した場合

Cocoonに限らずプラグイン「Table of Contents Plus」でも目次ができます。Cocoonのテーマでこのプラグインを導入して有効化した場合、Table of Contents Plusの目次が優先的に表示されます。

Cocoonでもう少し凝った目次を使いたいならコチラを導入してみてください。Table of Contents Plus(以下、toc+)での目次の作り方も説明します。

 

Cocoonで目次プラグイン「TOC+」の使い方 1. 「インストール」

この部分は他のテーマも同じです。プラグインを探してインストールします。

▼ プラグイン ⇒ 新規追加

 

Table of Contents Plusが出てきたら「今すぐインストール」し「有効化」をクリックします。

 

TOC+でできること

位置 目次をページのどの位置に配置するか
表示条件 見出しがいくつあれば目次を表示するか
コンテンツタイプ どんな見出しか
見出しテキスト 見出しのタイトル
階層表示 下階層を表示するかどうか
番号振り 番号を振るかどうか
スムーズ・スクロール効果を有効化 クリックしたときの動き。見出しまで飛ぶかスクロールするか。
横幅(外観) 目次の横幅を変更できる
回り込み 目次以下の文章を回り込みするかどうか
文字サイズ テキストサイズの設定
プレゼンテーション 目次のデザイン(任意で設定も可能)
初心者でも簡単にカスタマイズできるワードプレステーマ「THE・THOR」

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

Cocoonで目次プラグイン「TOC+」の使い方 2. 「設定」

インストールができたら次は設定をしていきます。イメージとしてはCocoonの目次とほぼ同じことができますが、もう少し複雑なことができます。

▼ 設定 ⇒ TOC+

 

目次の詳細の設定(上部)

 

  1. 位置
  2. 表示条件
  3. コンテンツタイプ
  4. 見出しテキスト
  5. 階層表示

 

1. 位置

デフォルトでは「最初の見出しの前」になっていますがその他以下の部分の設定ができます。

  • 最初の見出しの後

 

2. 表示条件

こちらはCocoonの目次と同じです。見出しが何個あったら目次を表示するのかここで設定します。

 

3. コンテンツタイプ

どのような目次を表示をするのか設定します。

 

4. 見出しテキスト

目次のタイトルや、「開く」「閉じる」などの設定ができます。

 

5. 階層表示

階層を表示する場合は、ここにチェックを入れます。

 

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

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

目次の詳細の設定(下部)

  1. 番号振り
  2. スムーズスクロール効果を有効化
  3. 横幅
  4. 割り込み
  5. 文字サイズ
  6. プレゼンテーション

 

1. 番号振り

この部分にチェックを入れると番号を振ります。

 

2. スムーズスクロール効果を有効化

チェックを入れると目次からスクロールで動きます。

3. 横幅

横幅を「固定幅」と「相対」「その他」で自分の好きな幅に設定できます。

 

4. 割り込み

「なし(デフォルト)」「右」「左」と文字の割り込みをここで指定します。

5. 文字サイズ

文字の大きさをここで指定します。

6. プレゼンテーション

背景の色を設定できます。

  • グレー(デフォルト)
  • 水色
  • 透明
  • カスタム

 

カスタムにすると自分の好きな色を設定できます。

以下は「水色」を選んだ場合

 

Cocoonで目次を作るにはどちらが良いの?

2つの目次の作り方をお伝えしてきましたが、Cocoonで最初から設定できる目次はシンプルです。プラグインTOC+はデフォルトの目次よりももう少しできることが多いですし色なども変更できます。

Cocoonの目次も基本的なことはできますので十分使えますが、もう少しこだわりたい方はTOC+を使っても良いかと思います。

どちらも難しくはないのですが初心者のうちはCocoonのデフォルトの目次を使っておき途中からプラグインを導入もできますのでまずは試してみることをおすすめします。

 

↓ このブログから大人気のTHE THOR(ザ・トール)を購入くださった方に特典をプレゼントしています。

【期間限定追加!】THE THOR(ザ・トール)の購入特典!割引についても調査!【WordPressテーマ】

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

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

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

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

 

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

 

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

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

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

1. 検索上位を目指せる

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

 

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

 

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

 

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

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

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

 


出典:THE・THOR

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

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

4. 会員フォーラムなどのサポート

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

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

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

 

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

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

  おススメ!WordPressテーマ

 

WordPressテーマ「THE・THOR」

  • 高機能の最新テーマで大人気
  • 着せ替え機能でいろんな用途に使える
  • 会員フォーラムがある

 

コメントを残す

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