Q。横メニューって何?
A。このブログの左下にあるようなものです。
沢山並んでますよね
まずは↓のタグをフリースペースにコピペ。
<div id="topmenu"><ul><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></div>
メニュー項目が5つの場合の例です。
もっと項目を増やしたい方は
緑色の</ul>の前に↓を足したいぶんの項目だけ
付け足してください。
<li><a href="項目のURL">項目の文字</a></li>
次に、↓のタグをCSS欄の最後にコピペです。
アイフレ&横メニューつき素材屋風改造の記事のタグを
全部貼り済みな方は灰色の部分は絶対消してください。
.skinFrame2{
position:relative;
margin:auto;
width:1000px;
}
#topmenu {
width:●px;/*横メニュー全体の横幅*/
line-height:1;
display: block;
position:absolute;
top:●px;/*横メニューの上からの位置*/
left:●px;/*横メニューの左からの位置*/
z-index:999;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width:●px;/*1つの項目の横幅*/
text-align:center;
display:inline;
list-style:none;
float:left;
}
#topmenu li a {
color:#■;/*項目の文字色*/
font-size:●px;/*項目の文字サイズ*/
border:●px ▲ #■;/*項目の枠の太さ 種類 色*/
background-color:#■;/*項目の背景色*/
padding:●px;/*文字と上下の隙間の大きさ*/
margin:0;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color:#■;/*カーソル乗せたときの文字色*/
border:●px ▲ #■;/*カーソル乗せたときの枠の太さ 種類 色*/
background-color:#■;/*カーソル乗せたときの背景色*/
}
/*横メニュー全体の横幅*/のことですが･･
/*1つの項目の文字*/ × 項目数 = /*横メニュー全体の横幅*/
↑を計算して出したほうがやりやすいです。
たとえば、項目数が8個で1つの横幅が100pxなら
100px × 8個 = 800px
で、/*横メニュー全体の横幅*/は800pxになります。
簡単に言うとこういうことです
作った小さなアイフレが横メニューを載せる場所となります
基本的な横メニューを作りました
アイフレは自分の好きな大きさ、形に作り
↓のほうからコピペしてつくってもOKです
ですが、これは基本的なので
他にちがう横メニューを付けたい場合は
上のを参考にして作ってください
ここからほしいものをコピペしてください
★自分のID★のところには、この通りに自分のIDを入れてください。
これでOKです
✪基本的横メニュー✪
自分のブログのトップへ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://ameblo.jp/★自分のID★" title="このブログのトップへ" id="navi01">Top</a></div>
自分のブログの記事一覧へ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://ameblo.jp/★自分のID★/entrylist.html" title="記事一覧" id="navi02">Titles</a></div>
自分のブログの画像一覧へ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://ameblo.jp/★自分のID★/imagelist.html" title="画像一覧" id="navi03">Pictures</a></div>
自分のプロフィールへ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://profile.ameba.jp/★自分のID★" target="_blank" title="プロフィールへ" id="navi04">Profile</a></div>
自分のペタ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=★自分のID★" title="ペタする" id="navi05">Peta</a></div>
自分へのアメンバー申請
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=★自分のID★" title="アメンバーになる" id="navi06">Amenber</a></div>
自分への読者登録
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://blog.ameba.jp/reader.do?bnm=★自分のID★" title="読者になる" id="navi07">Reader</a></div>
自分へのメッセージ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=★自分のID★" title="メッセージを送る" id="navi08">Message</a></div>
自分へのプレゼント
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://present-shop.ameba.jp/shop/top?toAmebaId=★自分のID★" target="_blank" title="プレゼントを贈る" id="navi09">Present</a></div>
自分のなうへ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://now.ameba.jp/★自分のID★" title="アメーバなう" id="navi10">Now</a></div>
自分の参加しているグルっぽ一覧へ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://group.ameba.jp/user/groups/★自分のID★" title="グルっぽ" id="navi11">Groupo</a></div>
自分のピグの部屋へ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://pigg.ameba.jp/?targetAmebaId=★自分のID★" target="_blank" title="ピグの部屋" id="navi12">Pigu</a></div>
帰る（マイページへ）
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://www.ameba.jp/" title="「マイページ」へ戻る" id="navi13">My Page</a></div>
です！
これが基本的ですね
私のもそうです。【左下の】
もらうときはコメントお願いします
A。このブログの左下にあるようなものです。
沢山並んでますよね
まずは↓のタグをフリースペースにコピペ。
<div id="topmenu"><ul><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></div>
メニュー項目が5つの場合の例です。
もっと項目を増やしたい方は
緑色の</ul>の前に↓を足したいぶんの項目だけ
付け足してください。
<li><a href="項目のURL">項目の文字</a></li>
次に、↓のタグをCSS欄の最後にコピペです。
アイフレ&横メニューつき素材屋風改造の記事のタグを
全部貼り済みな方は灰色の部分は絶対消してください。
.skinFrame2{
position:relative;
margin:auto;
width:1000px;
}
#topmenu {
width:●px;/*横メニュー全体の横幅*/
line-height:1;
display: block;
position:absolute;
top:●px;/*横メニューの上からの位置*/
left:●px;/*横メニューの左からの位置*/
z-index:999;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width:●px;/*1つの項目の横幅*/
text-align:center;
display:inline;
list-style:none;
float:left;
}
#topmenu li a {
color:#■;/*項目の文字色*/
font-size:●px;/*項目の文字サイズ*/
border:●px ▲ #■;/*項目の枠の太さ 種類 色*/
background-color:#■;/*項目の背景色*/
padding:●px;/*文字と上下の隙間の大きさ*/
margin:0;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color:#■;/*カーソル乗せたときの文字色*/
border:●px ▲ #■;/*カーソル乗せたときの枠の太さ 種類 色*/
background-color:#■;/*カーソル乗せたときの背景色*/
}
/*横メニュー全体の横幅*/のことですが･･
/*1つの項目の文字*/ × 項目数 = /*横メニュー全体の横幅*/
↑を計算して出したほうがやりやすいです。
たとえば、項目数が8個で1つの横幅が100pxなら
100px × 8個 = 800px
で、/*横メニュー全体の横幅*/は800pxになります。
簡単に言うとこういうことです
作った小さなアイフレが横メニューを載せる場所となります
基本的な横メニューを作りました
アイフレは自分の好きな大きさ、形に作り
↓のほうからコピペしてつくってもOKです
ですが、これは基本的なので
他にちがう横メニューを付けたい場合は
上のを参考にして作ってください
ここからほしいものをコピペしてください
★自分のID★のところには、この通りに自分のIDを入れてください。
これでOKです
✪基本的横メニュー✪
自分のブログのトップへ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://ameblo.jp/★自分のID★" title="このブログのトップへ" id="navi01">Top</a></div>
自分のブログの記事一覧へ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://ameblo.jp/★自分のID★/entrylist.html" title="記事一覧" id="navi02">Titles</a></div>
自分のブログの画像一覧へ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://ameblo.jp/★自分のID★/imagelist.html" title="画像一覧" id="navi03">Pictures</a></div>
自分のプロフィールへ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://profile.ameba.jp/★自分のID★" target="_blank" title="プロフィールへ" id="navi04">Profile</a></div>
自分のペタ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=★自分のID★" title="ペタする" id="navi05">Peta</a></div>
自分へのアメンバー申請
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=★自分のID★" title="アメンバーになる" id="navi06">Amenber</a></div>
自分への読者登録
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://blog.ameba.jp/reader.do?bnm=★自分のID★" title="読者になる" id="navi07">Reader</a></div>
自分へのメッセージ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=★自分のID★" title="メッセージを送る" id="navi08">Message</a></div>
自分へのプレゼント
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://present-shop.ameba.jp/shop/top?toAmebaId=★自分のID★" target="_blank" title="プレゼントを贈る" id="navi09">Present</a></div>
自分のなうへ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://now.ameba.jp/★自分のID★" title="アメーバなう" id="navi10">Now</a></div>
自分の参加しているグルっぽ一覧へ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://group.ameba.jp/user/groups/★自分のID★" title="グルっぽ" id="navi11">Groupo</a></div>
自分のピグの部屋へ
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://pigg.ameba.jp/?targetAmebaId=★自分のID★" target="_blank" title="ピグの部屋" id="navi12">Pigu</a></div>
帰る（マイページへ）
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'><div id="navi00"><a href="http://www.ameba.jp/" title="「マイページ」へ戻る" id="navi13">My Page</a></div>
です！
これが基本的ですね
私のもそうです。【左下の】
もらうときはコメントお願いします