【改造サンプル】ブログにメニューをつけてみる | CSS勉強中スタッフのブログ

CSS勉強中スタッフのブログ

アメブロでブログデザイン・ブログ改造・カスタマイズ!

$CSS勉強中スタッフのブログ  -アメブロ改造・カスタマイズ

こんにちはチョキ
CSS勉強中スタッフです


今日はブログにメニューをつけてみる改造のサンプルを紹介するよアップ


サンプル
$CSS勉強中スタッフのブログ  -アメブロ改造・カスタマイズ



1 フリースペースにタグを入れる

サイドバーの設定

フリースペースの編集
※★のところに 自分のアメーバIDを入れてね
※タグの途中に改行は入れないでね
<div id="myFreeArea"><a href="http://ameblo.jp/★/">BLOG</a><a href="http://now.ameba.jp/★/">NOW</a><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=★">PETA</a><a href="http://pigg.ameba.jp/?targetAmebaId=★">PIGG</a></div>



サイドバーの配置
※フリースペースをどこかに配置してね。
使用しない機能にフリースペースが入ったままだとできません。




2 CSS編集する
※CSS編集の一番下に書いて下さい

.skinContentsArea{
position:relative;
padding-top:48px;
}
#myFreeArea {
position:absolute;
top:0px;
left:0px;
height:46px;
width:980px;
overflow:hidden;
}
#myFreeArea a{
display:inline-block;
width:221px;
margin:2px;
padding:0 10px;
background: url(http://stat100.ameba.jp/common_style/img/skin/cmn/bg/transparent/transparent_fff_8.png);
border-radius:7px;
line-height:2em;
font-size:18px;
font-family: Tahoma;
font-weight: bold;
color:#333;
text-decoration:none;
}







できたかな?

もっとできる人は、
メニューのHTMLやCSSはサンプルを参考にいろいろ変えてみてねチョキ

例えば、メニューの「PIGG」を「読者になる」に変える場合、

<a href="http://pigg.ameba.jp/?targetAmebaId=★">PIGG</a>

<a href="http://blog.ameba.jp/reader.do?bnm=★">CHECK</a>
に変えてみてね

※★にはアメーバIDを入れてね
※CHECKという文字は 読者とか購読とかでもOKだよ


ペタしてね





はてなマークCSS編集をやってみたけど、なぜかうまくできない。原因が分からない人
→この記事を見てみてね

はてなマークCSS?カスタマイズ?って 何かよく分からない人
→この記事を見てみてね


※このブログのカスタマイズは、「CSS編集用デザイン」 を使ったもので、CSS編集用デザイン以外のCSS編集に対応していません。

※画面や仕様は記事が投稿された時のものです。