ブログ

ブログ

2018.12.10

メニュー項目の詳細設定方法

最終更新日:2019.12.13

前回の記事(「メニューの作成・編集方法」)では、[メニューリスト]機能を使用したメニューの作成や編集方法について解説しましたが、Rabbity-CMSではメニュー項目についてさらに細かい設定も可能です。

本記事では、メニュー項目の細かい設定の設定方法ついて詳しく解説していきます。

メニュー項目の詳細設定

[メニューリスト]機能の[編集]ボタンからメニュー項目を編集すると、[メニューリスト]機能でのメニュー項目追加時には設定できなかったメニューの画像化やターゲット設定といった細かい設定が可能です。

メニュー項目の編集ダイアログの開き方

メニュー項目の編集ダイアログは、[メニューリスト]機能の[編集]ボタンまたは、右クリックでのショートカットメニューから開くことができます。

メニューリストからの開き方

[メニューリスト]機能から開く方法は、作成したメニューグループをまだWEBサイト上にレイアウト(配置)していない場合に有効です(WEBサイト上に配置されていないのでショートカットが使えないため)。

[メニューリストダイアログ]でメニューグループを選択し、編集したいメニュー項目の右横にある[編集]ボタン(編集ボタン)をクリックすると選択したメニュー項目の編集ダイアログが開きます。

編集したいメニュー項目の右横にある[編集]ボタンをクリックする

ショートカットメニューからの開き方

ショートカットメニューから開く方法は、既にWEBサイト上に編集したいメニューグループが配置されている場合に有効です。

WEBサイト上の編集したいメニュー項目の上で右クリックするとショートカットメニューが表示されます。そこから[メニュー]→[[メニューの編集]を選択すると編集ダイアログが開きます。

ショートカットメニューから[メニュー]→[メニューの編集]を選択する

編集ダイアログの見方

メニューの編集ダイアログ
項目名 説明
メニュー名(必須) 表示するメニューの名称を変更できます。
画像 メニューを画像化する場合は、この欄に画像を指定します。
[参照]ボタン(参照ボタン)をクリックして、サーバーブラウザから使用する画像を選びます。
ロールオーバー画像 メニューのロールオーバー画像を指定します。
※ロールオーバー画像とは、メニューの上にカーソルを乗せた時に表示を変化させるための画像です(メニューに下線がついたり、色が変わったりするのがロールオーバーです)。
選択中画像 メニューが選択されている状態を示す画像を指定します。
※選択中画像とは、クリックして開いたメニューのリンク先ページでそのメニューが選択されていることを示すための画像です。
リンク先(必須)

リンク先を変更できます。

選択肢:

  • サイト内リンク … 同サイト内のページにリンクを設定します。
  • ファイル … PDFなどファイルデータにリンクを設定します。
  • URL入力 … 任意のURLにリンクを設定します。
  • リンクなし … リンクを設定しません。
ターゲット(必須)

リンク先ページを開くウィンドウを指定できます。

選択肢:指定なし(同ウインドウ)、新しいウインドウ

ステータス(必須)

メニューの公開設定を変更できます。

選択肢:公開、非公開

※「画像」や「ロールオーバー画像」などのメニュー画像を設定しても、メニューパーツが配置されているブロックによっては画像が反映されない場合もありますのでご注意ください。

メニューの画像化項目の設定

メニューを画像化する場合は、編集ダイアログの「画像」「ロールオーバー画像」「選択中画像」を設定します。
あらかじめ項目に合わせた画像(下記に例を掲載)を作成し、画像をサーバーブラウザにアップロードしておきます。その後、編集ダイアログの[参照]ボタン(参照ボタン)をクリックして、サーバーブラウザから使用する画像を指定します。

メニューの画像化項目

画像

平常時のメニュー画像を指定します。

メニューの画像化(常時)

ロールオーバー画像

カーソルを乗せた時に変化する画像を指定します。例では、カーソルをメニュー名に乗せると色付き背景がつきます。

メニューの画像化(ロールオーバー)

選択中画像

該当メニューのリンク先ページでの選択状態を示す画像を指定します。例では、リンク先のページのメニュー名の色が変わり、下線が付きます。

メニューの画像化(選択中)

リンク先の設定

サイト内リンク

同サイト内のページにリンクしたい場合に選択します。

リンク先サイト内リンク

中央の欄をクリックすると選択可能な同サイト内のページが表示されるので該当するページを選択してください。

選択欄からサイト内ページを選択する

右端の「#」がついた欄ではアンカーを設定できます。
アンカーとは、リンク先ページ内の任意の位置へジャンプさせるためのものです(例えばリンク先ページの2つ目の見出しにジャンプさせるなど)。
あらかじめリンク先のページ内にアンカーを設定しておく必要があります。
アンカーの設定方法については、「アンカーの設定方法」をご覧ください。

アンカーの設定

ファイル

PDFなどファイルデータにリンクしたい場合に選択します。
右の欄横の[参照]ボタン(参照ボタン)をクリックして、サーバーブラウザからファイルを指定します。

リンク先ファイル

URL入力

任意のURLにリンクしたい場合に選択します。

リンク先URL

右の欄にリンク先のURLを直接入力してください。

リンク先のURLを直接入力する

リンクなし

リンクを設定しません。メニュー名だけの表示となります。

リンク先リンクなし

Web制作・ホームページ制作に
関するお問い合わせ

Web制作のお見積り、ご相談等をご検討の方はお問い合わせフォームをご活用ください。

お問い合わせする

Rabbity-CMS
体験版のお申し込み

Rabbity-CMSの体験版をご利用したい方は申し込みフォームをご活用ください。

体験版を申し込む

Rabbity-CMSに
関するお問い合わせ

体験版の延長、CMSに関するご質問はこちらのフォームをご活用ください。

お問い合わせする

お電話でのお問い合わせ

TEL:048-421-8571
営業時間 9:00-17:00(土日祝除く)

※セールス目的でのお問い合わせはご遠慮ください。