オリジナルブロック

リッチメニューの使い方

wp-jintest

リッチメニューは、トップページのナビゲーションの主役です!

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

リッチメニューはたくさんデザインを変更できる分、慣れるまで少し時間がかかるかもしれません。(使いこなすのはやや中級者向け)

でもその分、細かく融通の効くアイテムなので、ぜひ使いこなしてサイトにオリジナリティを持たせて行ってください!

ひつじくん
ひつじくん

リッチメニューのデザイン設定

では「リッチメニューの作り方」についてまとめていきます!

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

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

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

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

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

カラム数を選択

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

リッチメニューの右サイドバーでカラム数を選べます
画像比率を選択

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

リッチメニューの右サイドバーで画像比率を選択できる
メニューのURLを設定

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

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

メニューに設定するURLを入力しましょう。(記事のタイトルを検索することもできて、こっちの方が楽です。)

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

比率ぴったりの画像を使いたい

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

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

画像がうまくはまらない場合

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

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

画像がうまくはまらない場合

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

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

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

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

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

文字の配置を変えたい

リッチメニューの文字配置を変更することもできます。

リッチメニュー全体(親ブロック)をクリック。すると、右サイドバーに「メニューアイテムの文字」の設定が存在します。

こういった手順でリッチメニューを作成することができます!

他の記事も読んでみましょう

ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

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

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