\ 主婦におすすめ!かんたん在宅ワーク4選 /

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

ブログ
ブログ

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

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

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

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

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

どれもブログの利便性デザイン性簡単に向上する機能ばかりです。

みなみ
みなみ

全部知っているあなたはCocoonマスター!?

関連記事
スポンサーリンク

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

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

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

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

(例) Cocoonの独自機能で作ったサイトマップ
 ※ 約10分で完成!

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

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

両方のサイトマップの作成方法をご紹介します。

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

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

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

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

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

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

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

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

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

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

Cocoonサイトマップの作成方法
  • 固定ページを新規作成する

  • ページタイトルを「サイトマップ」にする

    ※お好みのタイトルでOK

  • 本文の段落ブロックに以下のコードを入力する

    ※コピ&ペーストでOK

    [sitemap]
    サイトマップ作成画面
  • 作成したサイトマップページを分かりやすい場所(グローバルメニュー等)に設置する
みなみ
みなみ

これだけで、プレビュー画面や公開画面にはサイトマップが完成しています!

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

  • 固定ページの表示・非表示
  • カテゴリーページの表示・非表示
  • 月別アーカイブページの表示・非表示
Cocoonサイトマップ機能の詳細はこちら

Cocoonカスタマイズ情報が充実している、まちゃりささん@macharisa_blog)のブログがおすすめです!

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

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

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

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

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

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

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

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

みなみ
みなみ

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

オリジナルサイトマップの作成方法
  • イトマップ用の固定ページを2つ新規作成する

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

みなみ
みなみ

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

追加方法は簡単です。

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

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

(例)こちらの枠色はオリジナルで追加しています

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

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

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

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

みなみ
みなみ

読者のために基本の導入説明文を多く書いたけど、知っている読者は飛ばして読みたいだろうな~

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

そんなとき、Cocoonであれば簡単に「特定の見出しへのリンク」を作成できます。

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

他のWordPressテーマだと、「アンカーを打ち込む」という作業が必要なのですが、Cocoonの場合は通常のURLリンクとほぼ同様の設定方法です。

記事目次のリンクを利用することで簡単に設定できます。

Cocoonのオリジナル目次を利用している方のみ利用可能です。

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

【本記事のまとめ見出しに飛ばす場合】
https://ten-mina.com/cocoon-benri/#toc7

見出しリンクの編集画面
見出しリンクの編集画面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

みなみ
みなみ

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

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

ちなみに…

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

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

コメント

タイトルとURLをコピーしました