スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ヘッダー画像の下に横並びにメニューボタンを設置する!その1。文字で楽々偏

「ツイッター」「なう」みたいなショートブログやってる? ブログネタ:「ツイッター」「なう」みたいなショートブログやってる?
ヘッダー画像の下に横並びに
メニューボタンを設置する!


おぉ。字が変だ!ヮ(゚д゚)ォ!なにこれ?


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!




 アップこれこれ☆コレしたかったんですよー。(*´∀`*)

よく見ますよねー。思ったより簡単に出来ました。でも付けただけで全て工事中です。

細かい変更は又後回しにしまーす( ??_ゝ??)キラーン


まずは・・


フリースペースに<ul>と<li>を使いリスト構造でメニューを作成します

項目を増やしたい時はリンク先をコピーして増やせば良いです。

あと改行を全て取り消さないと階段みたいになって画像がずれてました。(爆)


<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></ul></div>


続いてCSSの一番下に貼りつけ。
/*ベーシックスキン メニュー5個*/

#topmenu {
width: 800px;/*スキンの幅*/
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字*/
line-height:2;
display: block;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 150px;/*1つの幅*/
margin: 0 2px;/*メニューのスキマ*/
border: 3px double #fff;
background-color:#009900;
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*文字色*/
border: 1px solid #ffffff;
margin: 1px;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color: #ffffff;/*オンマウス時文字色*/
background-color:#99FF00;/*オンマウス時背景色*/
}


#wrap{
margin-top:50px;
}

#frame {/*おまじない(すでにある場合は必要ないです)*/
position: relative;
}

#topmenu{
position: absolute;
top:0px;/*上から*/
left:0px;/*左から*/
z-index: 100;
}

おぉ。。ずれずれ。。自分のブログに合わせるために色々いじらなくてはなりません。
ツイッターもなうもよくわかんないんですよねー。なうはアメブロ記事を書いたときにポチっとやってます。
たまにオーハシさんとはなこさんがかまってくれます。ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ
自分からはごはんなうぐらいかな☆ツイッター友だちがよくやってるみたいです。
携帯からとかやったらマメにできていいかもねー(*´∀`*)
ちょ。。もうタバコが吸いたくてたまらないので買ってきます!次はコレに画像をつけるのに挑戦してみたいとおもいまーす!あ。素材がないので作りことからせなあかんわぁ。。暇人パワーです!
ではでは行って来まーす。
ハルの量産型テポドン夢日記
劉備玄徳
                                                  人気ブログランキング
スポンサーサイト

comment

管理者にだけ表示を許可する

05 | 2017/06 | 07
Su Mo Tu We Th Fr Sa
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
プロフィール

ハル

Author:ハル
プリプリの保育士です。
アメブロで「量産型テポドン」という保育園の可愛い子ども達と心暖まる健全な日記を書いてますが、もうすぐ恐怖のメンテナンスがあり、アカウントごと削除されそうな予感がしてきますたので疎開してきますた。
ギブミーチョコレート
( ☣ฺ_ゝ☣ฺ)キラーン♡

カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カウンター
カウンター
見てる
見てる
現在の閲覧者数:
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。