第5回 ナビゲーションモジュールを利用してみる

第4回では、エントリーが表示できるようになりましたが、今回はケータイ向けのナビゲーションを表示させる方法について解説します。

※この解説は、a-blog cms 1.0.0b3をもとに説明しています。ご利用のバージョンによっては画面表示や内容が若干異なる場合があります。ご了承ください。

ナビゲーションモジュールのスニペット

まず、リファレンスのビルトインモジュールの中のナビゲーション (Navigation)モジュールのスニペットを利用して /themes/keitai/index.html に張り付けてみてください。

{label}[raw]

---

既に、PCで用意したものと同様のメニューが表示されているのが確認できるかと思います。同様に前回用意した main.html にも同じナビゲーションを追記したいところですが、a-blog cms では、便利に利用できるinclude機能があります。これを利用してナビゲーションは1つのファイルを使い回す事とします。

このようなインクルードの機能は、company1 のテーマや plain のテーマであってもいろいろな場所で利用しています。特に管理ページのフォームのボタン等を表示させるようなところは必ず読み込んでいます。 一度、いろいろなファイルをご覧ください。

上記のこのスニペットの場合、現状登録されているデータでは、トップページでは大丈夫ですが、お知らせ等の1階層中の時にうまくリンクが機能しません。

<!-- BEGIN link#front --><a href="{url}" target="{target}"><!-- END link#front -->

の部分を修正する必要があります。サーバのドキュメントルートにインストールしているようであれば、{url}の前に / を追記する。

<!-- BEGIN link#front --><a href="/{url}" target="{target}"><!-- END link#front -->

また、テスト的にどこかのディレクトリ内にインストールしているのであれば、%{BASE_URL} を追記するといいかと思います。

<!-- BEGIN link#front --><a href="%{BASE_URL}{url}" target="{target}"><!-- END link#front -->

インクルード機能を利用する

index.html と main.html には以下のように書き、keitaiのディレクトリにincludeというディレクトリを作成します。そこにナビゲーション (Navigation)のスニペットのみを記述した navigation.html というファイルを用意します。

<!--#include file="/include/navigation.html"-->

これだけで、ナビゲーションモジュールの設定は完了です。

ケータイサイトを作る際のコンフィグ設定

標準の設定では、PC用の表示件数の設定になっています。例えば、今回用意したメニューをクリックすると、複数エントリーが連続して表示されます。これでは、写真が多く貼ってあるようなコンテンツだと容量オーバーで表示できなくなってしまう事があります。

管理ページ ＞ ルール ＞ ケータイの時 ＞ コンフィグ ＞ 記事本文(Entry_Body)

---

---

この表示件数を1-3件と少なくしておく事をお勧めします。

地図の表示サイズを変更する

地図のサイズはデータベース上にこのサイズで表示したいとデータが保存されています。これを無理矢理ケータイで大丈夫なサイズに変換する必要があります。第4回で用意した themes/keitai/include/column.html の地図部分についても修正する事で対応可能になります。

の {x} と {y} の値を今回は直接200pxと書いてしまうという対策を取る事とします。

これでケータイ用の表示については正しくできるようになりました。もし、ケータイの時のナビゲーションをPCとは別にしたい際には、ナビゲーションモジュールにモジュールID を設定します。方法が分からない方は、第3回 モジュールIDを設定して表示する情報を限定するをご覧ください。

次回は、お問い合わせのコンテンツが用意されていませんので、「第6回 フォームを作成してみよう」をご紹介致します。

---