医療事務の資格をとるならコチラ!最新キャンペーン情報

Cocoonの便利機能3つ!すぐに使えるおすすめ機能をご紹介

  • URLをコピーしました!

WordPress無料テーマといえばCocoon!

ほとんどのブロガーさんが一度はお世話になるテーマではないでしょうか?

私はCocoonを使い始めてもうすぐ4ヶ月。

その間「こんな機能もあったのー!?」という驚きの出会いが沢山ありました。

本記事では、私の驚いた『無料テーマCocoonの便利機能3つ』をご紹介します。

みなみ

どれもブログの利便性デザイン性があがる機能ばかりです。

関連記事

2021年11月追記

このブログは、ブログ10ヶ月目に「Cocoon」からへと移行しています。

目次

Cocoon機能①サイトマップの簡単自動生成

Cocoonには、読者用のサイトマップを簡単に作成できる独自機能があります。

通常ならサイトマップ用のプラグイン導入が(自動作成・更新のためには)不可欠なのに、Cocoonの場合はプラグイン不要

しかも一度サイトマップを作成すれば、自動更新してくれるので管理不要です。

Cocoonで作成したサイトマップの一部

Cocoonで作成したサイトマップの一部
みなみ

私はこのCocoonサイトマップを基に、手作業でカスタマイズしたサイトマップを使用しております!

そもそもサイトマップとは?

サイトマップとは、「読者」に対して「サイト内にどんな記事があるのか」を一覧で表示したページのことです。

ブログでは常に最新記事から並ぶので、古い記事は埋もれがちです。

サイトマップを作成することで、読者が興味のある記事を探しやすくなり、古い記事が読まれる可能性もあがります。

記事数が増えてきたら、ぜひ読者用のサイトマップを作成しましょう。

サイトマップについて詳しく知りたい方はこちら

サイトマップの作成目的や基本的な作り方は、SEOに詳しいしばゆーさん@shibayu_blog)の以下の記事がおすすめです。

Cocoonでのサイトマップの作成方法

作成方法は本当に簡単です。

私も約10分ほどで完成しました。

STEP
固定ページを新規作成する
STEP
ページタイトルを「サイトマップ」にする

※お好みのタイトルでOK

STEP
本文の段落ブロックに以下のコードを入力する
[sitemap]
Cocoonサイトマップ作成方法
STEP
作成したサイトマップページを分かりやすい場所(グローバルメニュー等)に設置する
みなみ

これだけで、プレビュー画面や公開画面には自動でサイトマップが作成されます!
私はこの自動サイトマップからさらに手作業でカスタマイズしています♪

この自動作成サイトマップでは、工程③のコード部分を少し変えるだけで下記のカスタマイズも可能です。

  • 固定ページの表示・非表示
  • カテゴリーページの表示・非表示
  • 月別アーカイブページの表示・非表示

以下のまちゃりささん@macharisa_blog)のブログでは、Cocoonのサイトマップのカスタマイズ方法はもちろん、作成方法、設置方法まで一つ一つ詳しく説明されています。

ズボラでもすてき空間は作れる
【Cocoon】超簡単!サイトマップの作り方(ブログ初心者向け) 今回は、Cocoonの独自機能を使ってサイトマップを簡単に作成する方法について、ご紹介します。サイトマップは、サイト全体の構成を一覧で記載している、「サイトの地図」の...

サイトマップをさらに手作業カスタマイズ

私はCocoon機能で出力したサイトマップを基に手作業でカスタマイズしたサイトマップを使用しています。

手作業でカスタマイズしたサイトマップの一部

手作業でカスタマイズしたサイトマップの一部
手作業サイトマップのメリット
  • 細かいカテゴリー分けが自由にできる
  • 自分の好きな順番に並び替えできる
  • 記事タイトルを自由に編集できる
    (例:本来の記事タイトルの簡略化)

雑記ブログでカテゴリーが多岐にわたる場合、手作業でサイトマップを編集すると読者が興味のある記事を探しやすくなるので回遊率が上がるメリットがあります。

手作業サイトマップのデメリット
  • 最初のサイトマップを作るのに手間がかかる
  • 記事更新のたびにサイトマップに記事を追加する作業が必要

その一方で、作成に時間と手間が掛かることがデメリット

ただ、Cocoonのサイトマップ自動作成機能を用いることで、イチから手作業で作るよりも手間なく作成・カスタマイズが可能です。

みなみ

「ブログの記事のカテゴリー分けに満足いっていない…」という方は、サイトマップできれいにカテゴリー分けしてあげるとよいでしょう。

STEP
イトマップ用の固定ページを2つ新規作成する
STEP
一方の固定ページでは、Cocoon機能を用いてサイトマップを作成し、そのプレビュー画面で「投稿一覧」をすべてコピーする。

