ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

パンくずメニューをつけてみよう

現在地を示すパンくずナビをつけてみましょう。

使用テンプレートは

今回は何でも構いませんが、サンプルで使用するのはtp_biz14_blueにします。
境界用の矢印画像をこちらからダウンロードして解凍し、画像のみをimagesフォルダに入れておいて下さい。ちなみに白と黒の2つ入っていますが必要に応じてどちらかをご利用下さい。

tp_biz14_blueのhtmlを開きます

どのhtmlでも構いませんが、トップページにはパンくずなびは入っていない場合が多いので他のページを開いてみます。
解説では事業所案内(info.html)を開いています。
html内からmainブロックの出だしを見つけて下さい。パンくずメニューはこのメインコンテンツ最上部に入れる事にします。

パンくずメニューのタグを入れます

リストタグでパンくずメニューのタグを入れます。

手打ちに自信がない人は以下のソースをコピペして貼りこんでみて下さい。

一度プレビューで見てみましょう

まだhtmlで加えただけなのでそのまま出ている状態です。これからスタイルを整えていきます。

リストを横並びにさせる

style.cssを開き、liタグに対してインラインにする処理をしましょう。

手打ちが自信ない人は以下のタグをコピペしてstyle.cssに入れます。

display:inlineでなく、float:leftでもOKですが、フロートを使った場合は直後に続くコンテンツもフロート処理されてしまうので、処理方法がわからない場合はdisplay:inlineを使っておきましょう。尚、横並びメニュー等にもこのdisplay:inlineは使えるのですが、表示が崩れる場合があるので当サイトでは使用していません。

再度プレビューで見てみます

ちゃんと横並びになりましたか?

完成が見えてきましたね。
最初にダウンロードしていた矢印画像を使って見やすく調整していきましょう。

リンクが貼られている場合にのみ、右側に矢印が出るようにします

リンクはaタグなので、ul#pan li aに対してスタイルを追加指定します。

url(../images/arrow_white.gif)で矢印の背景画像を読み込んでいます。今回は白い矢印を使ってますが黒い矢印を使うならarrow_black.gifになります。尚、../imagesというのは、style.cssから見た場合に1つ上(../)の階層にあるimagesフォルダ、という意味になります。もし同じ階層ならurl(arrow_white.gif)になるという事ですね。
次の「no-repeat」というのは文字通り「(背景画像を)リピートしない」という意味。
「right center」 というのは、右側&(上下の)中央という意味で、aタグの文字の右側に配置させる指定になります。
下の行の「padding-right: 15px;」は矢印画像を読み込む分のスペースをあける指定です。

完成です。

他のhtmlファイルにも同じタグをコピペし、メニューテキストとリンク先を変更して保存しておきましょう。
こちらをクリックすると実際のサンプルファイルを見る事ができます。

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

↑ PAGE TOP