どのやり方も簡単にできますし、「固定ページだけサイドバーを非表示にする」といった設定も可能です。

サイドバーを非表示する目的に合わせて、ぜひ参考にしてみてください。

動画でも解説しています。

Cocoonのサイドバーを非表示にする３つの方法

Cocoon設定の全体設定でサイドバーを非表示にする

Cocoonのサイドバーを非表示にする一つ目の方法は『Cocoon設定の全体設定でサイドバーを非表示にする』やり方です。

Cocoon設定の全体設定を選択します。

下にスクロールしていくと、サイドバーの表示状態が選択できます。

【サイドバーを表示させている状態】

【サイドバーを非表示にした状態】

ページの形式を選んでサイドバーを非表示にできますので、利用目的に合わせて選んでみてください。

そもそもサイドバーにウィジェットを入れない

Cocoonのサイドバーを非表示にする二つ目の方法は『サイドバーにウィジェットを入れない』ことです。

『外観 ⇒ ウィジェット』を選択します。

ウィジェットエリアの『サイドバー』と『サイドバースクロール追従』からウィジェットを全て外すと、ブログのデザインが自動で1カラムになってサイドバーが非表示になります。

なお、このやり方の場合はサイドバーに何も入っていないので、ブログ内の全てのページでサイドバーが非表示となります。

投稿画面のページ設定でサイドバーを非表示にする

Cocoonのサイドバーを非表示にする三つ目の方法は『投稿画面のページ設定でサイドバーを非表示にする』やり方です。

このやり方では、1ページずつサイドバーを非表示にすることができます。

クラシックエディターを利用している方は、表示オプションで『ページ設定』にチェックを入れてください。

Gutenberg（ブロックエディター）を利用している方は、右上の設定（歯車マーク）を開いてください。

投稿画面のサイドメニューに表示されるページ設定の『ページタイプ』でデフォルト以外を選択すると、サイドバーが非表示となります。

【1カラム（広い）】

【1カラム（狭い）】

【本文のみ（広い）】

【本文のみ（狭い）】

『広い』を選択すると画面全体にカラムが広がりますが、『狭い』を選択すると『Cocoon設定 ⇒ カラム』で設定しているコンテンツ幅（デフォルトは800px）になります。

ただし、スマホで見たときは『広い』を選んでも『狭い』を選んでも違いはありません。

また、『本文のみ』を選択した場合は、サイドバーだけではなく、ヘッダーやフッターも非表示なります。

メルマガの登録ページのようなランディングページ（LP）を作る時には『本文のみ』はオススメの設定です。

補足①：Cocoonでスマホのサイドバーを非表示にする方法

Cocoonでスマホのサイドバーを非表示にするには、CSSに追記する必要があります。

『外観 ⇒ カスタマイズ』に進みます。

『追加CSS』を選択します。

Cocoon製作者のわいひらさんがGitHubで公開しているコードをコピーします。
⇒ わいひらさんがGitHubで公開しているコード

コピーしたコードを『追加CSS』に貼り付けて公開します。

CSSを追加すると、このようにスマホで見た時だけサイドバーが非表示になります。

補足②：『特定の記事』の『特定のウィジェット』のみ非表示にする方法

Cocoonのウィジェットの『表示設定』機能を使うと、『特定の記事』の『特定のウィジェット』のみ非表示にすることができます。

例えば、通常はサイドバーに表示させているアドセンス広告を、お問い合わせページだけ非表示にするといった設定が可能です。

【サイドバーにアドセンス広告】

【特定のページのみアドセンス広告を非表示にしている状態】

詳しい設定方法はこちらの記事で解説していますので、合わせて参考にしてみてください。

【Cocoon】ウィジェットの『表示設定』の使い方を解説

今回はCocoonのウィジェットの『表示設定』について解説していきます。この『表示設定』は、Cocoonだけに搭載されているオリジナル機能です。今すぐ使わなくても、覚えておくといつか役立つ時があるかもしれませんので、ぜひ参考にしてみてください。

sattoga.com

まとめ

今回は『Cocoonのサイドバーを非表示にする方法』を紹介してきました。

Cocoonのサイドバーを非表示にしたいときは、目的に合わせて、ぜひ今回の内容を参考にしていただければと思います。

All in One SEOを導入するとWordPressの各種SEO対策ができるようになります。

しかし、Cocoonを使うならAll in One SEOを導入する必要はありません。

そこで今回は『CocoonにAll in One SEOが必要ない理由』を３つ解説していきます。

なお、All in One SEOを削除する際の注意点もお伝えしますので、最後まで参考にしてみてください。

動画でも解説しています。

CocoonにAll in One SEOが必要ない３つの理由

CocoonにAll in One SEOが必要ない理由は、この３つです。

順番に詳しく解説していきます。

Cocoonの機能でほぼカバーできるから

CocoonにAll in One SEOが必要ない1つ目の理由は、Cocoonの機能でほぼカバーできるからです。

All in One SEOには様々な機能がありますが、実際に利用するのは主にこの4つです。

これらの設定はCocoonにだいたい搭載されています。

メタタグの設定

All in One SEOでは『検索の外観 ⇒ 全体設定』でサイト全体のメタタグの設定が、

また、投稿画面内では記事ごとにメタタグを設定することができます。

Cocoonも『Cocoon設定 ⇒ タイトル』でサイト全体のメタタグの設定が、

投稿画面内で記事ごとにメタタグを設定することができます。

このようにメタディスクリプションなどのメタタグは、Cocoonにも設定する機能があります。

アナリティクスなどのタグの設定

All in One SEOでは『一般設定 ⇒ ウェブマスターツール』で、アナリティクスなどのタグの設定ができます。

Cocoonでも『Cocoon設定 ⇒ アクセス解析・認証』で、アナリティクスなどのタグの設定ができます。

