WordPress無料テーマといえばCocoon！
ほとんどのブロガーさんが一度はお世話になるテーマではないでしょうか？
私はCocoonを使い始めてもうすぐ4ヶ月。
その間「こんな機能もあったのー！？」という驚きの出会いが沢山ありました。
本記事では、私の驚いた『無料テーマCocoonの便利機能３つ』をご紹介します。
どれもブログの利便性やデザイン性が簡単に向上する機能ばかりです。
全部知っているあなたはCocoonマスター！？
- 【Cocoonサイトアイコン】5分で完了！ファビコンの作り方と設定方法
- 【Cocoonヘッダーロゴ】ヘッダーロゴの作り方と設定方法
Cocoon機能①サイトマップの簡単自動生成
Cocoonには、読者用のサイトマップを簡単に作成できる独自機能があります。
通常ならサイトマップ用のプラグイン導入が（自動作成・更新のためには）不可欠なのに、Cocoonの場合はプラグイン不要！
しかも一度サイトマップを作成すれば、自動更新してくれるので管理不要です。
（例） Cocoonの独自機能で作ったサイトマップ
※ 約10分で完成！
私はこのCocoonサイトマップを基に、手作業でカスタマイズしたサイトマップを使用しております！
両方のサイトマップの作成方法をご紹介します。
そもそもHTMLサイトマップとは？
HTMLサイトマップとは、「読者」に対して「サイト内にどんな記事があるのか」を一覧で表示したページのことです。
ブログでは常に最新記事から並ぶので、古い記事は埋もれがちです。
サイトマップを作成することで、読者が興味のある記事を探しやすくなり、古い記事が読まれる可能性もあがります。
記事数が増えてきたら、ぜひ読者用のHTMLサイトマップを作成しましょう。
サイトマップの作成目的や基本的な作り方は、SEOに詳しいしばゆーさん（@shibayu_blog）の以下の記事がおすすめです。
Cocoonでのサイトマップの作成方法
作成方法は本当に簡単です。
私も約10分ほどで完成しました。
- １固定ページを新規作成する
- ２ページタイトルを「サイトマップ」にする
※お好みのタイトルでOK
- ３本文の段落ブロックに以下のコードを入力する
※コピ&ペーストでOK
[sitemap]
- ４作成したサイトマップページを分かりやすい場所（グローバルメニュー等）に設置する
これだけで、プレビュー画面や公開画面にはサイトマップが完成しています！
このサイトマップは、工程③のコード部分を少し変えるだけで下記のカスタマイズも可能です。
- 固定ページの表示・非表示
- カテゴリーページの表示・非表示
- 月別アーカイブページの表示・非表示
Cocoonカスタマイズ情報が充実している、まちゃりささん（@macharisa_blog）のブログがおすすめです！
以下の記事では、Cocoonのサイトマップのカスタマイズ方法はもちろん、作成方法、設置方法まで一つ一つ詳しく説明されています。
サイトマップをさらに手作業カスタマイズ
私はCocoon機能で出力したサイトマップを基に手作業でカスタマイズしたサイトマップを使用しています。
雑記ブログでカテゴリーが多岐にわたる場合、手作業でサイトマップを編集すると読者が興味のある記事を探しやすくなるので回遊率が上がるメリットがあります。
その一方で、作成に時間と手間が掛かることがデメリット。
ただ、Cocoonのサイトマップ自動作成機能を用いることで、イチから手作業で作るよりも手間なく作成・カスタマイズが可能です。
「ブログの記事のカテゴリー分けに満足いっていない…」という方は、サイトマップできれいにカテゴリー分けしてあげるとよいでしょう。
- １サイトマップ用の固定ページを2つ新規作成する
- ２一方の固定ページでは、Cocoon機能を用いてサイトマップを作成し、そのプレビュー画面で「投稿一覧」をすべてコピーする。
（例）Cocoon機能で作成したサイトマップ
※公開せずに下書き状態のままにしておく - ３もう一方の固定ページでは、先ほどコピーした「投稿一覧」をペーストして、分かりやすいように並び替えや、カテゴリー分けをする。
- ４自分でカスタマイズした方のサイトマップのみ公開する。
固定ページ一覧にサイトマップが2つあります。（一方は下書き状態）
自分のブログ記事数やカテゴリー状態によっては、自動生成 or 手作業でカスタマイズを選択しましょう♪
Cocoon機能②カラーパレット色の追加
Cocoonの記事内で使えるカラーパレット（背景色・文字色・枠色）に、最大6色までお好みの色を追加できます！
Cocoonのカラーパレットは、元から25色と豊富なバリエーション。
でも折角なら自分のブログテーマにばっちり合った色を使いたいですよね。
私の場合は、ブログのスキンカラーに合わせて4色追加しています。
ブログ全体のカラーを統一するだけで、一気にブログのデザイン性が上がります♪
追加方法は簡単です。
「WordPress管理画面」
→「Cocoon設定」
→「エディター」タブ
→「拡張カラーパレット色」お好みの色に変更する
詳しい設定方法は、わいひらさんの公式Cocoonサイトをどうぞ。
Cocoon機能③見出しへのジャンプリンク
ブログ記事を書いていると、
読者のために基本の導入説明文を多く書いたけど、知っている読者は飛ばして読みたいだろうな～
ということがありませんか？
そんなとき、Cocoonであれば簡単に「特定の見出しへのリンク」を作成できます。
（例）
この機能についてご存じの方は、本記事のまとめまで飛んでください！
※飛んだあとはPCやスマホの「戻る」ボタンで戻れます。
他のWordPressテーマだと、「アンカーを打ち込む」という作業が必要なのですが、Cocoonの場合は通常のURLリンクとほぼ同様の設定方法です。
記事目次のリンクを利用することで簡単に設定できます。
- リンクしたい文字部分を選択する。
- 「リンク」ボタンをクリックする。
- リンク先のURLを「ブログURL / 記事のスラッグ / #toc〇（目次の〇番目の見出し）」にする。
【本記事のまとめ見出しに飛ばす場合】
https://ten-mina.com/cocoon-benri/#toc7
URL最後の見出し番号は、「目次で表示されている全見出しの内の何番目か」です。
そのため、それぞれのブログ目次の設定によってH2、H3、H4どこまでの深さが表示されるか異なるのでご注意ください。
見出しリンク先URLの確認方法は、一度記事を公開したあと、記事の目次から目的の見出しにジャンプしたときのURLをコピー＆ペーストする方法が最も簡単です。
詳しい目次の設定方法については、いくみさんの下記ブログ記事で丁寧に説明されています。
まとめ：「Cocoon」の機能を使いこなしてさらに素敵なブログへ！
今回、Cocoonのおすすめ便利機能を３つ紹介しました。
意外と知らない方も多いのではないでしょうか？
（少なくとも私はだいぶ最近になって知りました…）
Cocoonには、本当にプラグイン不要の機能が盛り沢山！
「こんな機能ないかな～」と思ったら、とりあえず「Cocoon 〇〇〇（やりたいこと）」で検索すると大体ヒットしてしまうので驚きです。
無料テーマCocoonはブログ初心者の味方！
本記事が、みなさんのブログ運営の少しでも参考になれば幸いです。
「ブロックエディターが難しい…」という方には、さとしんさん（@__satoshin）の「Cocoonのブロックエディターの使い方解説記事」がおすすめです。
ブロックエディターの使い方を覚えて、記事執筆を快適にしましょう♪
- 【Cocoonサイトアイコン】5分で完了！ファビコンの作り方と設定方法
- 【Cocoonヘッダーロゴ】ヘッダーロゴの作り方と設定方法
- 【運営報告】無料テーマCocoonブログ5ヶ月目！PVは？収益は？SEO評価は？
コメント