Cocoonの初期設定とカスタマイズ┃あいぽったぶるワードプレスのテーマをCocoonに変更した

あいぽったぶるワードプレスの
テーマを2021年11月に
Cocoonに変更しました。

すなわちブログのデザインが変わっています。

例えばスマホで閲覧した場合、
下部からメニューが開き、
[サイドバー]をタップすると
画面右端から開いて飛び出してくる。

この記事では、Cocoonの
初期設定やカスタマイズで気付いたこと、
使い方や困ったことなどを解説します。

Cocoonとは？

Cocoonとは無料のWordpressテーマ。
読み方はコクーン。

「あいぽったぶる」をCocoon 化

「あいぽったぶる」のWordpressテーマ
をCocoonに変更しました。
2021年11月に実施。

そして姉妹サイトも全て
Cocoonを適用しました。

ちなみに「あいぽったぶる」
その前のテーマは「Gush2」でした。
このテーマは既に開発終了で
配布停止となっています。

Cocoonの子テーマを有効化して使う

「Cocoon親テーマ」と「Cocoon子テーマ」
を両方ともダウンロード。

WordPressテーマに親テーマを新規追加し、
そのまま、有効にはしない。

次に子テーマ「cocoon-child-master.zip」
をインストールし、
この子テーマを「有効化」する。

Cocoonのアップデートがあった場合に、
もしCocoon親テーマでカスタマイズしていると、
上書きされて全部消えます。

子テーマでカスタマイズして使って入れば、
Cocoonのアップデートを適用しても
影響がでません。
子テーマでのカスタマイズはそのまま残ります。

カスタマイズは主に[Cocoon 設定]を使う

Cocoonには、
[Cocoon 設定]という項目があり、
カスタマイズを簡単にできる
至れり尽くせりのメニューが用意されています。

[Cocoon 設定]は、
左のメニューの上から7つめあたり。
[コメント]の下。
[外観]の上。

[Cocoon 設定]をクリックすると
右側に作業画面が開きます。

ホバーリングでポップアップが出たら、
その一番上の[Cocoon 設定]をクリック
をクリックしてください。

スキン設定「COLORS」を適用した

Cocoon自体がWordPressのテーマ
としてデザインが変わるわけですが、
Cocoonでは、Cocoonをカスタマイズした
デザインのセットを選べるように
なっています。

スキン（テンプレート）として
用意されており、
選ぶだけで美しい使いやすい
デザインが完成するわけです。

「あいぽったぶる」では、
「COLORS（ブルー）」を使っています。

今回はこのスキンにおける
カスタマイズのご紹介となりますが、
他のスキンや、独自にカスタマイズ
していく方でも共通の内容は、
そのまま使えるはずです。

サイトの色を統一させる（背景色・サイトキーカラー）

Cocoon設定[全体]タブで
色関係の設定ができます。

「サイトキーカラー」というのが、
h2やh3の見出しのワンポイント付けの色。

「背景色」というのが、
ブログ全体の背景色になります。
但し、ヘッダ以外。

もし、ヘッダーの色が
背景色や自分のイメージと違う場合、
Cocoon設定[ヘッダー]タブにある、
─「ヘッダー色：ロゴ部」の
[ロゴエリア背景色]
で色を指定すれば統一されます。

関連記事を表示するか

関連記事の自動表示は
あってもよいと思いますが、
あいぽったぶるでは、
関連記事を掲載していますので、
この機能ははずすことにしました。

コメントを表示しない

コメントは無い設定にしています。

投稿者の非表示

投稿者の名前が記事の下部に
表示されるようになっています。

この、記事ごとの
投稿者を表示しないようにする設定変更。

投稿日・更新日の表示

投稿した記事と固定ページに
投稿日と更新日が
表示されるようになっています。

この、記事ごとの
投稿日・更新日を表示しないようにする設定変更。

個別に選択できるように
なっていますので、
投稿日だけ表示して、
更新日は表示しない、
という設定にもできます。また、記事ごとに個別に
更新日を消したり変更したり、
非表示に設定できます。
記事編集画面の右メニュー、
「更新日の変更」から操作します。

目次はプラグイン「Table of Contents Plus」を使うことに