このようにアナリティクスやサーチコンソールなどのタグは、Cocoonにも設定する機能があります。

noindex設定

All in One SEOでは『検索の外観』からページの種類ごとにnoindex設定ができます。

Cocoonでも『Cocoon ⇒ SEO』からページの種類ごとにnoindex設定ができます。

Cocoonにはカテゴリー・タグページで『2ページ目以降をnoindex』とする設定があります。

記事数の多いカテゴリー・タグページをindexさせると低品質の重複コンテンツとされる可能性があるため、noindex設定に関してはCocoonのほうが優れていると言えます。

XMLサイトマップ

All in One SEOでは『サイトマップ』でXMLサイトマップを送信することができます。

しかし、CocoonにはXMLサイトマップを送信する機能がありません。

とは言え、XMLサイトマップを送信するだけのためにAll in One SEOを導入するのも微妙です。

XMLサイトマップの送信専用プラグイン『XML Sitemaps』を利用すれば大丈夫です。

詳しい設定方法はこちらで解説していますので、合わせて参考にしてください。

Google XML Sitemapsの使い方！サーチコンソールにサイトマップを登録する設定方法

今回は『Google XML Sitemapsの使い方』と題して、サーチコンソールにXMLサイトマップを登録する方法を解説します。XMLサイトマップをサーチコンソールに登録することで、検索エンジンのクローラーがブログ内を巡回して、記事が検索エンジンにインデックスされやすくなり、順位も付きやすくなります。

sattoga.com

両方使うとタグが重複してしまうから

CocoonにAll in One SEOが必要ない2つ目の理由は、両方使うとタグが重複してしまうからです。

具体的には、先ほど解説したこれらのタグが重複してしまいます。

例えば、こちらのソースコードを見ると、メタディスクリプションとメタキーワードが重複しているのが分かります。

タグが重複するのは、SEO的に良くも悪くも影響はないと言われています。

しかし、アナリティクスのタグは重複すると正しい計測ができなくなる場合があります。

また、両方の機能があると、どちらで設定したのか？自分でも把握しづらくなってしまいます。

ですから、Cocoon利用していてタグを重複させたくないなら、All in One SEOは導入しないほうが良いでしょう。

プラグインは少ないほうが良いから

CocoonにAll in One SEOが必要ない3つ目の理由は、プラグインは少ないほうが良いからです。

All in One SEOに限った話ではありませんが、WordPressのプラグインは増えれば増えるほど重くなり、エラーが起こるリスクが高まります。

「All in One SEOを使わなくてもXML Sitemaps使ったら一緒じゃん」と思った方もいるでしょう。

たしかにおっしゃる通りです。

All in One SEOにエラーが発生せず、XML Sitemapsにエラーが発生する可能性もあります。

しかし、All in One SEOは非常に高機能なプラグインなため、その分動作も重いと言われています。

SEO設定するために入れたはずのプラグインなのに、表示速度が遅くなってしまうというのは微妙です。

最近のGoogleは、ページの表示速度も検索ランキングのアルゴリズムに採用しています。

ですから、Cocoonを利用していて少しでもページの速度を上げたいなら、All in One SEOは導入しないほうが良いでしょう。

All in One SEOを削除する前の注意点

ここまでの話を聞いて「All in One SEOを削除しよう」と思ったCocoon利用者の方も多いと思います。

しかし、All in One SEOを削除する前に、今回お伝えしてきたこれらの設定をCocoon側の機能であらかじめ設定しておくのを忘れないでください。

なるべく重複期間を短くするために、休日などを利用して一気に設定し、All in One SEOを削除したほうが良いです。

また、All in One SEOを削除することで、WordPressブログ内部の構造が一部変わり、順位に影響を与える可能性もあります。

順位が上がる可能性がありますし、下がる可能性もあります。

上がるか下がるかはやってみないと分かりませんし、もちろん順位が変わらない可能性もあります。

ですから、All in One SEOを削除する場合は、その点も理解しておきましょう。

All in One SEOを削除した体験談

僕も長年All in One SEO Packを愛用していました。

しかし、Cocoonの前に利用していたテーマでもSEO設定の機能があったため、その時にAll in One SEO Packを削除しています。

削除したのは3年以上前なので、検索順位への影響は正直覚えていません。

しかし、それから定期的にブログを更新し続けてきたので、ブログの収益もPVも伸びています。

ですから、個人的には、しっかりブログを更新し続けるつもりなら、Cocoon利用者の方はAll in One SEOを削除したほうが良いと思っています。

更新し続けるつもりがなく放置するのであれば、検索順位への影響は運の要素が強いので、とりあえずタグの重複を解消し、そのままでも良いのではないかなと思います。

まとめ

今回は『CocoonにAll in One SEOが必要ない理由』を解説してきました。

Cocoonを使っている方でAll in One SEOを入れようか検討中だった方は、入れる必要はないです。

すでに入れていた方は、今回お伝えした注意点を考慮したうえで、慎重に判断していただければと思います。

Cocoonのタイムラインは何かの手順などを解説する記事にオススメの機能です。

タイムラインを使って解説すれば、読者に分かりやすく伝えることができます。

使い方は簡単なので、Cocoonを使っている方は、ぜひ参考にしてみてください。

動画でも解説しています。

Cocoonのタイムラインの使い方

Cocoonのタイムラインの使い方は、WordPressのエディターで変わるため、今回は以下の２つのパターンに分けてお伝えしていきます。

両方のやり方を覚える必要はありませんので、やりやすいほうで試してみてください。

また、Gutenbergのクラシックブロックは、クラシックエディターのビジュアルモードとほぼ一緒なので省略させていただきます。

なお、今回の解説ではこのようなタイムラインを作る手順を解説していきます。

Gutenbergのタイムラインブロック

