比較表のブロックを追加しました!

JIN:Rでの「リッチメニュー」の使い方!画像でピックアップを作る方法

wp-jintest
<景品表示法に基づく表記> 当サイトの記事内に商品プロモーションを含む場合があります。

このページでは、 WordPressテーマ「JIN:R」でのリッチメニューの作り方について解説します。

リッチメニューの例(4カラム)

リッチメニューの例(4カラム)

リッチメニューの例(4カラム)

リッチメニューの例(6カラムの例)

まだまだバリエーションがあります。

リッチメニューを使いこなすと自由自在に画像メニュー作成ができるよ!

ひつじくん
ひつじくん

リッチメニューの作り方|

リッチメニューを呼び出し

メニューを作成したい場所で

/リッチメニュー と入力してください

そうすると、リッチメニューのナビゲーションを呼び出すことができます。

カラム数を選択

リッチメニューの右サイドバーで、作りたい「カラム数」を選択します。

画像比率を選択

次に、画像比率(画像がトリミングされる時の形)を選択します。

メニュー名の配置を設定

メニュー名のデザインを変更すると、さらに凝った表現ができるようになります。

メニュー名の色・サイズも調整できるので、好みに合わせて設定を切り替えてください。

ちなみに「メニュー名なし」にすると、画像だけのメニューを作ることもできるからね。

ここもお好みで調整してもらえるといいです!

ひつじくん
ひつじくん
メニューのURL(ジャンプ先)を設定

メニューのリンク先(飛ばす先)を決めていきます。

リッチメニュー(カードの部分)を触ると、右サイドバーにURL設定が出てきます。

メニューに設定するURLを入力しましょう!(記事タイトルで検索もできます。)

URLは直接入力する場合は「https://」を含んでください。

メニューを設定すると、記事のアイキャッチ画像が自動でトリミングされてハマります。

この画像を変えたい時は、「画像を置き換え」のボタンをクリックして、別の画像に切り替えてください。

よくある質問

Q
比率ぴったりの画像を使うには?

もし画像比率ぴったりの画像(1:1など)を用意してくれた場合、URLを設定しただけだと、自動では綺麗にトリミングができません。

比率ぴったりの画像を綺麗に表示するには「画像を置き換え」のボタンを押して、表示したい画像をセットしてください。

Q
画像がうまく表示されない(よくある)

HTTPS化(SSL化)が不十分で完了していないケースでも、画像がうまく反映されません。

レンタルサーバーで「SSL化」の設定を行う
WordPress管理画面のサイトアドレスを「https」のものにする。

特に が終わっているのに をまだやっていないケースでこの問題は起きがちです。

Q
画像がうまく表示されない(レアケース)

パーマリンク設定が「基本」になっている時には、リッチメニューに画像が引用されません。(基本はレガシーなURL構造になっていて、対応が不可能です。)

パーマリンク設定を「基本」以外のものにしてもらうか、URL末尾を変更することのできるプラグインを利用してパーマリンクをカスタムしてもらう必要があります。

メニューのテキストを設定

メニューの「メインテキスト」と「サブテキスト」を入力します。

リッチメニュー(カードの部分)を触ると、右サイドバーにサブテキストメインテキストがの設定箇所が出てきます。

ちなみに、サブテキストは空白でもOK!

画像の「フィルター設定」をお好みで

リッチメニューには「フィルター設定」があり、画像に色を載せることができます。

フィルターってどうやって使えばいいんだ?

おおかみくん
おおかみくん

たとえば、画像にフィルターを薄くかけると、メニューの上に乗る文字が見えやすくなる効果があるよ!

フィルターを使いこなすと、さらに完成度が上がるよ〜!

ひつじくん
ひつじくん

例えば、フィルターを黒にして、メニュー文字を白にすると、メニューの印象をガラッと変えることができますね↓

他にも、フィルターにテーマカラーを入れると、メニューとサイトがすごく馴染みます。

完成度をかんたんにあげられるので、ぜひお試しあれ

記事上に「ピックアップ」の画像メニューを出す方法

記事の上にピックアップメニューを出す方法について解説していきます↓(この感じ)

全投稿ページの記事上に、ピックアップメニューを出す方法を教えるよ!

ひつじくん
ひつじくん

ウィジェット > 「記事上」に進む

リッチメニューを設置する

あとは「記事上」のウィジェット内に「リッチメニュー」を設置して完成させましょう!

そして「更新」のボタンを押せば完了です。

JSONエラーでウィジェットが保存できない場合
レンタルサーバーの「WAF設定」が保存の邪魔をしている可能性があります。サーバーにログインして、セキュリティ設定の「WAF設定」をOFFにしてお使いください。

特定カテゴリーだけ、メニューを表示したい場合は?

もし、特定カテゴリーだけメニュー表示したい場合は

カテゴリ区別」のブロックを使いこなすとうまくいくよ!

ひつじくん
ひつじくん

カテゴリ区別ブロックを配置して、その中に、リッチメニューを入れてください。

そして表示するカテゴリーを選択してあげると特定カテゴリーだけの表示に対応することが可能です。

詳しいやり方は「カテゴリ区別の使い方」を参照してください。

他の記事も読んでみましょう
ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
BLOGCAMP

限定コミュニティへのご案内

  • 参加費は永年無料
  • ブログ仲間が作れる
  • 困ったら相談OK
  • ブログ診断のイベントあり
参加者は3,000人超え!

すでに参加してくれている方は、「BlogCamp wiki」でブログ診断(アーカイブ)の限定動画を閲覧可能です。

wiki内にブログ勉強用の動画がたくさんあります!ぜひ役立ててくださいね。

ひつじくん
ひつじくん
記事URLをコピーしました