cocoonでおすすめカードの表示とカテゴリーの画像設定の方法を世界一わかりやすく解説!!

ブログ

どうもおすすめカードの設定をするのに2日もかかっためーぷるです!

いや

かかりスギィィィ!!!

でも本当に全然わからなかったんですよ笑

そんなわけで今日はcocoonテーマおすすめカードの設定カテゴリー画像の設定方法世界一わかりやすくお教えします!

メニューをつくる!

まずおすすめカードとはこの上に出てくるやつですね!

スマホで見ると横に2つ分しか幅がないので4つにしておくと見やすいです!

おすすめカードをつくるにはまずメニューの設定が必要です!

メニューができている人は飛ばしてOKです!

ここではカテゴリーをメニューにしますのでまずカテゴリーの作成をします!

左側のメニューバーから投稿→カテゴリーを開くと

この画面に行くので作りたいカテゴリーの名前を入れてカテゴリーを作ってください

今回は4つ作成してみましょう!

カテゴリーが作れたら今度はメニューを作ります

メニューは記事、カテゴリー、固定ページなどをまとめたものですね

左のメニューバーから外観→メニュー→新しいメニューを作成しましょうを押し下にスクロールすると

このページに行きますのでメニュー名を入れてメニューを作成します

今回はカテゴリーなのでカテゴリーから選択をしてメニューに追加します!

これで下準備はOKです!

おすすめカードをつくる

おすすめカードの作り方はめちゃくちゃ簡単です!

cocoon設定から

中断右側のおすすめカードを選択します!


カードの表示は表示させたいページを選択できますが一旦全ページにしましょう

表示したくない場所があればまたここからカスタムができます!

そして先ほど作ったメニューを選択します

表示スタイルは写真のマークを押すとイメージが出てきますのでお好みのものを選択してください

余白設定も適宜!

そして変更をまとめて保存を押すだけ!

これでプレビューを開くと

バッチリできているはずです!が、

上の画像の右半分もそうですが画像が入っていませんよね?

次はカテゴリーに画像(アイキャッチ)を挿入する方法をお教えします

おすすめカードに画像を入れる方法

ここがめちゃくちゃわからなかった笑笑

全然調べても出てこないし笑

まず画像を用意します!

このアイキャッチは表示する大きさに制限があるので以下の大きさにリサイズする必要があります

横1440px × 縦810px

横1500px × 縦844px

横2560px × 縦1440px

画像のリサイズは自分はcanvaっていうアプリでやっているのでご紹介します!

やり方がわかる人は飛ばしてOKです!

canvaというアプリを入れてください!

無料で使いやすいのでおすすめですよ!

まず開いたら

右下の+ボタンを押して

上のカスタムサイズを選択します

そして縦横を先程の比率で入れてデザインを作成すると

指定した大きさの白紙が出てきますので右下のプラスを押して

画像を選択し画像を挿入

これをびー!っと引き伸ばして

上にある↓マークを押して保存すれば完了です!

中々使いやすいですよね!

次はワードプレスに戻りアップロードできる画像の大きさを変更します

これをしておかないとせっかく画像を切ったのに入れられないんです!

設定→メディア

下にある大サイズの大きさを変更する必要があります!

自分はこのくらいにしていますが画像が入ればOKだと思います

そして次はSSL化が出来ているかを確認します!

設定→一般

ここにあるアドレスのSSL化が完了しているか確認してください!

SSL化ってなんだよ!って感じだと思いますので

具体的にはこのアドレスのようにhttps://になっていればOKです!

http://なってる場合はsを両方に入れましょう!

そしてやっっっっと!画像の設定です!

投稿→カテゴリー

下にスクロールすると今まで作成したカテゴリーが並んでるので好きなものの編集を押します

今回は一番下の遊戯王に画像をつけていきます!

※頭に画像のマークが付いているのは別のプラグインなので無くてOKです!

下に行くとアイキャッチという欄があるのでここに先ほど切り抜いた画像を選択からアップロードして下の更新を押してください

これで画像の設定が完了しました!

めちゃくちゃ長い道のりでしたね…笑

これでプレビューを見てみると!

遊戯王に画像が入りましたね!

そして画像のチョイスよ笑笑

遊戯王に食べ物っていうセンスのなさ

それはさておき、皆さんできましたでしょうか??

あくまで自分が出来たやり方なのでここまでしなくてもいいかもしれないです!

この記事を見て出来た方がいたらコメント頂けたら嬉しいです!

ここまで設定のお疲れ様でした!

ではまた次の投稿でお会いしましょう👍🏻

コメント

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