「ビジネスに役立つ」アメブロ・カスタマイズ

しばらく放置して、久々にコードを見たら、
色々と解決案が思いついたので、直しました。

これで広告が出ても出なくても、レイアウトが崩れる事はまず無いです。
よかったよかった。

• 
• 
• ツイート

ズレてますね…。

一番上の大きいバナーが消えたのが原因です。
また対策を考えないと…。




（追記）

画像が壊れていたので消しました。
なんどアップし直してもエラーになるか画像が壊れてしまいます。
アメブロの仕様なのでしょうか。

画像は明日またチャレンジしてみます。

（追記）2011.1.30

画像追加できました。

• 
• 
• ツイート

クリックで拡大

タイトル周りとサイドバーを作りました。

細かい部分がズレていたり、余白がおかしかったり、
色々とツメが甘いですが、とりあえずこの調子で大雑把に進めます。

• 
• 
• ツイート

（クリックで拡大）

かなり強引に作ったユーザーナビエリア。

• 
• 
• ツイート

ユーザーナビエリアとは、
ブログタイトルの上の「ルーム｜ピグ」などと書かれている場所のことです。

やった事は３つ

１．背景に画像
２．枠の白を消す
３．文字を変更

です。

順番に説明します。

１．背景に画像

ユーザーナビエリアのバックは黒の帯になっているのですが、
この部分は

こういう画像を作っておいて、

http://stat.blogskin.ameba.jp/blogskin_images/20101212/22/0f/ea/j/o00100023ameblo-css-customize1292161206512.jpg

横にタイル状に連続して並べることで表現します。
こうすると、ページの幅に関係なく画面幅いっぱいの帯を作ることができます。

【コード修正】

/*５）ページ背景に画像を入れる*/
body{
background: #fff url(http://stat.blogskin.ameba.jp/blogskin_images/20101212/22/0f/ea/j/o00100023ameblo-css-customize1292161206512.jpg) repeat-x 0px 60px;
}

２．枠の白を消す

「コンテンツ全体」の背景に白色が設定されていて、
ページ背景に入れた画像に被っているので消します。

【コード修正】

/*■コンテンツ全体*/
#frame{
}

３．文字を変更

ここが今日のポイントです。

ユーザーナビエリアは「userNaviArea」というidが付いているのですが、
カスタマイズするＣＳＳにはその指定がありません。

詳しく見てみると私たちがカスタマイズできるＣＳＳとは別に、
「naviarea.css」という別のＣＳＳに記述があるようです。

ＣＳＳでは後から読み込まれた指定が優先されるルールなのですが、
この「naviarea.css」は私たちがカスタマイズできるＣＳＳよりも
後に読み込むようになっているため、普通にやるとカスタマイズできません。

実際、私がネットを検索した限りではどこを探しても、
「ここはカスタマイズできない」と書いてありました。

ただ、確かに普通はできないのですが、工夫するとできます。

先ほど、ＣＳＳでは後から記述された事が優先されると言いましたが、
「!important」を付けると、そのスタイルを
後から記述したスタイルよりも優先させることができます。

ということで、大変醜いコードになりますが、
全部のスタイルに「!important」を付けました。

【コード追加】

/*userNaviArea*/
div#userNaviArea{
color: #ccc !important;
font-size:11px !important;
padding:4px 0 4px 0 !important;
}

div#userNaviArea a#userNickName{
float:right !important;
padding:0 5px 0 0 !important;
color: #fff !important;
font-size:11px !important;
}

div#userNaviArea a{
color: #fff !important;
font-weight:normal !important;
}

ul#navigationList{
margin:0 !important;
padding:0 !important;
list-style-type:none !important;
}

ul#navigationList li{
float:right !important;
margin:0 !important;
padding:0 11px 0 0 !important;
border-right:none !important;
}

ul#navigationList li.lastItem{
border:none !important;
padding-right:25px !important;
margin-right:-15px !important;
}

で、できたのがこの状態です。

http://ameblo.jp/ameblo-css-customize/entry-10735440860.html

• 
• 
• ツイート