CocoonのGutenbergのタイムラインブロックの使い方を解説します。

まず『ブロックの追加』をクリックし、Cocoonブロックの中から『タイムライン』を選択します。

↓↓↓

こちらがタイムラインブロックです。

右側のメニューは、右上の設定（歯車マーク）をクリックして開いておきましょう。

最初に、右メニューのアイテム数で、手順の数だけラベル数を増やしてください。

ポイント色ではラベル横のドットの色を変更できるので、お好みで選択してください。

設定が完了したら、あとは中身を入力していくだけです。

1. タイムラインのタイトルを入力
2. ラベル：『STEP1』や『手順1』など
3. タイトル：手順の内容

↓↓↓

ラベルやタイトルをクリックすると詳細内容を入力できますので、こちらも入力してください。

↓↓↓

また、タイムラインの中に、さらにブロックを追加することも可能です。

画像ブロックを使えば、このように画像もタイムライン内に入れられますので、こちらも活用してみてください。

Gutenbergのタイムラインブロックの使い方は以上となります。

クラシックエディターのビジュアルモード

クラシックエディターのビジュアルモードでタイムラインを使う方法を解説していきます。

Gutenbergのクラシックブロックでタイムラインを使いたい方も、こちらのやり方を参考にしてください。

クラシックエディターのビジュアルモードでは、ショートコードでタイムラインを入れていきます。

利用するショートコードは『タイムライン』と『タイムラインアイテム』の2つです。

まず初めにショートコードの『タイムライン』を入れます。

titleのダブルクォーテーション(“)の間に、タイムラインのタイトルを入力してください。

次にスラッシュ(/)が付いた後半のtimelineのコード部分を、Shiftキーを押しながら2回Enterを押して改行してください。

改行して空いた行に、今度はショートコードの『タイムラインアイテム』を入れます。

以下の3ヵ所を入力してください。

