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

テンプレートパーティー

画像のメニューをテキストタイプに変更しよう


当サイトで配布中のメインメニューは、画像タイプとテキストタイプがあります。画像タイプの方が公開数としては多いのですが、テキストタイプなら画像ソフトがなくても簡単にメニューの入れ替えができて便利なので、今回は画像タイプをテキストタイプに変更する方法を解説します。

使用テンプレートは

今回はbiz13_skyblueを使います。

biz13_skyblueのindex.htmlを開きます

まずは、画像からテキストにhtmlタグを入れ替えます。
htmlのheader内にある以下のブロックがメインメニューブロック(menu)になります。テンプレートによってはheaderブロックの下など別の場所にあるものもあります。

画像タグは削除し、alt指定部分だけをそのままテキストとして残します。
すると以下のようになりますね。

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

画像を削除したのでテキストリンクのみが表示されている状態です。テンプレートのスタイル(style.css)側の指定によっては別の見え方をする場合もあります。

スタイルを調整していきましょう

cssフォルダ内のstyle.cssを開きます。メモ帳でも構いません。
開いたら、以下のメインメニューと書いてある部分を探しましょう。

ul#menuというのはメニューブロック全体を囲むボックスのようなものです。ul#menu liは1個ごとのメニューの設定。最後のul#menu imgは特に気にしなくていいのですが、ブラウザによって下に数ピクセルの空白ができるのを防止する設定です。
まずはメニュー1個ごとの設定を調整していきます。今入っているfloat:leftというのは左よせさせる設定なのでこのまま使います。

メニュー1個ごとの設定を行っていきます

まずはメニュー1個ごとの幅と高さと背景画像を設定しましょう。サンプルテンプレートのimagesフォルダのメニューはすべて文字がのっている為、文字がのっていないbaseフォルダに入っているものを使います。今回はbaseフォルダからそのまま読み込む事にします。

うまく打ち込む自信がない人は以下をコピペしてもOKです。

気づいた人もいるかもしれませんが、なぜmenu_01ではなくmenu_02を読み込んだのかというと、ちゃんと理由があります。このテンプレートは両サイドのメニューだけ境界線が他のものと異なります。後で状態がわかりますので作業しながら確認していきましょう。

プレビューで見てみます

背景画像は入りましたがちょっとバランスがおかしいですね。また、見てみると分かりますが、「ホーム」の左側の線と、「お問い合わせ」の右側の線が他のものと少し違いますよね。少しずつ調整していきましょう。

プレビューはこまめに…htmlの編集をする際もそうですが、一気に編集してしまって最後にプレビューでみたら崩れてしまっていて原因がわからない…、そういった経験はありませんか?最後にプレビューで確認するのではなく、1つ2つの設定を変更する都度、プレビューで確認していく方がおすすめです。突然レイアウトが崩れた場合、その直前に作業した内容が間違えているとすぐわかりますので。

まずは文字の位置を調整します

メニューテキストが左上によってしまっているので上下・左右の中央に配置させます。

これも手打ちに自信がない場合は以下をコピペして下さい。

line-heightは行間なので、メニュー画像の高さをそのまま指定すれば上下中央に配置されるという事になります。
text-alignは左右の位置指定なので、center(中央)に指定すれば左右中央になりますね。

再度プレビュー

今度はきれいな配置になりましたよね。あと気になるのは文字の下の線と上のステップで述べた「ホーム」と「お問い合わせ」の線がおかしい点です。まずは下線を消す作業から行います。

テキストリンクの下線を消します

下線が入っているのはリンクに対してですよね。ですから、今まで編集していた「li」タグではなく「a」のリンクタグに対してスタイルを新規追加します。単純に「a」とだけ指定してしまうと他の全リンクタグに影響しますので、今まで編集していた「li」タグ限定の「a」タグに対してという意味の「ul#menu li a」にします。下線の指定スタイルは「text-decoration」なのでこれをnone(なし)にしましょう。

これも手打ちが自信のない人は以下タグをコピペして下さい。

プレビューでみます

きれいになりましたね。では、今まで何度か書いている「ホーム」と「お問い合わせ」の線も調整します。

「ホーム」の左側の線と「お問い合わせ」の右側の線をよく見ると、ほかのものとちょっと違いますよね。