(例)Cocoon機能で作成したサイトマップ
※公開せずに下書き状態のままにしておく

STEP
もう一方の固定ページでは、先ほどコピーした「投稿一覧」をペーストして、分かりやすいように並び替えや、カテゴリー分けをする。
STEP
自分でカスタマイズした方のサイトマップのみ公開する。
固定ページ一覧にサイトマップが2つある状態に(一方は下書き状態)
みなみ

自分のブログ記事数やカテゴリー状態によっては、自動生成 or 手作業でカスタマイズを選択しましょう♪

Cocoon機能②カラーパレット色の追加

Cocoonの記事内で使えるカラーパレット(背景色・文字色・枠色)に、最大6色までお好みの色を追加できます!

Cocoonカラーパレットの色の追加

Cocoonのカラーパレットは、元から25色と豊富なバリエーション。

でも折角なら自分のブログテーマにばっちり合った色を使いたいですよね。

私の場合は、ブログのスキンカラーに合わせて4色追加しています。

みなみ

ブログ全体のカラーを統一するだけで、一気にブログのデザイン性が上がります♪

カラーパレットの追加方法は簡単です。

カラーパレットの色追加方法

「WordPress管理画面」
→「Cocoon設定」
→「エディター」タブ
→「拡張カラーパレット色」お好みの色に変更する

詳しい設定方法は、わいひらさんの公式Cocoonサイトをどうぞ。

Cocoon
Gutenbergカラーパレットに好みの色を追加する方法 Gutenbergのカラーパレットに好みの色を追加する方法。

記事内で「拡張色A」を使用している場合、設定で「拡張色A」の色を変更すると、記事内の「拡張色A」も設定変更した色に変わります。
そのため、記事内でオリジナル色を使用してからの色変更には注意しましょう。

Cocoon機能③見出しへのジャンプリンク

ブログ記事を書いていると・・・

みなみ

読者の知識量によって、「記事の全文を読みたい人」と「導入すっとばして本題を読みたい人」がいるだろうなぁ~

ということがありませんか?

そんなとき、Cocoonの目次リンクを活用することで簡単に「特定の見出しへのリンク」を作成できます。

(例)
この機能についてご存じの方は、本記事のまとめまで飛んでください!
※飛んだあとはPCやスマホの「戻る」ボタンで戻れます。

見出しリンク設定方法
  1. リンクしたい文字部分を選択する。
  2. 「リンク」ボタンをクリックする。
  3. リンク先のURLを「ブログURL / 記事のスラッグ / #toc〇(目次の〇番目の見出し)」にする。
Cocoonの記事内ジャンプリンクの作成方法

URL最後の見出し番号は、「目次で表示されている全見出しの内の何番目か」です。

そのため、それぞれのブログ目次の設定によってH2、H3、H4どこまでの深さが表示されるか異なるのでご注意ください。

見出しの数え方
この記事の「まとめ」は目次の7番目

見出しリンク先URLの確認方法は、一度記事を公開したあと、記事の目次から目的の見出しにジャンプしたときのURLをコピー&ペーストする方法もあります。

内部リンクを「新しいタブで開く」設定にしているとうまくジャンプできないので、「同じタブで開く」設定にしましょう。

【設定方法】
「Cocoon設定」→「本文」タブ→「内部リンクの開き方」→「同じタブで開く」

Cocoon目次機能の詳細はこちら

詳しい目次の設定方法については、いくみさんの下記ブログ記事で丁寧に説明されています。

Ikumi's lifelog
[Cocoon] 目次 ~ 好きなところから記事内リンクも! Cocoonの目次機能を使うと、記事内リンクも簡単!好きなところからタイトルにジャンプ!

まとめ:「Cocoon」の機能を使いこなしてさらに素敵なブログへ!

今回、Cocoonのおすすめ便利機能を3つ紹介しました。

意外と知らない方も多いのではないでしょうか?

(少なくとも私はだいぶ最近になって知りました…)

Cocoonには、本当にプラグイン不要の機能が盛り沢山!

「こんな機能ないかな~」と思ったら、とりあえず「Cocoon 〇〇〇(やりたいこと)」で検索すると大体ヒットしてしまうので驚きです。

みなみ

無料テーマCocoonはブログ初心者の味方!

本記事が、みなさんのブログ運営の少しでも参考になれば幸いです。

ちなみに・・・

「ブロックエディターが難しい…」という方には、さとしんさん(@__satoshin)の「Cocoonのブロックエディターの使い方解説記事」がおすすめです。

ブロックエディターの使い方を覚えて、記事執筆を快適にしましょう♪

2021年11月追記

このブログは、ブログ10ヶ月目に「Cocoon」からへと移行しています。

「ブログ運営」に関するオススメ記事

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
トップへ
目次
閉じる