ここから本文です

解決済みのQ&A

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

kdslqhv7さん

アメブロでの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
トップ画の下にメニューを取り付けたいです
最後まで詳しく教えてください宜しくお願いします

  • 質問日時:
    2010/2/2 20:18:04
  • 解決日時:
    2010/2/7 18:55:03
  • 閲覧数:
    4,193
    回答数:
    2

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

kiyoto_777さん

■私のナビメニュー
★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

グレード

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

(1件中1〜1件)

 

mophusy2さん

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

一度参考にどうぞ

http://ameblo.jp/materialprovision/

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

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

総合Q&Aランキング

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

知恵コレに追加する

閉じる

知恵コレクションをするID/ニックネームを選択し、「追加する」ボタンを押してください。
※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。

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