Cocoonでは目次を表示させることができます。

但し、あいぽったぶるでは、
プラグイン「Table of Contents Plus」
を使うことにしました。

Cocoon設定ではうまく表示できない
ことがあったというのが理由。
Cocoon設定は
プラグイン「Table of contents」
に似た目次設定だということですから、
ほぼ同じですが。

SNSのシェアボタンの非表示

SNSのボタンを上部はいらない
と思い、消すことにしました。
下部だけでよければ
「トップシェアボタン」を非表示にする。

また、表示させるシェアボタンが、

と、多数ありますが、
お好みのものだけにして、
他は非表示にしてもよいでしょう。

下部もいらなければ、
ボトムシェアボタンで非表示。

上下に表示させることも、
上だけ、下だけ、
上下とも表示させないようにもできます。

feedlyとRSS

feedlyとRSSはボタンが無くても
登録できるはずですし、
使っている方も限定されています。

よって非表示にしました。

記事上部のアイキャッチ画像を非表示

デフォルトで記事の上部に
アイキャッチ画像を自動的に
表示するようになっていますが、
不要であればこの機能を解除する。

なお、どの画像が
アイキャッチ画像になるのかについてですが、
記事編集画面の右メニュー、
「アイキャッチ画像」で設定できます。

アイキャッチが無い記事のサムネイル画像

最新記事一覧や人気記事一覧、
次の記事、前の記事などの表示
において、
記事タイトルに合わせて
サムネイル画像が表示します。

アイキャッチ画像が縮小されて
そのサムネイル画像となるわけですが、
このアイキャッチ画像が無い記事の
サムネイルを一括、共通で設定できます。

要は、何も無いより、
何らかのサムネ画像を付けておこう
という感じ。

アクセス解析やGoogleアドセンス

アクセス解析やGoogleアドセンスは、
[アクセス解析・認証]タブから設定できます。

Google Search Consoleの設定も同じ。

Google AnalyticsトラッキングIDは、
「UA-40000000-1」といった形式の文字列。
ご自身のGoogle Analyticsにログインして
ご確認ください。

その他のアクセス解析や、
Googleアドセンスは、
ヘッド用コードの入力欄に貼り付けます。

Googleアドセンス自動広告ソースは、
＜head＞＜/head＞に貼ります。

なお、Googleアドセンスの
広告サイズや掲載位置を
より細かく指定して掲載したい場合は、
ここではなく、ウィジェットや、
テーマエディターを使うことになります。

ホームイメージ画像

ホームイメージの画像を設定しておくと、
TwitterやFacebookなどで共有されたとき、
すなわちツイートされたときの
画像になるのだそうです。

デフォルトでは、
Cocoonのロゴ画像になっています。しかし、記事が共有された場合、
アイキャッチや記事内の画像が優先
されるようで、
ここで設定される画像になるとは
限らないようです。

あまり意味ないかもしれませんが、
指定したい画像がある方は、
アップロードしておけばよい
のではないでしょうか。

なお、記事編集画面の右メニューに
「SNS画像」がありますので、
個別に指定できます。
これを指定してない場合は、
アイキャッチ画像が使われるとのこと。

最新の記事を表示する

最新の記事を表示するには、
new_listというショートコードを入力すればよい。

細かいカスタマイズも可能。

当ブログでも、トップページとなる
固定ページに表示しています。

人気の記事を表示する

人気の記事を表示するには、
popular_listというショートコードを入力すればよい。

細かいカスタマイズも可能。

当ブログでも、トップページとなる
固定ページに表示しています。

ボックスやボタンを使う方法

記事編集ツールバーのプラグイン
「Advanced Editor Tools (旧名 TinyMCE Advanced)」
をお使いの場合。

以下の設定変更をしておくことで、
Cocoon独自のボックスやボタンを
記事に挿入できるようになります。

記事の編集画面にて、
ツールバーにある
[スタイル]をクリックすると
ボックスやボタンを使えます。

プラグイン「All in One SEO」いらない？

「All in One SEO」は、
SEOに関するプラグインで、
あいぽったぶるでも、
これまで使ってきました。

