前回の記事の後、判明した点など。

横幅が980pxになり、広告が増えた

これは、どうやら2011年にアメブロ側が変更したらしい。
画面の最上部にはドーンと広告スペースを設け、到底見栄えがいいとは言えない。
広告が増え、ユーザーからの評価は芳しくない変更だったようす。

サイドバーの「プロフィール」や「ブックマーク」の背景に画像を設定

デフォルトのままだとCSSで背景色や文字色は変えられるけど、個別に画像は出せないかとあきらめかけていた。

しかし、他のブログを見ていて、普通にCSSで書き換えられる仕様だということに気づく。下はプロフィールに画像を設定する場合の書き方。

.profileMenu .skinMenuHeader {
    background: url("http://(画像のURL)") no-repeat scroll left top transparent;
    height: 20px;
    margin: 0 0 5px;
    padding: 0;
    width: 300px;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}

画像を配置するだけだと、「プロフィール」などのテキストの文字も表示されてしまうので、

text-indent:100%;
white-space:nowrap;
overflow:hidden;

の部分でテキストは表示されないよう設定している。
これに関しては、

text-indent:-9999px;

でも同様に表示されなくできるが、あまり美しくないので。

右側のサイドバーの最上部に出てくる広告の位置を変えたい

広告関連は、当然アメブロ運営側の生命線だし、そもそも広告関連をいじることはできないだろうと思っていた。
しかし、他のブログを見ていて発見したのが

.skinSubA {
    margin-top: 230px;
}

のように、サイドバー全体を下に押し下げておいて、

.recentEntriesMenu {
    position: absolute;
    top: 30px;
}

と、上にもってきたい部分の場所をposition: absolute で指定するという手法。

確かに、これは効くのかもしれないが、さすがに広告周りをいじると、仮にうまくいっても、いずれアメブロ側にサイト毎消される可能性もあるので、実装は避けておいた。

フリープラグインを使って全体の横幅を変更

CSSのカスタマイズではできないが、フリープラグインならできるのかと思いトライしてみたが、

<style type="text/css">
.skinHeaderArea, .skinContentsArea{
width:800px;
}
</style>

これをフリープラグインに設定すると、確かに横幅が800pxになるものの、結局広告が表示されているサイドバー部分の横幅をいじることはできない。
すなわち、メインコンテンツ部分の幅がやたら狭くなってしまうというわけ。
これでは、とても実用に耐えないので却下。

アメブロ1つをとっても、いろいろとあるもんだ。
勉強にはなった。

内容が関連してそうな記事