ワードプレス無料テーマ【Cocoon】インスタグラムを埋め込む場合の注意点

スポンサーリンク

疑問

当サイトでは開設まもない頃から無料テーマ【simplicity2】を使用させてもらっていました。

そのsimplicity2の作者わいひらさんが、さらにパワーアップしたテーマ【Cocoon】をリリース。

7月には正式版が公開される予定なので「ほとんどの不具合は改善されているだろう」と、当サイトでも【Cocoon】へ移行をしてみました。

はっきり言って【Cocoon】最高です!

有料テーマはもういらなくなるのでは?という方がいるのも納得のクオリティ。

もはやワードプレス初心者が無料テーマを選ぶなら【Cocoon】一択かもしれません。

ただ、移行してみて、一点だけ気になる点が。

インスタグラムの投稿を埋め込んだ記事の表示が、少しおかしくなる部分がありました。

ブログにインスタ投稿を埋め込む方も多いと思うので、解決法を共有しておこうと思います。

※投稿画面ではクォーテーションマーク(引用符)は出ないようにCocoon側で修正が入りました。
ただ今も、スマホでモバイル表示させると一瞬だけ画面左上に引用符があらわれます。

スポンサーリンク

インスタ投稿を埋め込む場合にちょっとした不具合が

基本的には何の問題もなく移行が出来たのですが、記事の最初と最後になぜかクォーテーションマーク(引用符)が登場するようになってしまいました。

Cocoon不具合 引用

simplicityを使っていた時には、もちろんなかったものです。

Googleは記事内における引用の割合も見ているそうなので、記事の内容すべてが引用だと判定されるのはとても困ります。

引用だらけの記事=オリジナルコンテンツではない→低品質なコンテンツ→ペナルティ

と言う流れになったら…と考えると不安になってしまいました。

はちこ
はちこ

ペナルティは困るよ~!

Cocoonのフォーラムで聞いてみた!

Cocoonは無料テーマですが、フォーラムがとても充実しています。

simplicityの時もお世話になったのですが、質問を書き込んでしばらくすると、作者のわいひらさんだけでなく、Wordpressに詳しい方々がサポートをしてくれるのです!

まずは自分で検索するのが基本ですが、調べてもわからなかったので、フォーラムへ書き込みをしてみたところ、半日ほどで解決できました。

その時のやり取りはここから

Cocoon(simplicity)でインスタ投稿を埋め込む時は

教えていただいた方法がこちらになります。

CSSをeditor-style.cssに追記する

ひょっとすると、初心者の方が見るかもしれないので、順を追ってやり方を書いておきます。

まず、ダッシュボードから【外観】→【テーマの編集】にはいります。

Cocoon CSSの編集

右側の【ビジュアルエディターのスタイルシート(editor-style.css)】を選びます。

Cocoon CSS編集

以下のCSSをコピーして、子テーマのeditor-style.cssに追記します。

.instagram-media {
	position: relative !important;
}

ファイルを更新すればOKです!

全ての記事から、いらない引用符は消えていました。

埋め込み表示がおかしくなる(重複など)場合にも

フォーラムで解決方法を教えてくださったかうたっくさんによると、simplicityでも似たような現象が起きたことがあったようです。

その方の場合は、インスタ画像が重複してしまったり、表示そのものにも影響していたと書かれていました。

Instagramの埋め込みの表示が重なることについて

もしCocoonでも同じような現象が起きてしまった方がいたら、今回の方法を試してみるとなおるかもしれませんね。

その際にはバックアップをお忘れなく!

最後に

テーマのCSSをいじるのは、いつもドキドキするのですが、何事もなく修正出来てホッとしました。

simplicityの時は、わいひらさんがすぐに対応したようなので、そのうちCocoonでも修正されるかもしれませんね。

今回の記事を書く際にCocoonに標準機能として新たに加わった、吹き出しを使ってみたのですが

はちこ
はちこ

簡単だし、めっちゃ楽しい!

アホの子みたいに多用しそうで怖い💦

テーマの変更はむやみにやるもんじゃないですが、Cocoonに変えたのは正解でした👍

この記事が、読んでくださった方の参考になればと思います。

それでは最後まで読んでくださり、ありがとうございました!