アメブロのデザインカスタマイズ。CSS編集にチャレンジ

ひょんなことから、Webの制作の仕事に付随して、アメブロのデザインカスタマイズの仕事が転がりこんできた。

以前、家族のブログでちょっとだけその仕組みについて触ったことはあったけど、細かいところまでは踏みこんでいない。

いざトライしてみると、、、
問題点が続出。

横幅は980px固定

アメブロの仕様上、横幅は980px固定。クライアントからもらっていたのは800px。おそらく昔のスタイルのタレントブログとかを見て、800pxで作ってきたのではないかと想像。

CSSで使用する画像のアップロード問題

CSS編集のところで画像をアップすると勝手に画質が落とされる。仕方ないので、通常の画像アップロードで画像をあげて、そのURLを試してみるとそちらは大丈夫。
しかしそれも、後ほど980pxの画像をあげたら、勝手に800pxにリサイズされる仕様っぽいことが判明。結局他のサーバーに置いた画像をCSSで読み込むことにした。

サイドバーへのリンク付き画像配置

クライアントからは、サイドバーに画像を配置するデザインが指定されているが果たして可能なのかも不安だった。しかし、フリースペースにaタグ、imgタグを設置し、サイドバーの設定でフリースペースを最上部に持ってきたら問題なく配置できた。

画面左側に余白がさしこまれる

これは上位のCSSでmin-widthが1100pxに指定されていることが原因。CSSでその値を980pxに指定することで解決。