これは、サンプルテンプレートの画像メニューの両サイドのみ、中央メニューとはラインデザインが異なる為です。なので、画像タイプのメニュー同様「ホーム」メニューには一番最初のメニュー画像の土台(menu_01.gif)、「お問い合わせ」メニューには一番最後のメニュー画像の土台(menu_06.gif)を読み込んであげるようにする必要があります。
今のままだと、全部の「li」タグに対して共通に2番目のメニュー土台を読み込ませているので、最初と最後のメニューだけスタイルを設定できるようにclass名を追加してあげます。

「menu01」や「menu06」というのは他の名前でも構いませんが、画像ファイル名と合わせてわかりやすくしてみました。
これだけでは単にhtml側にスタイル名を追加しただけなので、スタイル側(style.css)の追加編集も行います。

少し難しいかもしれませんが、ul#menu liまでは今までやっていたメニュー1個あたりのスタイル名と一緒ですね。その直後に続く.menu01や.menu06というのが上のhtml側で追加したclass名部分になり、個別指定ができるようにしています。個別の指定ができる状態にし、それぞれの背景画像を読み込ませると完了です。

id(#)とclass(.)について
htmlファイルを見ていると、<~~ id="●●">や<~~class="●●">をよく見かけます。cssファイルもよく「.●●」や「#●●」といったものを見ます。html内の「id」とcss内の「#」は同じものをさし、同じくhtml内の「class」とcss内の「.」も同じものをさします。
具体的に書くと、htmlの<div id="container">と、cssの「#container」が同じもの。htmlの<p class="clear">とcssの「.clear」が同じもの、といった感じ。idは1枚のhtml内に1度しか使えませんがclassはいくつでも使えます。

プレビューで確認しましょう

両サイドのライン、きれいになりましたよね。ひとまずこれで完成です。

マウスオン時も設定しましょう

「現状でOK!」という人は現状で使ってもらって構いません。ただ、本来のテンプレート同様にマウスオン時の設定もしてみようという人は以下をお読み下さい。

マウスオン時のスタイルには「a:hover」を使います

上のステップでも見ましたが、ul#menu liはメニュー全体の指定でしたよね。これに「a:hover」を付けるとメニュー全体のメニューのマウスオン時の設定という事になります。マウスオン用のメニュー画像は、menu_onとついているタイプになりますので「menu_on_02.gif」を読み込みます。なぜ01でなく02を使うかは上で解説した理由と同じです。

次は「ホーム」用の設定です。これも上の工程で見ましたが「ul#menu li.menu01」がホームの指定でしたのでこれに「a:hover」を加えてマウスオン時の指定をします。「お問い合わせ」用も同様に指定しましょう。
これらは新規に追加して下さい。

手打ちに自信がない人は以下をコピペしましょう。

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

ちょっと以下の画像では見づらいかもしれませんが、文字の上(文字の後ろの背景画像しか変化がない)でしか反応が見られません。

これはaタグがインライン要素といって、その部分にしか範囲がない為です。メニューの背景画像分にスタイル設定を反映させるにはこのaタグのインライン要素をブロック要素(display:block)にしてあげる必要があります。「ul#menu li a」というスタイルがすでに入っているのでこれに以下を追加しましょう。ブロック要素扱いにする為、そのブロックのサイズも指定します。メニュー背景画像サイズを追加指定しましょう。

手打ちが自信ない人は以下をコピペして下さい。

最後のプレビューです

上で指定したブロックサイズ全体で反応が見られるようになりましたね。これで完成です。

マウスオン時の文字色を変更したいなら…メニュー全体のマウスオン時のスタイル(ul#menu li a:hover)の指定部分に文字色(color:#ff0000)などを追加指定して下さい。

1点忘れていました

元々のサンプルテンプレートのように、現在開いているページのメニューをマウスオン時の表示状態にする方法を簡単に説明しておきます。どんなスタイル名でもいいのですが今回はcurrentを使います。
マウスオン時の状態にしたいメニュータグにclass="current"と指定します。

会社概要ページなどの両サイドメニュー以外のメニューの場合、
<li class="current"><a href="company.html">会社概要</a></li>
のようになります。

すでにclass指定がある「ホーム」や「お問い合わせ」の場合は以下のように半角スペースを使って追加します。
<li class="menu01 current"><a href="index.html">ホーム</a></li>

class指定を2つ以上使いたい場合、上のように半角スペースで区切っていくつでも追加できます。

次にスタイルの方も追加しておきましょう。

今までやってきた工程と同じように、上から「全体のメニュー」「ホーム」「お問い合わせ」の指定になっています。
コピペ用のタグは以下です。

今度こそ完成です

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

↑ PAGE TOP