<PR>

今回は『Cocoonのサイドバーを非表示にする方法』を３つ解説していきます。

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

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

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

今回は『Cocoonのサイドバーを非表示にする方法』を３つ解説していきます。

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

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

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

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（旧All in One SEO Pack）は人気のWordPressプラグインです。

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のタイムラインの使い方

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設定 ⇒ おすすめカード』に進みます。

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

おすすめカードの表示

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

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

メニュー選択

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

表示スタイル

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

【画像のみ】

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

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

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

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

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

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

カード余白

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

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

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

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

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

カードエリア左右余白

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sattoga.com

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

• メルマガ
• 公式ライン
• 特定の商品紹介レビュー記事

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

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

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

sattoga.com

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

まとめ

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

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