<< 今までのコメントは見れるけど、... 一部の投稿欄に背景を表示してみました >>
 

メニュー:リストを用いたメニュー


以前、テーブルを使用したメニューを紹介させて頂きました。
今回は図1に示すようなリストを用いたメニューです。
設置場所については好きなところに設置して下さいね。





図1 設置例



HTML編集


以下のタグを任意の場所に入れます。



HTML編集
<ul class="menunavi">
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
</ul>
<br style="clear: both;">



CSS編集部分

CSS編集部分に以下のコードを追加します。
各自の画像に合わせた設定に変更する必要があります。



CSS編集


ul.menunavi li{

list-style-type: none;
display:inline;
padding:0;
margin: 0;
}

ul.menunavi li a, ul.menunavi a:visited{

color: #000000;
font-size: 10px; /*フォントのサイズ*/
font-weight: bold; /*フォントを太字*/
text-align:center; /*文字の中央揃え*/

margin: 0;
padding: 0;
padding-top:0px; /*上の空白の調整用*/
line-height: 20px;

text-decoration: none;
display:inline;

position:relative;
left:0px; /*表示位置補正用です。この数値を大きくすると表示位置を変えられます。*/

float: left;

background-image:url(イメージファイルURL);
background-repeat:no-repeat;
background-position:center;
width:100px; /*イメージファイルの幅*/
height:20px; /*イメージファイルの高さ*/
}






今日のポイント
  • display:inline;で横方向に表示するようにしています。

  • left:0px;の部分の数値を入れることにより表示位置をずらすことが可能です。




難易度:★★
なお、ボタンの素材はGIMPで作りました。

ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-27 11:16 | Trackback | Comments(6)
トラックバックURL : http://potto.exblog.jp/tb/1365696
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented by shuduck at 2004-11-29 20:40
はじめまして
PCが好きで好きでショウガナイ私でふ
早速参考にさせて頂きマイスキンに挑戦していまふ
初心者で性格的に苦労がすきなのか
いつも大騒ぎでふ←ハマリすぎ
今後とも参考にさせてください

Linkさせて頂きました
Commented by aok_dm at 2004-11-30 00:42
ぽっとさん、こんばんわ。
参考にさせていただいて今日もスキンいじろうかと思ったのですが、
「CSSのBACKGOUND-IMAGEが反映されない」という
非常事態がおきまして原因究明中でございます。
また直ったら参考にさせていただいてガリガリ編集したいと
思います。(なんかグチみたいでスマソ)

そういえばコメント欄のアイコンがクリスマス仕様になってる!
気づいたの遅すぎ?
Commented by potto37 at 2004-11-30 07:44
shuduckさん、はじめまして^^
リンクありがとうございます。
スキン編集楽しいですよね。
いろいろな技がありますので、いろいろと試して楽しんで下さいね。
これからも、よろしくお願いします。
Commented by potto37 at 2004-11-30 07:55
aok_dmさん、こんにちは^^
BACKGOUND-IMAGEが反映されないとのことでなんでしょうね。
はやく原因がわかるといいですね。
Commented by tallylamp at 2004-12-03 09:40
はじめまして。
aok_dmさんのblogで、一緒にコメントをさせていただいていたようなので、きてみたらあの有名な「ぽっとの陽だまり研究室」の管理人さんだったのですね。

思わず書き込みさせていただきました!
Commented by potto37 at 2004-12-03 19:23
tallylampさん、はじめまして。
aok_dmさんのところから来ていただいたんですね。
私もaok_dmさんのところに非公開コメントでアドバイスに行って気になっていたので、無事表示できるようになってよかったです。
こうやって、スキン編集の輪が広がっていくのが、楽しいですね。
これからも、よろしくお願いします。
<< 今までのコメントは見れるけど、... 一部の投稿欄に背景を表示してみました >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。