ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - メニューを作る

メニューを作る

ブログを毎日書いてどんどん続けていくと、趣味など色々なジャンルの事を書いていくのでサイドのメニューだけではうまくまとめるためには足らなくなる個とがあると思います。

そんな時には自分でメニューを作ってしまえば上手に目留める個とができて見やすい整頓されたブログを保てると思います。

テーブルタグでメニューを作る

一番簡単にメニューを作る方法はテーブルタグを使ってメニューを作る方法だと思います。
(テーブルタグの解説は表をつくる参照)

TOP MAIL RANKING

これはテーブルタグで縦が1列で横が3列の物をつくり、テーブルの中にメニューの内容のリンクの文字を入れたものです。

簡単なメニューを作りたいならこの様にテーブルタグを使えば、そんなに難しくなくできて、装飾も割と簡単に出来るので一番作りやすく扱いやすいメニューの作り方だと思います。

リストタグでメニューを作る

テーブルタグより少し難しいですが、リストタグを使ってメニューを作る方法です。
(リストタグの解説はリストをつくる参照)


リストを普通に作ると縦に並ぶのですが、スタイルシートでfloat:left;と指定して、リストを横に並ばせるとメニューが出来ます。
画像の横に文字を書くときもタグを使いますよね!あれと同じ感じです。

実際にこの見本はどの様に作っているのかというと、
<ul class="menu1">
<li><A href="http://.">トップ</A></li>
<li><A href="http://.">メール</A></li>
<li><A href="http://.">ランキング</A></li>
<li><A href="http://.">掲示板</A></li>
</ul>
普通のリストを作る時と同じようにタグを作ります。ただ、最初のulにclass指定をします。

スタイルシートの方は、
ul.menu1{
    list-style:none;
    width:80%;        /*全体の長さ*/
    font-size:14px;      /*文字の大きさ*/
    margin-left:0px;     /*左にスペースを空けない*/
   border-top:double 4px #000000;     /*上部を黒色の二重線で4pxの太さで装飾*/
    border-bottom:double 4px #000000;   /*上部を黒色の二重線で4pxの太さで装飾*/
    text-align:center;      /*文字の位置(真ん中)*/
    background-color:#ffffff;   /*背景は白色*/
}
ul.menu1 li{
    list-style:none;   /*リストマーク(・)を消す*/
    float:left;      /*横並びにする*/
    margin:0px 15px;   /*文字の左右の間隔を15pxあける*/
}
ul.menu1 a{
    padding-left:15px;   /*背景画像を左に15pxずらす*/
    background:url(http://~~~.gif)  /*矢印の画像*/
  left center no-repeat;  /*矢印は1つで真ん中左に表示*/
}
ul.menu1 a:hover{
    background:url(http://~~~.gif)  /*マウスが乗った時の矢印画像*/
  left center no-repeat;  /*矢印は1つで真ん中左に表示*/
}
この様にスタイルシートで結構細かく指定しています。ただ横に並べるのならfloat:left;さえあれば横に並ぶので装飾は自分の好みでやってみて下さい。

タグが全然わからなくて困っているけど、とにかく作りたい人はCSS Tab DesignerをDownloadして下さい。このソフトは自分の好きなメニューを選んで表示されるコードをブログにコピーするだけでメニューを作る事が出来ます。

フリー素材でメニューを作る

フリー素材を探すとメニュー系の素材がたくさん見つかると思います。

その素材を使って画像を並べてリンクにすれば簡単にメニューが出来ます。

ホームメールレス
メニュー用フリー素材を並べるとこの様になります。


ロールオーバー用メニューフリー素材を並べるとこの様になります。
(ロールオーバーの作り方はロールオーバー参照)



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
リンクについて
ハイパーリンクする文字の色を選べる方法(通常は青色ですよね)とバナーのところにポインタをもっていた時にバナーが少し動く(奥に引っ込むというか・・・)ようにする方法がご存知であれば教えて下さい。
misatoさんへ
リンクの色や動かし方はこのブログでもすでに紹介している記事があるのでそちらを見てみて下さい。
「文字・リンクの色を変えたい!」 http://rgrg.blog61.fc2.com/blog-entry-463.html
どうもありがとうございました。
すでに紹介されていたのですね!ちゃんと見ていなくてすみません。
るんばばさんのブログには初心者の私にとって様々なお役立ち記事があって、大変助かっています。 ありがとうございます。 これからも宜しくお願いいたします。
CSS Tab Designerで、コードを発行し、ブログに貼り付けました。ちゃんとメニューは表示されるのですが、CSS Tab Designerで赤色のメニューを選んだのにもかかわらず、
メニューが黒色になってしまいます。対策法を教えてください。お願いします。
僕のブログに来て、見ていただければ、すぐに分かると思います。
junさんへ
ごめんなさい。完全にコメントを見落としていました。ブログを見てみたのですが、テンプレを変えてメニューもちゃんと色が変わって表示されていますね。お役に立てずに申し訳ないです。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/617-f1b9cffc   

Template Designed by DW99