1. labelのダブルクォーテーション(“)の間：『STEP1』や『手順1』など
2. titleのダブルクォーテーション(“)の間：手順の内容
3. tiコードの間（]と[の間）：タイムラインの詳細内容

続けて、必要な手順の数だけショートコードの『タイムラインアイテム』を追加し、同様に入力していきます。

↓↓↓

下書き保存してプレビューを確認すると、このようにタイムラインが完成しています。

また、クラシックエディターのビジュアルモードの場合でも、『メディアを追加』からタイムライン内に画像を入れることができます。

画像を入れたいときは、スラッシュ(/)が付いているtiのコード部分を、Shiftキーを押しながら2回Enterを押して改行してください。

空いた行に画像を追加します。

プレビューを確認すると、このように画像が追加されています。

なお、クラシックエディターのビジュアルモードは、Gutenbergのタイムラインブロックとは違い、ラベルのドットの色の変更はできませんので、ご了承ください。

まとめ

今回は『Cocoonのタイムラインの使い方』を解説してきました。

やり方はエディターによって異なりますが、Gutenbergのタイムラインブロックのほうが簡単だったと思います。

タイムラインは見栄えも良く分かりやすいので、ぜひ今回の解説を参考に積極的に使ってみてください。

Cocoonでおすすめカードを設定すると、ヘッダー下に誘導したい記事の画像リンクを設置できます。

おすすめカードが表示されないときの対処法もお伝えしますので、ぜひ参考にしてみてください。

動画でも解説しています。

Cocoonのおすすめカードの設定手順

Cocoonでおすすめカードを設定する手順は、この２つです。

それぞれ詳しく解説していきます。

手順①メニューの作成

Cocoonでおすすめカードを設定するには、まず『外観 ⇒ メニュー』でおすすめカード用の記事を設定します。

『新しいメニューを作成しましょう』をクリックします。

メニュー名は何でも良いですが、特にこだわりがなければ「おすすめカード」にしておくと分かりやすいと思います。

メニュー名を入力したら『メニューを作成』をクリックしてください。

おすすめカードに設置したい記事を左側の『メニュー項目を追加』から選択し、記事の選択が完了したら『メニューを保存』をクリックします。

なお、このとき選択する記事数は４つが無難です。

２つだとパソコン画面で見たときに少ない印象がありますし、３つだとスマホで見たときに１つだけ下に位置するのでバランスが悪くなってしまうからです。

また、５個以上になるとスマホで見たときに３段で表示されて多すぎる印象があります。

ですから、おすすめカードに設置する記事はなるべく４つにしておきましょう。

手順②おすすめカードの設定

メニューの作成が完了したら、続いて『Cocoon設定 ⇒ おすすめカード』に進みます。

５つの設定項目がありますので、順番に詳しく解説していきます。

おすすめカードの表示

『おすすめカードの表示』では、以下の７つから表示させるページを選択できますので、お好みで選択してください。

なお、当ブログでは「読者さんには記事に集中してほしい」という気持ちがあるため『フロントページのみで表示』を選択しています。

メニュー選択

『メニュー選択』では、先ほど作成したメニュー名を選択してください。

表示スタイル

『表示スタイル』では、おすすめカードの表示方法を選択できます。

【画像のみ】

【画像中央に白文字タイトル】

【画像中央にラベルでタイトル】

【画像下段を黒背景にしタイトルを重ねる】

なお、おすすめカードで表示される画像は、記事ごとに設定しているアイキャッチ画像です。

当ブログではそれぞれのアイキャッチに文字を入れているため、ここでは『画像のみ』を選択しています。

「自分のブログにはどの表示スタイルが合うか？」悩んだら、一つずつ試してお好みで選んでください。

カード余白

『カード余白』にチェックを入れると、カードとカードの間に余白が入ります。

【チェックを入れた状態】

チェックを外すと、カード同士がくっついて表示されます。

【チェックを外した状態】

なお、当ブログでは『カード余白』にはチェックを入れています。

カードエリア左右余白

『カードエリア左右余白』にチェックを入れると、おすすめカードはメインエリアよりやや狭く表示されます。

【チェックを入れた状態】

『カードエリア左右余白』のチェックを外すと、おすすめカードはメインエリアよりやや広く表示されます。

【チェックを外した状態】

なお、当ブログでは『カードエリア左右余白』にもチェックを入れています。

おすすめカードが表示されない場合の対処法

Cocoonのおすすめカードが表示されないときは、以下の対処法をお試しください。

実は僕もおすすめカードを設定したときは表示されないトラブルが起きました。

WordPressの管理画面にログインした状態では表示されるのですが、ログアウトすると表示されないという現象です。

設定した当日はあまり時間もなかったので「また今度時間があるときに見直してみよう」と思って放置しました。

すると、翌日チェックしてみたらおすすめカードが表示されていたんです(笑)

ですから、おすすめカードが表示されない方は、まず１日待ってみるというのもぜひ試してみてください。

おすすめカードの用途について

おすすめカードの用途として向いている記事は「〇選系の収益記事」「ランキング系記事」です。

商品レビュー記事がダメなわけではありませんが、ヘッダー直下に特定の商品をおすすめする記事へのリンクが設置されているのは、ちょっとアピールしすぎな印象があります。

その点「〇選系の収益記事」や「ランキング系記事」は情報提供としての価値もありますので、そこまで売り込み臭は強くありません。

また、「〇選系の収益記事」や「ランキング系記事」はある程度記事数が溜まってから書くことが多いと思います。

設置する記事数も４つであることを考慮すると、おすすめカードはある程度記事数が増えてから設置するのが良いでしょう。

なお、Cocoonにはおすすめカード以外にも、ヘッダー下に誘導リンクを設置する機能があります。

集客系の記事も含めて色んな記事を読んでもらいたい場合はカルーセル（スライドショー）を入れるのも一つの手段です。

おすすめカードと比べると、カルーセルのほうが自然に多くの記事を紹介できます。

【超簡単！】Cocoonのヘッダー下にスライドショーを設置する方法

ブログのヘッダー下に設置されるスライドショーってかっこいいですよね？今回は『Cocoonのヘッダー下にスライドショーを設置する方法』を解説していきます。Cocoonなら『カルーセル』機能を使うことで簡単に設置できますので、ぜひ参考にしてみてください。

sattoga.com

また、以下の３つに誘導したい場合は、アピールエリアを設置したほうが良いです。

アピールエリアは一つのリンク先に誘導することに特化した機能です。

【Cocoon】ヘッダー下アピールエリアの設定方法

今回は『Cocoonのアピールエリアの設定方法』を解説していきます。アピールエリアには読んでほしい記事のリンクを設置したり、ブログ運営の思いなどを書いたりして、読者にアピールすることができます。アピールエリアの設置は簡単なので、ぜひ参考にしてみてください。

sattoga.com

このようにCocoonにはヘッダー下の設置できる誘導リンク機能が豊富なので、ぜひ目的に合わせて選んでみてください。

まとめ

今回は『Cocoonのおすすめカードの設定』について解説してきました。

おすすめカードを設置したい方は、ぜひ今回の解説を参考に設置してみてください。

CocoonのSNSボタンには『SNSシェアボタン』と『SNSフォローボタン』の２つがあり、どちらも簡単に設定することができます。

各設定項目を詳しく解説していきますので、ぜひ参考にしてみてください。

CocoonのSNSボタンの設定方法

動画でも解説しています。

SNSボタンのデザインはスキンで変わる

CocoonのSNSボタンのデザインは、選ぶスキンで変わります。

例えば、当ブログでも使っている『COLORS(グリーン)』のSNSボタンがこちらです。

『Fuwari -海老茶(えびちゃ)-』を選ぶと、このようなSNSボタンになります。

「なんで他のCocoonユーザーとSNSボタンのデザインが違うんだろう？」と思ったときは、このスキン設定をまず確認してみましょう。

SNSシェアボタン

SNSシェアボタンは、読者に記事をSNSで紹介してもらうために設置します。

Cocoonでは『Cocoon設定 ⇒ SNSシェア』で設定していきます。

なお、CocoonのSNSシェアボタンには『トップシェアボタン』と『ボトムシェアボタン』の２つがあり、それぞれ設定する必要があります。

【トップシェアボタンの設定】

【ボトムシェアボタンの設定】

『トップシェアボタン』と『ボトムシェアボタン』それぞれ設定する必要はありますが、設定する項目はほぼ一緒なので、まとめて解説していきます。

シェアボタンの表示

【トップシェアボタンの表示】

【ボトムシェアボタンの表示】

こちらにチェックを入れるとSNSシェアボタンが表示、チェックを外すと非表示なります。

別々で設定できるので、当ブログではトップを非表示、ボトムを表示にしています。

シェアメッセージ

『シェアメッセージ』はボトムシェアボタンの上に表示させるメッセージです（トップシェアボタンには設定できません）

不要な場合は、空欄にしてメッセージを削除することも可能です。

表示切替

『表示切替』では、表示させるボタンを以下の９つから選択できます。

なるべく自分のブログの読者が利用しそうなボタンを選びましょう。

表示ページ

『表示ページ』では、SNSシェアボタンを設置するページを以下の５つから選択できます。

通常ブログ記事は『投稿』で作成しますので、『投稿』にはチェックを入れておきましょう。

ボタンカラー

『ボタンカラー』では、以下の3種類からボタンのデザインを選択できます。

【モノクロ】

【ブランドカラー】

【ブランドカラー（白抜き）】

なお、当ブログではブランドカラー（白抜き）を使っています。

カラム数

『カラム数』では、SNSボタンを横並びで設置する数を設定します。

【3列にした場合】

【6列にした場合】

『表示切替』で選択したボタンの数も考慮しながら、バランスの良いカラム数を選択してください。

ただし、スマホでは画面サイズの影響で表示が変わることもありますので、スマホ表示も必ず確認しておきましょう。

ロゴ・キャプション配置

『ロゴ・キャプション配置』では、SNSのロゴと名称の配置を以下の３つから選択できます。

【ロゴ・キャプション 左右】

【ロゴ・キャプション 上下】

【キャプション・ロゴ 上下】

こちらはお好みで選択してください。

シェア数の表示

『シェア数の表示』にチェックを入れると、以下のようにシェアされた数が、ボタンの右下に表示されます。

ただし、シェアされていないと『0』と表示されてしまうため、人気がない記事と思われてしまう可能性もあります。

また、TwitterやLINEなど、SNS側の仕様でシェア数が表示されないものもありますので、その点は理解しておきましょう。

SNSフォローボタン

SNSフォローボタンは、読者に自分のSNSをフォローしてもらうために設置します。

Cocoonでは『Cocoon設定 ⇒ SNSフォロー』で設定していきます。

なお、SNSシェアボタンは本文の上下に設置可能でしたが、ここから解説するSNSフォローボタンは本文の下のみ設置可能となっています。

フォローボタンの表示

SNSフォローボタンを表示させるには、こちらにチェックを入れます。

なお、必須ではありませんので、不要な場合はチェックを外して非表示にしても構いません。

フォローメッセージ

『フォローメッセージ』には、SNSフォローボタンの上に表示させるメッセージを入力します。

『#{author}』と入れると、投稿者名が入力されますが、不要なら削除しても構いません。

また、フォローメッセージ自体が不要な場合は、削除して空欄にすることも可能です。

SNSサービスのURL

『SNSサービスのURL』は、WordPress管理画面の『ユーザー ⇒ プロフィール』で入力します。

こちらで入力したSNSサービスのフォローボタンは、このように表示されます。

SNSのフォロワー数を増やしたい方は、こちらの入力を忘れずに行いましょう。

表示ページ

『表示ページ』では、SNSフォローボタンを設置するページを以下の５つから選択できます。

SNSフォローボタンを設置する場合は、少なくともブログ記事を書く『投稿』にはチェックを入れておきましょう。

feedlyの表示

feedlyはRSSを利用してブログの更新通知を受け取るサービスで、RSSリーダーの中では最も人気です。

『feedlyの表示』にチェックを入れると、左側の緑色のボタンが表示されます。

RSSの表示

Cocoonでは、feedly以外のRSSサービス利用者のために、RSS取得用ボタンを表示させることもできます。

『RSSの表示』にチェックを入れると、右側のオレンジ色のボタンが表示されます。

ボタンカラー

『ボタンカラー』では、以下の3種類からSNSフォローボタンのデザインを選択できます。

【モノクロ】

【ブランドカラー】

【ブランドカラー（白抜き）】

デフォルトユーザー

複数人でブログを運営している場合、投稿・固定ページのSNSフォローボタンは、投稿者のSNSが設定されます。

こちらの『デフォルトユーザー』では、カテゴリーやタグページにSNSボタンを設置した場合、フォローボタンに誰のSNSを設定するかを選択します。

カテゴリー・タグページにSNSフォローボタンを設置しない場合や、一人でブログを運営している場合は、特に気にする必要はありません。

しかし、複数人で運営している場合は、メインとなる管理者を設定しておくと良いでしょう。

フォロー数の表示

『フォロー数の表示』にチェックを入れると、SNSフォローボタンにフォロー数が表示されます。

しかし、フォロワーがいない場合は『0』と表示されます。

また、TwitterやYoutubeのように、SNS側の仕組みでフォロー数が表示されない場合もあります。

feedlyの購読者数

先に解説した『フォロー数の表示』にチェックを入れても、feedlyの購読者数は正確に表示されない場合があります。

その際はこちらの『feedlyの購読者数』に数値を入れることで、フォロー数を表示させることができます。

【最後に】当ブログで行っている設定方法

今回は『CocoonのSNSボタンの設定方法』について解説してきました。

最後に当ブログで行っているSNSシェアボタンの設定をご紹介します。

この下に表示されているSNSシェアボタンと同じ設定にしたい方は、上記の設定を参考にしてみてください。

なお、このブログではSNSフォローボタンは非表示にしています。

SNSフォローボタンはプロフィールにも表示されるためですが、こちらも同じように設定したい方は、プロフィール設置の解説記事も合わせて参考にしてみてください。

Cocoonでプロフィールを設置する方法！画像が表示されない時の対処法も解説

「Cocoonでプロフィールを設置したい」と思っても、どこで設定したらいいのか分からないですよね？今回は『Cocoonでプロフィールを設置する方法』を分かりやすく解説していきます。設定方法は非常に簡単ですし、一度設定しておけばずっと表示されますので、ぜひ参考にしてみてください。

sattoga.com

この『表示設定』は、Cocoonだけに搭載されているオリジナル機能です。

目立ちませんが、実際に使ってみると非常に便利です。

今すぐ使わなくても、覚えておくといつか役立つ時があるかもしれませんので、ぜひ参考にしてみてください。

【Cocoon】ウィジェットの『表示設定』について解説

動画でも解説しています。

『表示設定』とは？

Cocoonのウィジェットの『表示設定』は、この２つが設定できる機能です。

例えば『通常はサイドバーに設置している広告を、お問い合わせページにだけ表示させない』という設定も可能です。

【通常の例】

【お問い合わせページで非表示にした例】

『表示設定』の使い方

Cocoonの『表示設定』はウィジェットで設定していきます。

表示設定の使い方は、以下の５つの手順です。

①特定のページだけ表示、または非表示にしたいウィジェットの『表示設定』をクリックします。

②『ウィジェットの表示』で『表示 or 非表示』を選択します。

③設定するページの形式を選択します。

④ページの形式が『カテゴリー』『ページ』『著者』『タグ』のいずれかの場合は、設定するページにチェックを入れます。

ページの形式が『投稿』『固定ページ』のいずれかの場合は、記事ページのIDを入力します。

なお、記事IDはページ一覧で、タイトル上にカーソルを合わせると左下に出るURLで確認できます。

⑤最後に『保存』をクリックして完了です。

『表示設定』が便利な場面

Cocoonの『表示設定』を使うと、このような設定もできます。

ちなみに当ブログでも、このような設定を行っています。

Cocoonはウィジェットもウィジェットエリアも豊富なので、アイディア次第で用途はかなり広がるでしょう。

まとめ

今回はCocoonのウィジェットの『表示設定』について解説してきました。

『表示設定』機能を使えば、あらゆるページで特定のウィジェットの表示/非表示が可能になります。

Cocoonだけに搭載されているオリジナル機能で、実際に使ってみると非常に便利なのが分かってもらえるはずです。

使い方も簡単なので、ページごとに表示方法を分けたい時は、ぜひ試してみてくださいね。

Cocoonならプラグイン不要で目次を設置できますが、表示位置などの細かい設定も簡単に行うことができます。

最後には『目次が表示されない原因』もまとめていますので、ぜひ参考にしてみてください。

動画でも解説しています。

Cocoonの目次機能の使い方

Cocoonの目次機能は『Cocoon設定 ⇒ 目次』で設定できます。

いくつか設定項目がありますので、以下で詳しく解説していきます。

目次の表示

Cocoonで目次を表示させるには、こちらの『目次を表示する』にチェックを入れます。

目次が表示されないときは、まずこちらにチェックが入っているか確認しましょう。

表示ページ

ここでは目次を表示させるページを選択します。

投稿ページはブログの記事ページになりますので、必ずチェックを入れておきましょう。

他の３つは必要であればチェックを入れてください。

なお、記事の投稿画面の『ページ設定』メニューには、『目次を表示しない』のチェック欄があります。

特定の記事だけ目次を表示させたくないときに便利なので、合わせて覚えておきましょう。

目次タイトル

こちらで設定したタイトルが目次上に表示されます。

『目次』や『content』など、お好みで設定してください。

目次切り替え

『目次の表示切り替え機能を有効にする』にチェックを入れると、読者が目次の『開く/閉じる』を選択できるようになります。

このとき『最初から目次内容を表示する』にもチェックを入れておけば、最初から目次が開いた状態になります。

また、『目次の表示切り替え機能を有効にする』チェックを外すと、読者は目次の『開く/閉じる』を選択できず、常に開いた状態になります。

表示条件

Cocoonの目次には、H2やH3などの見出しが表示されています。

『表示条件』では、何個以上見出しがある記事に目次を表示させるかを設定します。

目次が表示されないときは、そもそも見出しタグを使って見出しを設定しているか？

また、表示条件の個数以上の見出しを設定しているか確認しましょう。

ちなみに見出しタグの使い方はこちらの記事で解説していますので、合わせて参考にしてみてください。

【ブログ記事】上位表示して集客できる！見出し構成の作り方

ブログ記事を書くときは、先に見出し構成を作るのがオススメです。見出しを作ってから本文を書いたほうが、迷わず書きやすくなるからです。そこで今回は『ブログ記事の見出し構成の作り方』を解説していきます。

sattoga.com

目次表示の深さ

『目次表示の深さ』では、H2～H6まで、どの見出しまで目次に表示させるか設定します。

個人的なオススメは『H3』か『H4』ですが、長い記事が多い方は『H2』まででも良いと思います。

なお、この目次表示の深さは、記事ごとに変更することはできません。

自分のブログ全体で適切な設定を考えてみてください。

目次ナンバーの表示

『目次ナンバーの表示』では、リストの表示形式を選択できます。

【例：数字（デフォルト）の場合】

それぞれ試してみて、お好みの設定を選んでみてください。

目次の中央表示

『目次の中央表示』にチェックを入れると、目次が真ん中に表示されます。

チェックを外すと目次が左寄せになります。

どちらかと言えば中央寄せにしているブログが多く見栄えも良いので、個人的にはチェックを入れておいたほうが良いと思います。

目次の表示順

『目次の表示順』は、Cocoon設定の『広告』機能（アドセンスなど）を利用している場合に必要な設定箇所です。

チェックを入れると、目次が先で、広告が後に表示されます。

チェックを外すと、広告が先で、目次が後に表示されます。

読者にどちらを先に見てもらいたいかを考えて設定しましょう。

見出し内タグ

『見出し内タグ』は目次ではなく、見出しの機能です。

こちらにチェックを入れると、見出しの文字を装飾した場合などに反映されます。

例えば『見出し内タグ』を入れて、見出しの文字の背景色を黄色にすると、このようになります。

見出しの文字を装飾したい方は、試してみてください。

目次の設定が反映されない原因は？

ここまで解説してきた目次の設定が反映されない方は、プラグインの『Table of Contents Plus』を利用している可能性があります。

Table of Contents Plusは目次用のプラグインのため、有効化していると、Cocoonの目次機能より優先されます。

ですから、Cocoonを利用するならTable of Contents Plusは不要です。

特に、Cocoonにテーマ変更した方は、以前利用したプラグインがそのまま残っている可能性がありますので、気を付けましょう。

【最後に】目次が表示されない原因

今回は『Cocoonの目次機能の使い方』について解説してきました。

最後に目次が表示されない原因をまとめておきます。

目次が表示されないときは、上から順番に設定を確認してみてくださいね。

フッターの背景色の変更、ロゴ画像の設置、メニューの編集など、Cocoonなら簡単にカスタマイズ可能です。

それぞれの場所ごとに詳しくお伝えしていきますので、ぜひ参考にしてください。

なお、Cocoonのフッターのデザインは利用しているスキンで異なります。今回の解説では『COLORS(グリーン)』を使っています。

Cocoonのフッターをカスタマイズする方法

動画でも解説していますので、合わせて参考にしてみてください。

フッターの背景色・文字色

Cocoonのフッターの背景色・文字色は『Cocoon設定 ⇒ フッター』で変更できます。

フッターの色も選択しているスキンで異なりますが、お好みの色に変更したい時は、こちらで設定してください。

フッターロゴとクレジット

Cocoonのフッターロゴとコピーライトも『Cocoon設定 ⇒ フッター』で設定します。フッターメニューの位置もこちらで設定します。

①『フッター表示タイプ』ではフッターロゴ・メニュー・クレジットの配置を決めます。

②『フッターロゴ』ではロゴ画像を設定できます。なお、空欄のままだとフッターにはヘッダーロゴが設置され、ヘッダーロゴも未設置の場合はブログタイトルが表示されます。

③フッターに表示させるクレジット（コピーライト）の形式を選択できます。

フッターメニュー

Cocoonのフッターメニューは『外観 ⇒ メニュー』で設定します。

メニュー用のページを設定したら、メニュー設定で『フッターメニュー』にチェックを入れれば完了です。

なお『Cocoon設定 ⇒ フッター』の一番下で、フッターメニューの幅を設定できます。

『メニューの幅をテキストに合わせる』にチェックを入れた状態がこちらです。

『メニューの幅をテキストに合わせる』のチェックを外すと、メニュー幅が上で設定したpx数に均一化されます。

メニュー幅もお好みで設定してみてください。

フッターモバイルボタン

Cocoonではスマホ表示の際に、フッターにボタン型メニュー（フッターモバイルボタン）を設置できます。

フッターモバイルボタンを設置するには２つの設定が必要です。

まず一つ目に、『外観 ⇒ メニュー』で『フッターモバイルボタン』にチェックを入れます。

もう一つが、『Cocoon設定 ⇒ モバイル』でも『フッターモバイルボタン』にチェックを入れます。

フッターモバイルボタンはこの２つの設定を行わないと表示されませんのでお気を付けください。

さらに、『Cocoon設定 ⇒ モバイル』には『モバイルボタンの固定表示』という項目があります。

こちらにチェックを入れると常にモバイルボタンが表示され、チェックを外すと下にスクロールしたときには非表示なります。

こちらもお好みで設定しておきましょう。

フッターウィジェット

Cocoonのフッターウィジェットは、左・真ん中・右の3ヵ所に設置できます。

設定は『外観 ⇒ ウィジェット ⇒ フッター左・中・右』で行います。

プロフィールや人気記事、Twitterの埋め込みなど、お好みで設定してみてください。

なお、フッターウィジェットを入れ過ぎると表示速度に影響が出るため、このブログではあえて何も入れていません。

また、スマホ表示の際は『フッター（モバイル用）』に設置したウィジェットが表示されます。

スマホの場合もたくさんウィジェットを入れ過ぎると、表示が縦に長くなりすぎるので、設置する場合はなるべく厳選することをオススメします。

まとめ

今回は『Cocoonのフッターをカスタマイズする方法』を解説してきました。

Cocoonならフッターも細かく設定できますので、ぜひ自分好みのデザインに設定してみてくださいね。

CocoonならCSSをいじらなくても、誰でも簡単にフォントサイズや行間を調整できます。

自分好みの見やすいサイズに変更したい方は、ぜひ参考にしてみてください。

なお、この記事では『フォントサイズ＝文字の大きさ』『行間＝文章の行と行の間』と定義して解説していきます。

動画でも解説しています。

Cocoonのフォントサイズの変更方法

Cocoonのフォントサイズは『Cocoon設定 ⇒ 全体』で変更できます。

サイトフォントの文字サイズがパソコンで見たときのフォントサイズ、モバイルサイトフォントはスマホで見たときのフォントサイズです。

デフォルトではパソコンのフォントサイズが18px、スマホ表示は16pxとなっています。

今のサイズを基準に大きくしたり小さくしたり、お好みで変更してみてください。

なお、全体設定では、他にも以下の項目が設定できます。

気になる箇所があれば、こちらも合わせて設定しておきましょう。

Cocoonの行間の変更方法

Cocoonの行間は『Cocoon設定 ⇒ 本文』で変更します。

『行の高さ』と『行の余白』の２つがありますので、それぞれ解説していきます。

行の高さ

行の高さはデフォルトで『1.8』になっています。単位はありません。

これはフォントサイズ(フォントの高さ)を『1』として、上下にいくつスペースを空けるか設定します。

ですから、デフォルトの『1.8』の場合、『(1.8－1)÷2』で上下に『0.4』ずつスペースを空ける設定になっています。

厳密に言うと、この『行の高さ』が行間になります。

『Shiftキー+Enter』で改行したときは、行と行の間が『0.4＋0.4＝0.8』となります。

行の余白

行の余白はデフォルトで『1.4em』になっています。（1emがフォントサイズと同じ高さ）

Enterキーで改行したときの行間部分が『行の余白』になりますので、こちらは厳密に言うと『段落の間隔』の調整となります。

『Shiftキー+Enter』で改行したときは段落ができませんので、行の余白分のスペースも反映されません。

Enterキーで段落を作ったときのみ、行の余白分のスペースが発生すると覚えておきましょう。

まとめ

今回は『Cocoonのフォントサイズと行間の変更方法』について解説してきました。

また、『行の高さ』と『行の余白』についてまとめると、以下の図のようになります。

行間の設定は考え方がちょっと分かりにくいですが、何度か変更してみると理解できますので、試しながら徐々に慣れていきましょう。

Cocoonならリンクをおしゃれなカード型にするのも簡単です。

ブログカードが表示されない時の対処法もお伝えしますので、ぜひ参考にしてみてください。

動画でも解説しています。

ブログカードの設定方法

Cocoonのブログカードは『Cocoon設定 ⇒ ブログカード』で設定します。

『内部ブログカード』と『外部ブログカード』の違い

ブログカードの設定は『内部ブログカード』と『外部ブログカード』の２つで行います。

【内部ブログカード】

内部ブログカードは内部リンクのブログカードです。

自分のブログURLをブログカードにする場合の設定となります。

【外部ブログカード】

外部ブログカードは外部リンクのブログカードです。

他のブログやサイトURLをブログカードにする場合の設定となります。

内部と外部それぞれで設定を行いますが、同じ設定箇所が多いので、次からは合わせて解説していきます。

ブログカード表示

ブログカードを表示させるには、まずこちらの『ブログカード表示』にチェックを入れる必要があります。

サムネイルスタイル

『サムネイルスタイル』ではサムネイルの位置を選択できます。

【左側】

【右側】

こちらはお好みで設定してください。

日付表示

『日付表示』は内部ブログカードのみにある設定項目です。

日付表示の有無を選択できます。

【なしの場合】

【投稿日(更新日)にした場合】

こちらもお好みで設定してください。

リンクの開き方

リンクの開き方にチェックを入れると、リンク先が新しいタブ（別タブ）で開きます。

内部ブログカードは同じブログ内なので同じタブで開いたほうが無難ですから、チェックを外したほうが良いです。

外部ブログカードは別のブログなので、読者が戻ってきやすくするために新しいタブで開くように、チェックを入れることをオススメします。

なお、HTML形式のリンクタグを設置している場合は、その設定が優先されます。

キャッシュの保存期間

『キャッシュの保存期間』は外部ブログカードのみにある設定項目です。

外部サイトのOGP情報を取得するのは表示に時間がかかるため、Cocoonでは外部ブログカードのみキャッシュ機能で一定期間保存して表示されています。

ここではその表示期間を設定できますが、デフォルトでは30日間となっています。

なるべく新しい情報を表示させたい場合は期間を短くすることもできますが、その場合表示に時間がかかりやすくなるためお気を付けください。

特に気にしない方は、デフォルトの30日のままでOKです。

キャッシュの更新

『キャッシュの更新』は外部ブログカードのみにある設定項目です。

こちらにチェックを入れた状態で外部ブログカードをクリックすると、新しいキャッシュを取得できます。

用途としては、外部リンク先の情報(タイトルやサムネイルなど)が変わったことに気が付いたとき。

キャッシュの更新にチェックを入れた状態で自分でブログカードをクリックすれば、新しい情報にキャッシュが更新されます。

更新したらチェックを入れておく必要はありませんので、また外しておきましょう。

Cocoonのブログカードの使い方

クラシック編

ここではクラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックでブログカードを使う方法をお伝えしていきます。

【クラシックエディターのビジュアルモード】

【Gutenbergのクラシックブロック】

クラシックでは、URLの上下に一行ずつスペースを空けてURLを貼ると、

このようにブログカードが表示されます。

また、URLを選択して『スタイル』から『囲みブログカードラベル』を設置することができます。

↓↓↓

こちらもお好みで設定してみてください。

ブロック編

ここではGutenbergのCocoonブロックを使ってブログカードを設置する方法を解説します。

まず『ブロックを追加 ⇒ すべて表示』をクリックします。

Cocoonブロック内から『ブログカード』を選択します。

ブログカードブロック内にURLを入力するだけで、

このようにブログカードを表示させることができます。

また、右上の設定（歯車マーク）をクリックすると、ラベルを設置することができます。

↓↓↓

よろしければこちらもお好みで設置してみてください。

ブログカードが表示されない原因と対処法

ここではCocoonのブログカードが表示されない原因と対処法を４つ解説していきます。

ブログカードが表示されない時は、こちらをご確認ください。

『ブログカード表示』にチェックが入っていない

設定方法の解説でもお伝えしましたが、『ブログカード表示』にチェックが入っていないとブログカードは表示されません。

『ブログカード表示』は、『内部ブログカード』と『外部ブログカード』のそれぞれにチェックを入れる項目がありますので、チェックを入れ忘れていないかご確認ください。

URLに日本語が含まれている

URLに日本語が含まれていると、ブログカードは表示されません。

↓↓↓

URLに日本語が含まれている場合は、記事ページのアドレスバーからURLをコピーしてください。

コピーしたURLをWordPressの投稿画面に貼り付けると自動でPunycode化されますので、ブログカードも表示されるはずです。

上下に１行空いていない

クラシックでは、URLの上下に1行ずつ空きがないとブログカードは表示されません。

↓↓↓

ブログカードを表示させるには、このように上下に1行ずつ空けて記事を投稿してください。

前後にスペースが空いている

Cocoonブロックのブログカードでは、前後にスペースが空いているとブログカードが表示されません。

↓↓↓

ブログカードを表示させるには、このように前後にスペースがないようにURLを貼り付け(入力)してください。

あえてブログカード化しない方法

長くブログを運営していると「ここはブログカード化させたくない」というときもあると思います。

ブログカード化させないようにするには、URLの前に『!』を入れるだけです。

↓↓↓

確実にブログカード化させたくないときのために、このやり方も覚えておいてください。

まとめ

今回は『Cocoonのブログカードの使い方』について解説してきました。

クラシックでもブロックでも使い方は非常に簡単でしたね。

しかし、ブログカードはちょっとしたことで表示されないこともあります。

記事内に急にURLだけが表示されていると読者に違和感を与えてしまいますので、記事投稿時はしっかり表示されているか確認しておきましょう。