左右のコラムを入れ替えました/ブログのカスタマイズ

このブログですが、元々、サイドメニューが左、記事が右で読みにくかったので、困っていたところ、ポップアップ広告が出るようになって余計に困った状況になりました。どこのブログサービスもそうですが、ブログのテンプレートというのは、読むという視点が全くないのです。困ったものです。

それで左と右を入れ替えることにしました。どこでやっているのだろうと思ったのですが、#LINKでした。ここのfloatの値を左右ひっくり返せばいいだけでした。簡単。

これで左右はひっくり返りましたが、サイドメニューにポップアップ広告が重なってしまうので、全体を左端に持ってきます。これは#containerの設定で簡単にできます。左のmarginを「0」にして、右のmarginを300pxにするだけのことです。と言うか、右は300pxではなく、autoでいいと思います。

しかし、そうすると、背景画像がまずいことになります。絵が左にありますから、これを右に持ってこないといけません。簡単な方法としては、画像処理ソフトで左右反転させることです。

これで一発で終わりますが、何となく見慣れた絵が左右逆になっているとちょっと変な感じがしないこともありません。そこでメイドさんの絵を切り抜いて、右の方に貼って、移動させました。元のところには、色を塗って、雪をコピーして貼り付けておきました。

この画像をアップロードして、スタイルシートの背景画像のURLを変更し、左寄せから、右寄せに変更すれば終わりです。ついでに、上のバナーが邪魔なので、背景画像を50px下にずらしました。そして、上の余った高さ50px分には同色の#FBFDFCを指定しました。

なんか句読点で始まる行があって変だと思ったら、「word-break: break-all;」と言うのが共通設定の中に入っていました。何でこんなものが入っているのかしりませんが、ついでに削除しておきました。

これでいいのですが、もっと意欲的になりました。せっかくのメイドさんの顔がポップアップ広告に隠れてしまいます。さて、どうしましょうか。

記事とメニューのコラムは合わせて、800pxの幅があります。と言うことは、メイドさんの左端が左から820pxぐらいのところに来るように配置して、背景画像を左寄せに戻してやればいいです。

それでそうして見ました。いい具合です。もちろん、1024x768の解像度では何も変わりませんが、と言うか、左半分しか見えませんが、横長の画面では、メイドさんはコラムにぴったりくっついて、ポップアップ広告ははるか右端に来ます。

アニセンさんにお金をもうけてもらわないと困るので、たまにはポップアップ広告をクリックして何か買うようにしましょう。ね!