cocoon(コクーン)「おすすめカード」アイキャッチの画像が表示されない時の対応方法

cocoon おすすめカード PC&機材と雑記部屋

Cocoon(コクーン)「おすすめカード」で記事をわかりやすく分類

ブログを書いている方で、コクーン(Cocoon)を使われている方、お困りのことはありませんか?
わたしは約1カ月前からcocoonを使い始めました。
非常に多機能でこれが無料とは思えない機能です。加えて、わからないことがあれば、ネットで調べると解説の記事や動画がたくさん出てきます。
ただ、正直、レベルの高い内容はよくわからないものもたくさんあります。

そんなレベルの私の最近のつまづきと解消法について、解決できたのでご報告します。

初心者の方、ブログをはじめたばかりの方で同じ失敗をして、「おすすめカード」の設定をあきらめる方もおられるのではないかと思い紹介します。

cocoonの「おすすめカード」の設定をして、ブログの一番上の部分に、カテゴリーボタンを設定したいと思ったんです。下の画像の赤の点線の中のことです。

cocoon おすすめカード

Cocoonおすすめカード

おすすめカードを使うメリット

比較的簡単な操作で設定できメリットはいろいろあります。

  • 初心者のブログがなんとく立派に見えます。
  • 記事の分類ができて、興味のある記事にアクセスしやすくなります。
  • スマホで記事のカテゴリー検索をしようと思っても、スマホで、ブログのメニューを開く操作がわからない人も多い。(自分自身がそうでした・・)カードならこれなら操作がわかる。
  • Googleアドセンスの広告でメニューが選択しにくいことがあるが、「おすすめカード」を設定することで、ある程度は解消される。
    広告の設定方法があるようですが、もう少し勉強してから見やすい位置に変更する予定です。

(参考)おすすめカードの作り方 リンク先でのご紹介

Cocoonの操作については、「JIMMAN BLOG」、「ヒトデブログ」さんに教えていただきました。
ていねいでとても、わかりやすいです。
特にヒトデブログさんには、YouTubeやブログでいつも色々なことを教えてもらっています。感謝です。

【WordPress】コクーンで「おすすめカード」カテゴリー別の表示方法
サイトの表示画面は、SEO対策としても効果的です。デザインもよくなりますのでユーザーの印象もよくなりますよ。分かりやすく解説してますので参考にしてください。

 

【Cocoon】ブログを30分で「それっぽい」デザインにする手順をやってみた
こちらの投稿はブロガーのひとで様の動画が元です。実際にやってみて、若干苦労したところを記しています。ヒトデ様は「初心者から月1万円を稼げるようになる!」をコンセプトにされたヒトデブログも運営しておられます。月に100万円の収益を4年(202

 

トラブル「おすすめカード」のアイキャッチ画像が設定できない

順調に設定ができたはずですが、どうしたことか、私の場合、「おすすめカード」のアイキャッチ画像が設定ができないのです。(下の画像は設定ができた状態(OKの状態)です。)

トラブルの内容

  • 赤字の点線内でアイキャッチに使いたい画像を選択するのですが、いくら選択をしても、下の図のように画像が表示されない。選択をクリックしても「無反応」で何も起こらない。
    ブログ記事のアイキャッチ画像は何のトラブルなく表示されていました。
  • 「無反応」な状態で、画面一番下の「更新」ボタンを押して、メニューを閉じてブログを確認すると、パソコンから、アイキャッチ画像の表示ができない状態でした。
    スマホやIPADからは、表示されたりされなかったり、超不安な状態になる。
  • 大部分の環境で、表示したい画像部分に「NO IMANGE」と表示される。

cocoon おすすめカード

対応法としてやってみたこと(素人視点)

  • 画像サイズを変更(容量)する。画像の縦横比率を変更する。
  • 画像を削除して再度アップロードする。
  • ブラウザを変更して、ワードプレスにログインして同じ操作をやってみる。

ネットで調べてやってみたこと

  • プラグインで使っている「EWWW Image Optimizer」 があやしいと思って、下のリンクを参考に設定を変更しました。プラグインそのものを「無効化」もしてみました。
    →「効果なし」でした。、設定は元に戻しました。

 

EWWW Image Optimizer を導入したらアイキャッチが表示されなくなったときの対処法
WordpressのテーマをCocoonを利用している状態で、EWWW Image Optimizerを導入して有効化したら、アイキャッチが表示されなくなったときの、対処方法を紹介します。また、最後にアイキャッチをWebPで表示する方法も紹

 

トラブルの原因と解決方法 大事な「s」がない!

いろいろやりましたが、大苦戦していたところ、次のような記事を見つけました。

私のトラブルとは、内容的に少し異なる内容ものでしたが、「SSL化する前にアップロードした画像の可能性はないですか?」ヒントがありました。

おすすめカード画像 NO IMAGEの対処
初めて使わせていただいています。 おすすめカードをカテゴリーに設定した際、各カテゴリーに「投稿」→「カテゴリー」から全てにアイキャッチを設定していて、「Cocoon設定」→「おすすめカード」のプレビューでは各カテゴリーのアイキャッチ画像が表示されていますが、更新をかけてもサイトに反映されません。 ...

 

大事な「S」がない?

わたしがアイキャッチ画像に使用した画像は、SSL化した後の画像でした。
しかし、Wordpressの管理画面から、WordPressアドレス(URL)、サイトアドレス(URL)を確認してみると、「S」がないままになっているのです。

考えてみると、①サーバー契約→②ワードプレスのインストール→③SSL化とすすめましたから、下の赤字の部分に「S」がない状態になっていても不思議ではありません。
わたしと同じ失敗をしている初心者の方は多いかもしれません。

この2つのURLの違いについては、次のようなイメージのようです。

  • WordPressアドレス(URL): WordPressをインストールしたアドレス
  • サイトアドレス(URL) : 自分のブログのWordPressにアクセスするためのアドレス

 正しい表記 https://55hiace.net に変更!

この2つの部分を修正して、「https://55hiace.net」を「https://55hiace.net」に変更しました。これですべての問題は解決しました。

2つのURLのアドレスに「S」をつける変更後の状態について、
Wordpressへの再ログインを求められたくらいで、その他、変化やトラブルは今のところ、ありません。ようやくトラブル解決です。

たくさんの方が利用するcocoon(コクーン)は、いろいろな情報もありますし、安心です。ブログ初心者、いろいろと学ぶことが多いです。

WordPressでのブログをはじめたての方、私と同じ間違いはありませんか?Wordpressの設定部分の確認で何とかなるかもしれません。ご確認ください。

最後まで読んでいただきありがとうございました。励みなりますのでよろしければクリックをお願いいたします。

 

昔のビデオデジタル化・オンライン会議等で便利に使っている IOデータ HDREC/B2
私はパソコンやその周辺機器&機材好きです。 MS-DOSの時代から、一太郎&ロータス123等、Windowsが発売する前からパソコンを楽しんでいます。バンドや楽器をしてたので、簡単な音響さんも趣味で楽しんでいました。 私の趣味が仕事...

 

タイトルとURLをコピーしました