ここから本文です

アメブロでのCSSメニューの作り方を教えてください。 こちらのサイト様のよう...

kdslqhv7さん

2010/2/220:18:04

アメブロでのCSSメニューの作り方を教えてください。
こちらのサイト様のように↓
http://3ping.org/2005/08/24/0920
サンプル→http://3ping.org/2005/08/24/sample_menu02/

こんな風にブログを作りたいです
そこに記載されている

<ul id="globalNavi">
<li><a href="./">List1</a></li>
<li><a href="./">List2</a></li>
<li><a href="./">List3</a></li>
<li><a href="./">List4</a></li>
</ul>
↑をフリープラグインに貼り付ければいいのですか?
もしくはCSS Fileの

@charset "utf-8";

ul.globalNavi {
margin: 0;
padding: 0;
line-height: 1;
background-color: #eee;
list-style-type: none;
}

ul.globalNavi li {
margin: 0;
padding: 0;
float: left;
/* 固定幅にしたかったら
width: 110px;
*/
text-align: center;
font-size: 13px; /* 文字サイズ */
}

ul.globalNavi li a {
border-right: 1px solid #666;
padding: 9px 20px;
display: block;
position: relative; /* for IE6 */
color: #fff;
background-color: #333;
text-decoration: none;
}

ul.globalNavi li a:hover {
border-color: #ccc;
color: #333;
background-color: #ccc;
}

/* ClearFix */

ul.globalNavi {
_height: 1px;
min-height: 1px;
/*¥*//*/
height: 1px;
overflow: hidden;
/**/
}

ul.globalNavi:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}

↑CSSで作成する場合はCCSの編集に貼ればいいのでしょうか?
それとも両方に貼り付けるのでしょうか?
ブログはアメブロで作成中です
最終的にこちらのページのように↓
http://myisland.jp/template/menus/horizontal1.html
トップ画の下にメニューを取り付けたいです
最後まで詳しく教えてください宜しくお願いします

閲覧数:
4,223
回答数:
2

違反報告

ベストアンサーに選ばれた回答

グレード

カテゴリマスター

kiyoto_777さん

2010/2/607:45:06

■私のナビメニュー
★CSS部分
/* ----------------------------------------------------- */
/* ■ナビエリア フリースペース */
/* ----------------------------------------------------- */
#navlist
{
padding: 5px 5px 5px 5px;
margin-left: 0px;
font-size:18px;
font-weight: bold;
width:1500px;
}
#navlist li
{
margin:0;
padding: 0;
display: inline;
list-style-type: none;
padding: 5px 5px 5px 5px;
}
#navlist li a{
margin:0;
display: inline;
list-style-type: none;
padding: 5px 5px 5px 5px;
}
#navlist li a:link { /* 未訪問のリンク の色 */
color: #ffffff;
background-image:url(背景画像URL①);
padding: 5px 5px 5px 5px;
}
#navlist li a:visited { /* 訪問済みのリンクの色 */
color: #ffffff;
background-image:url(背景画像URL①);
padding: 5px 5px 5px 5px;
}
#navlist li a:hover { /* マウスを乗せた時のリンクの色 */
color: red;
background-image:url(背景画像URL②);
padding: 5px 5px 5px 5px;
}
/* トップからの位置調整 */
#freespace #navcontainer{
position: absolute;
width:1000px;
top:407px;
z-index: 100;
margin-left:-10px;
}
★フリースペース(改行はいれないこと・・・アメブロのフリースペースのため)
<div id="navcontainer"><ul id="navlist"><li><a href="URL">Home</a></li><li><a href=""URL">Room</a></li><li><a href="URL">Amember</a></li><li><a href=""URL">Message</a></li><li><a href=""URL">Present</a></li><li><a href=""URL">Peta</a></li><li><a href=""URL">Now</a></li><li><a href=""URL">Reader</a></li><li><a href=""URL">Community</a></li><li><a href=""URL">Slide show</a></li><li><a href=""URL">Guest book </a></li></ul></div>

★それぞれCSSの設定しているデザイン環境が違うため、各ピクセルには
注意が必要
下記を参考にして下さい
http://ameblo.jp/new-bulue9/

質問した人からのコメント

2010/2/7 18:55:03

成功 有難うございます!!参考になりました
さっそく試してみたいと思います

ちょい足しを取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

このQ&Aで解決しましたか?質問する

閉じる

ベストアンサー以外の回答

1〜1件/1件中

mophusy2さん

2010/2/408:20:39

ヘッダーをフラッシュに変更できるサイト見つけました。

一度参考にどうぞ

http://ameblo.jp/materialprovision/

http://www.material-pro-vision.com/

ちょい足しを取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

ID/ニックネームを選択し、「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。

ほかのID/ニックネームで利用登録する