おすすめカードの設定
この記事を書こうと思ったきっかけは、おすすめカードの画像が何度やっても貼り付けられなかったことに起因します。
また画像サイズの編集がうまくいかない人向けに、自分のやり方を提示します。
そのため対象読者は
- WordPressのテーマでCocoonを使っている人
- かつおすすめカードの画像貼り付けがうまくいかない
- スマートフォンで撮影した画像を、おすすめカード向けに大きさを調整したい
という方になります。
ちなみに検証しているWordPressのバージョンは6.0.1になります。
結論はおすすめカードの画像をアップロードするときに「http://」ではなく「https://」でアップロードする。
もう一つは2つあるアイキャッチ画像アップロードは「カテゴリ本文」の下にある「アイキャッチ」を使うことです。
では順に説明します。
おすすめカードとは
おすすめカードとはWordPressのテーマであるCocoonに搭載されている機能のことです。
筆者のブログはまだ構築中ですが、下を見てもらうと理解できると思うので解説します。
このおすすめカードは強調してクリック誘導を促したいカテゴリなどを、表示するときに使います。
主にカード数は4つであるブログがほとんどで、カードはいくらでも設定できますが偶数が推奨されています。
パソコンの見栄えを考えると、確かに4つがベストといえます。
設定方法
最初に「外観－メニュー」のリンクをクリックします。
画面が遷移したら、「メニューを編集」タグの「新しいメニューを作成しましょう」リンクをクリックします。
メニュー名を適当に入れて、画面左にある「メニュー項目を追加」から好きなものにチェックを入れて、「メニューに追加」ボタンを押します。
終わったら「メニューを保存」ボタンを押します。
次に「Cocoon設定-Cocoon設定」リンクをクリックします。
タブから「おすすめカード」をクリックして、「表示スタイル」、「カード余白」、「カードエリア左右余白」の設定をして、「変更をまとめて保存」ボタンを押します。
ここまでが、おすすめカードの設定です。
問題は下記の画像の加工と、アップロードについてです。
画像の加工について
おすすめカードで取り扱う画像は、うまく調整しないと画面のバランスが悪くなってしまいます。
筆者はまだ1つしか画像を入れていませんが、スマートフォンで撮った画像を推奨の大きさに加工して上げています。(下図)
当然スマートフォンで撮った画像をそのまま使うと、画面のバランスが悪くなるのでWeb上のサービスを使って大きさを調整しました。
画像ファイルはGoogleフォトに入れ、そのデータを加工する手順になります。
写真データの加工は以下のFotojetというサイトで行います。
画面右上の「ログイン」リンクをクリックします。
Facebook、Googleのアカウントで登録が完了するので、持っている人はこちらをオススメします。
ログインしたら元の画面の「写真を編集」ボタンを押します。
遷移した画面で、パソコン上に保存してある画像データを取り出します。
そのためグーグルフォトなどのサーバに保存している場合は、パソコンのディスクの中に入れておきます。
「開く-パソコン」からおすすめカードに使用する画像を選択します。
次に画面左にある「トリミング」をクリックし、サイズの設定を行います。
ここで大きさを揃えます。
ちなみに筆者は縦横比率9：16の、1,287×2,288(ピクセル)を入れています。(下は例なので筆者のサイズとは異なっています)
画面右の格子状をスクロールさせて、9：16の画像を作ります。
決まったら「適用」ボタンを押します。
9：16の画像ができたので、画面右上にある「ダウンロード-ダウンロード」をクリックし、名前とファイル形式を決めて「ダウンロード」ボタンを押します。
最後に「今すぐ無料で保存」ボタンを押して、ダウンロードします。
これで画像の作成は完了です。
トラブルシューティング(筆者の事例)
WordPressが指定した保存してあるパスが間違っている
早速WordPressに登録した写真データを、カテゴリを選択してアイキャッチ画像を選んでも、データが表示されません。
この原因を探すのにえらい時間を使いました。
グーグルで検索しても、この問題が1番目に表示されないのです。
そのため、20位まで網羅的に調べてようやく解決しました。
WordPressがサーバにアップロードした写真データを指定するときに、パスを間違えていたのです。(写真下参照)
正確には「http://～」ではなく、「https://～」でパスを指定し直すと、アイキャッチに画像がめでたく表示されました。
アイキャッチが2つあって、どっちに設定したら良いか？
これでおすすめカードに画像が表示できると思い、自分のサイトを開いたところ、まだ「NoImage」の状態が続いていました。
そこで再度カテゴリにあるアイキャッチを調べましたが、どうやらアイキャッチを設定するところが２箇所あり、おすすめカードに関係ないほうのアイキャッチを画像データとしてアップロードしてしまったようです。
正確に入れる場所は、「カテゴリ本文」の下にある「アイキャッチ」になります。
間違えても、「タグ本文」の下にある「アイキャッチ」にはアップロードしないでください。
こちらではおすすめカードに反映されません。
まとめ
以上おすすめカードの画像設定について、非常に苦労したトラブルシューティングを解説しました。
このWordPressがサーバ内の画像を開くときのパス指定はプロフィール画像の設定でも起きていました。(「http://」で開くのは誤りというあれです)
これが長引いた原因はグーグル検索の上位に、この悩みを解決することが書いてあるものがなかったからに他なりません。
こうして考えると、検索アルゴリズムは全面的に信用してはいけないという教訓を得ました。
ご参考になれば幸いです。
コメント