ブログ

ブログ

2018.12.10

メニューリスト機能でのメニュー項目の詳細設定方法

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

メニュー項目の詳細設定

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

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

メニュー項目の編集ダイアログは、[メニューリスト]機能の[編集]ボタンまたは、右クリックでのショートカットメニューから開くことができます。
開き方によって編集ダイアログの名称が異なりますが、設定項目は同じなので好みの操作で編集ダイアログを開いてください。

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

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

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

メニューリスト機能
メニューリストから編集

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

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

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

ショートカットメニューからのメニューの編集

編集ダイアログの見方

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

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

選択肢:

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

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

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

ステータス(必須)

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

選択肢:公開、非公開

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

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

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

メニューの画像化項目

画像

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

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

ロールオーバー画像

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

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

選択中画像

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

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

リンク先の設定

サイト内リンク

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

リンク先サイト内リンク

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

選択可能なサイト内ページ

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

アンカーの設定

ファイル

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

リンク先ファイル

URL入力

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

リンク先URL

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

リンク先のURLを直接入力

リンクなし

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

リンク先リンクなし

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

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

お問い合わせフォーム