オートナビを横並びのボタンのように表示する方法

2014年8月10日 at 21:27

お疲れ様です。
久しぶりに投稿させて頂きます。

オートナビを使って、ナビゲーションボタンのような表示にするにはどうしたらいいでしょうか?
CSSを使うのだなということはなんとなく分かりますが、具体的にどこで何をどうすればいいのかさっぱりわかりません。

オートナビではなく別の方法で!ということも含めてご教授頂ければ幸いです。

宜しくお願い致します。

タグ:

Re: オートナビを横並びのボタンのように表示する方法

2014年8月11日 at 10:51
オートナビで出てくるタグは、箇条書きで使う UL,LIタグが出力されます。
ULタグにはクラス名としてnavとなっています。
これを頼りにCSSを指定すればいいです。

知識レベルがわからいので説明しにくいのですが、この説明で答えになっていますでしょうか。
 

Re: オートナビを横並びのボタンのように表示する方法

2014年8月14日 at 9:51
ありがとうございます。
教えて頂いた方法で、
根本的にCSSをどこで指定するのかがはっきりわからないのです。
複数のページに共通に表示するナビゲーションボタンを作りたいのですが、
その場合、そのボタンにしたいオートナビのブロックでCSSを指定するのかと思いますがあっていますでしょうか?

その際にクラス名にnavを書いて、
CSSを更に記述するということかと思いますが、
具体的にどう書けば良いのか・・・
まったく素人ですみません。
 

Re: オートナビを横並びのボタンのように表示する方法

2014年8月14日 at 12:35
CSSが全く分からない場合は、アドオンを使用するのがおすすめです。

■Performance C5 Custom Templates
http://www.concrete5.org/marketplace/addons/performance-c5-custom-templates/
「C5tp Dropdown Menu Light」という名前の、横並びでドロップダウンに対応したオートナビ用のテンプレートが追加されます。

■Amiant CSS3 Menu
http://www.concrete5.org/marketplace/addons/amiant-css3-menu/
色が変更できないのが難点ですが、こういうのもあります

■Dropdown Menu($15)
http://www.concrete5.org/marketplace/addons/dropdown-menu/
有償では、色も選べるものがあります。審査が未承認なのですが、購入して使うことはできます。未承認の理由は、標準のGreek yogurtテーマで若干の表示崩れがあるというものなので、通常の使用には問題ありません
 

Re: オートナビを横並びのボタンのように表示する方法

2014年8月12日 at 1:15
concrete5 のデフォルトテーマ「Greek Yogurt」の ヘッダーナビの CSS をご覧になってもいいかもしれませんし、

あと「concrete5 公式活用ガイドブック」のサンプルデータで、該当する箇所の CSS を参考にされると良いです。

http://book.concrete5-japan.org/

カスタムテンプレートを使い、クラスを与えて、そのクラスに対して、縦方向にいかずに、横方向に行くように指定させます。
 

Re: Re: オートナビを横並びのボタンのように表示する方法

2014年8月14日 at 10:00
ありがとうござます。

すみません、
「concrete5 のデフォルトテーマ「Greek Yogurt」の ヘッダーナビの CSS をご覧になってもいいかもしれませんし・・・」
このアドバイスの
ヘッダーナビのCSSはどこでどうやってみるのでしょうか?
 

Re: オートナビを横並びのボタンのように表示する方法

2014年8月14日 at 12:14
【管理者より】重複投稿のため削除させていただきました