カスタマイズにあたって土台としたスキンは、『CSS編集用デザイン』です。

このスキンはCSSを用いて自分で飾り付けをしていくのが前提になっているので、
そのまま用いると広告の方が目立ち、華がないブログになります。

ですので、次のことを念頭に置きながら、デザインを考えました。

• アメブロのイメージカラーに合わせる
• ヘッダーにインパクトを出す
• コンテンツの区切りを分かりやすくする (枠組みを整える)
• ナビゲーションを設置する
• 広告をスキンに馴染ませる

また、個人的に、アメブロはサービス自体にポップなイメージを抱いているので、
少し柔らかい雰囲気にしようと意識しながらカスタマイズに着手しました。

バナー広告や、テキスト広告など、大きなものから小さなものまで様々なので、
こうした広告の存在が、デザインを妨げる要因になることもあります。

広告はCSSの『display: none;』等で無理やり非表示にすることも可能ですが、
アメブロの規約上、広告を故意に非表示にするのはよろしくありません。

今回、このサイトのスキンをデザインするにあたって、
広告が表示されていても違和感のない雰囲気にしようと
テキストやリンク、枠線などの色をスキンカラーに合わせたり、表示幅を調節したりと、
"調和させる"、"馴染ませる"を強く意識しています。

デフォルトのスキンデザインだと、特にメインカラムで表示される広告が、
各々の横幅が違い、色がばらばら、といった雑な雰囲気になっていました。

広告にもデザインを配慮してあげると、全体としての見栄えに統一感が出たので、
デザイン上、見落としたくないポイントだと思います。

• スキンカスタマイズ
• 作品としての公開

アメブロは、HTMLが編集できない特殊なブログですが、
CSSだけで思い通りのレイアウトを組む非常に良い練習になりました。

このブログの制作時期、ブログを作成するにあたって用いたツールをまとめました。