Cocoon自体がSEOに最適化されている
ということですし、
「All in One SEO」が重いし、
それほど凄い効果もないから不要、
いらないという噂も。

そもそも「All in One SEO」を
使いこなせていませんので、
テーマをCocoonに変えたタイミングで、
無効にしました。

スマホでPC版表示、パソコンでスマホ版表示の問題

Cocoonのデザインは、
スマホなどのモバイル表示と、
パソコンで見るデスクトップ版PC表示
が自動的に切り替わるようになっています。

しかしスマホでパソコン版表示だったり、
パソコンでスマホ版表示になったり、
といったような問題が発生しました。

調べに調べて、プラグイン
「WPtouch Mobile Plugin」が
原因だと判明。
無効にしたところ改善し、
問題は解決しました。

今では自動切り替えの
いわゆる
「レスポンシブデザイン」が
当たり前になっていますが、
昔はパソコンの画面で見る前提で
作られていました。
よってスマホでは極めて見にくかった。

それを自動的にスマホ閲覧では
スマホ用にデザインを切り替えてくれた
プラグインが
「WPtouch Mobile Plugin」だったのです。

すなわち最近になって
ワードプレスを使い始めた方には
関係ありません。
2017年頃か2018年頃までかと思いますが、
古いプラグインが入りっぱなしの方は、
チェックしてみてください。

見分けるヒントのひとつになるのが、
画面下部フッター付近に、
モバイル版とデスクトップ版の
切り替えボタンがあること。

サイドバーが無い、表示されない問題

最初にテーマでCocoonを有効化したとき、
サイドバーが表示されない状態で、
ワンカラムになってしまった。

どうしてかと困ったのですが、
しばらく原因を探って答えは簡単、
ウィジェットでサイドバーに
何も入れてなかったからでした。

しかし、テーマを変えても
ウィジェットを構成する内容は
変わらないはずで、
なぜかCocoonにすると
ウィジェットの内容が全て消えたりします。
つまり以前のテーマのカスタマイズが
引き継がれないことがある。

なぜかこれまで使ってきた
ウィジェットは、左下の
「使用停止中のウィジェット」
に移っていました。
今回、消えたわけではなかった。

しかし他のサイトでは、
Cocoonにして消えたウィジェット
もありましたので、
以前のテーマから変更される方は、
ウィジェットの内容や位置関係などを
コピーしたり記録しておくとよい
かもしれません。

まとめ　「あいぽったぶる」Cocoonに変更

あいぽったぶる、WordPressテーマを
Cocoonに変えて、
初期設定やカスタマイズをしたなかで
気付いたことをご紹介しました。

それにしてもこのCocoonは、
これだけ使いやすくて、
デザインもよくて無料。

カスタマイズや、
記事の装飾に使えるツールに関しても、
痒い所に手が届く仕様となっており、
本当に素晴らしい。

ご興味ある方は使ってみてください。
今、大人気のようで、
いろいろな記事を読むたび頻繁に見かけます。

今回、他にも書いてないことが
あったかもしれませんので、
思い出したら追記したいと思います。

あるいは他に使える機能などがあれば、
また別の記事でご紹介できればと考えています。

関連記事

Cocoon【ショートコード】「残り●日」カウントダウンの使い方・やり方
安いレンタルサーバーおすすめ4選（WordPress使えるレンタルサーバー）
レンタルサーバー転送量とPVの目安【比較】さくら、ロリポップ、Xサーバー、スターサーバー【2021年10月】
WordPressのoptions.phpで403エラーならWAF設定を無効にして解除（ロリポップ【レンタルサーバー】）
Search Regex が2.0バージョンアップでエラー解消 2020年5月（WordPressプラグイン）
SSLサーバー証明書、更新未完了のお知らせを放置して更新完了のお知らせを受信【エックスサーバー】
All-in-One WP Migration【プラグイン】WordPressサーバー移転が簡単すぎる┃引っ越し＋バックアップ
さくら→エックスサーバーへのWordPressサーバー移転（同一ドメイン・URL変わらない）
エックスサーバーでWordPressを削除する方法
ロリポップで無料の独自SSL設定をやってみた。┃設定方法・使い方