1706272255

Joomla!で縦のメニューを横並びにしたい。

​Joomla!でグローバルナビゲーションメニューを変更したら、縦に並んでしまった。
でも、やっぱりナビゲーションメニューは横並びがいい。

今回の記事では、メニューを新しく作って変更した時に縦並びになってしまう現象を解消して、
横並びにする方法を紹介します。

簡単なので、参考にしてください。


メニューを作成して表示するまでの流れ

Joomla!では、メニューというリンクを入れる箱のようなものを作成して、
メニューアイテムでリンク箱に収納します。

下記の図で、四角で囲った部分が「メニュー」
リンクをまとめたものです。

下線部のが「メニューアイテム」
一つ一つのリンクです。

四角に囲まれたメニューが置かれている場所が「 モジュール」
このモジュールで表示場所や表示方法を決めます。

モジュールとは、WordpressやMovableTypeで言うところの
"ウィジット"ですね。


下記の順番でメニューやリンクをJoomla!のサイトに表示します。

  1. ​メニュー作成
  2. メニューアイテム作成
  3. モジュール作成
  4. サイトに表示



メニューを表示するモジュールをふつうに作成すると縦並びになる

Joomla!でサイトを作成すると、必ずメニューを追加しますね。

グローバルメニューなどを、メニューとメニューアイテムという部品を作って
一つずつ作成できます。

この作成したメニューアイテムをモジュールと言う部品で表示する場所や表示方法を決めます。

Joomla!をインストールする時にサンプルデータをいっしょにインストールすると
サンプルメニューを表示するためのモジュールは横並びができるように設定されています。

このサンプルを参考にしながら、Joomla!でサイトを作成すると、自分で新しくメニューを作成することが多くなります。

ただ、この時に作成したメニューやメニューアイテムを追加しても、詳細な設定をしないと縦並びのメニューで表示されてしまいます。

こんな感じです。↓


メニューを横並びに表示する方法

​ふつうは、あまり気づかないので、メニューのタイトルとエイリアス(リンクの名前)を適当につけて、モジュールで表示するように設定します。

この時にたった一つだけ設定を忘れると縦並びのメニューになってしまうので、
忘れずに設定しましょう。

逆を言えば、たった一つ設定するだけで簡単に横ならばのメニュー表示ができます。

​Joomla!管理メニューの

エクステンション -> モジュールをクリックします。 

​Joomla!モジュールを検索します。

この例では、「メインメニュー」というモジュールを検索します。

検索後に、対象のモジュールをクリックします。

モジュール設定項目の「詳細」をクリックします。

設定項目「メニュークラスサフィックス」に

"★nav-pills"と入力します。

(★は、半角のスペースです。

「保存して閉じる」をクリックして、保存します。 


実際の表示を確認しよう!

「保存して閉じる」をクリックして後に、実際のサイトを確認してみよう。

下記のように横並びになっているはずです。


まとめ

​いかがでしたか?
設定は驚くほど簡単だったと思います。

私も、Joomla!を触ったばかりの頃に今回のことで躓きました。

ただ、いじってみると簡単でしたね。

まずは、サンプルを見ながらいろいろとメニューを作成して
表示してみてくださいね。

Joomla!を触ってみて、はじめの頃は

メニュー?
メニューアイテム?
モジュール? ポジション?

と戸惑うと思いますが、CSSやHTMLなどの知識がなくても
自由自在にサイトデザインができます。

極端に言うと記事ごとにデザインやレイアウトが変更できるので、
本当に自在にサイトデザインができます。


今回は、以上になります。

お役に立ちましたら、いいね!やシェアなどいただけますとうれしいです。