Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

a-blog cmsのナビゲーションバーをいじってみた。


今回の目的

Bootstrapテーマで、このような、ナビゲーションバーを作る。


上のようなナビゲーションバーがあれば、今自分がどこにいるかわかりやすいので、べんりですよね。

1.Bootstrapテーマの適応


http://developer.a-blogcms.jp/download/

ここからダウンロードしたa-blog cmsにはBootstrapテーマが入っているだろうと思います。
今回は、このBootstrapテーマをいじって、先ほどのナビゲーションバーを作っていきたいと考えています。

まずは、テーマをBootstrapに変えてみましょう。
コンフィグから、テーマ設定に移動し、テーマディレクトリ名を「Bootstrap」に変更し、保存するだけです。
手順は下を参考にしてください。


2.ナビゲーションバーの項目を登録

次に、ナビゲーションバーに入る項目も設定してみましょう
コンフィグから、ナビゲーションに移動し、設定できます。


この場合、%{BASE_URL}が、サイトのドメイン名となります。
http://localhostでうごかしていればhttp://localhost/となります。
ここで注意して欲しいのは%{BASE_URL}は最後に/が付加されますので、
例えば,http://localhost/portfolioに移動させたい時に
%{BASE_URL}/portfolioではなく、
%{BASE_URL}/portfolio/だということです。
最後に、/をつけることも忘れないでください。

すると、このように表示されるはずです。


3.navigationDocs.htmlの編集

しかし、今のナビゲーションバーでは、自分が今どこにいるか、わかりずらいですよね??
現在地がわかるナビゲーションバーを作りたいですよね??
そこで、Bootstrapテーマから
include→header→navigationDocs.htmlを探し、これを編集します。

これの16行目
ここを修正します。

<li {attr} class="c_{level}" ></li>
<!--下のように変更-->
<li class="js-link_match_location-full"></li>

js-link_match_location-fullはa-blog cmsの組み込みjsと呼ばれる機能の1つで、
現在表示しているページのURLとリンク先が“完全に”同じ場合に、「linkMatchLocationFullClass」で指定したクラスを追加で付与します

色は違いますが、これでページごとにナビゲーションバーが現在地をしめしてくれるようになりましたね??


4.参考

a-blog cms フォーラム [http://forum.a-blogcms.jp/viewtopic.php?f=12&t=2547]
Qiita [http://qiita.com/steelydylan/items/87222bbab4e22fccc883]


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド