当サイトでは開設まもない頃から無料テーマ【simplicity2】を使用させてもらっていました。
そのsimplicity2の作者わいひらさんが、さらにパワーアップしたテーマ【Cocoon】をリリース。
7月には正式版が公開される予定なので「ほとんどの不具合は改善されているだろう」と、当サイトでも【Cocoon】へ移行をしてみました。
はっきり言って【Cocoon】最高です!
有料テーマはもういらなくなるのでは?という方がいるのも納得のクオリティ。
もはやワードプレス初心者が無料テーマを選ぶなら【Cocoon】一択かもしれません。
ただ、移行してみて、一点だけ気になる点が。
インスタグラムの投稿を埋め込んだ記事の表示が、少しおかしくなる部分がありました。
ブログにインスタ投稿を埋め込む方も多いと思うので、解決法を共有しておこうと思います。
※投稿画面ではクォーテーションマーク(引用符)は出ないようにCocoon側で修正が入りました。
ただ今も、スマホでモバイル表示させると一瞬だけ画面左上に引用符があらわれます。
インスタ投稿を埋め込む場合にちょっとした不具合が
基本的には何の問題もなく移行が出来たのですが、記事の最初と最後になぜかクォーテーションマーク(引用符)が登場するようになってしまいました。
simplicityを使っていた時には、もちろんなかったものです。
Googleは記事内における引用の割合も見ているそうなので、記事の内容すべてが引用だと判定されるのはとても困ります。
引用だらけの記事=オリジナルコンテンツではない→低品質なコンテンツ→ペナルティ
と言う流れになったら…と考えると不安になってしまいました。

ペナルティは困るよ~!
Cocoonのフォーラムで聞いてみた!
Cocoonは無料テーマですが、フォーラムがとても充実しています。
simplicityの時もお世話になったのですが、質問を書き込んでしばらくすると、作者のわいひらさんだけでなく、Wordpressに詳しい方々がサポートをしてくれるのです!
まずは自分で検索するのが基本ですが、調べてもわからなかったので、フォーラムへ書き込みをしてみたところ、半日ほどで解決できました。
Cocoon(simplicity)でインスタ投稿を埋め込む時は
教えていただいた方法がこちらになります。
CSSをeditor-style.cssに追記する
ひょっとすると、初心者の方が見るかもしれないので、順を追ってやり方を書いておきます。
まず、ダッシュボードから【外観】→【テーマの編集】にはいります。
右側の【ビジュアルエディターのスタイルシート(editor-style.css)】を選びます。
以下のCSSをコピーして、子テーマのeditor-style.cssに追記します。
.instagram-media {
position: relative !important;
}
ファイルを更新すればOKです!
全ての記事から、いらない引用符は消えていました。
埋め込み表示がおかしくなる(重複など)場合にも
フォーラムで解決方法を教えてくださったかうたっくさんによると、simplicityでも似たような現象が起きたことがあったようです。
その方の場合は、インスタ画像が重複してしまったり、表示そのものにも影響していたと書かれていました。
もしCocoonでも同じような現象が起きてしまった方がいたら、今回の方法を試してみるとなおるかもしれませんね。
その際にはバックアップをお忘れなく!
最後に
テーマのCSSをいじるのは、いつもドキドキするのですが、何事もなく修正出来てホッとしました。
simplicityの時は、わいひらさんがすぐに対応したようなので、そのうちCocoonでも修正されるかもしれませんね。
今回の記事を書く際にCocoonに標準機能として新たに加わった、吹き出しを使ってみたのですが

簡単だし、めっちゃ楽しい!
アホの子みたいに多用しそうで怖い💦
テーマの変更はむやみにやるもんじゃないですが、Cocoonに変えたのは正解でした👍
この記事が、読んでくださった方の参考になればと思います。
それでは最後まで読んでくださり、ありがとうございました!