アメブロのCSS編集用デザインは、CSSを編集してデザインを自由にカスタマイズできる唯一のカスタマイズ専用のスキンです。
唯一と言っても同じ名前で選択肢が4つありますが。
当記事では、これらCSS編集用デザインの中では後発で、上記4つのうちの3つが該当する「新CSS編集用デザイン」について、初期状態でのヘッダーやカラムのレイアウト、各パーツのサイズなどをご紹介します。
これらは、カスタマイズするときにも必要になることが多い、
- ヘッダー画像はどんなサイズで作ればよいか？
- 記事枠内に収まりの良い画像のサイズは？
- サイドバーのフリースペースなどに貼り付けるバナーのサイズをどうするか？
などの目安になりますので、よかったら参考にして下さい。
もちろん、どの値もCSSで変更することが可能ですので、あくまでも初期状態では、という前提です。
ブログ全体の横幅とヘッダーの高さ
新CSS編集用デザインは、ブログタイトルと説明文のある「ヘッダー部」、メインカラムにサイドバーを含めた「コンテンツ部」ともに、横幅が1120ピクセルになっています。
なので、ヘッダー画像やコンテンツ部の背景画像を用意する場合は横幅を1120ピクセルにすると良いでしょう。
ちなみに、旧CSS編集用デザインは980ピクセルなので、新CSS編集用デザインの方が140ピクセル広いです。
表示するモニターの横幅が1120ピクセルよりも大きい場合は（PCの場合はだいたいそうだと思いますが）、1120ピクセルを越えた分が余白として左右に均等に配置されます。
iPadの場合は機種によっては横幅が足りませんが、その場合はiPadの画面幅まで自動的に縮小して表示されます。
なお、ヘッダー部の高さは、表示に使用するフォントや、ブログタイトル・ブログ説明文の長さなどによって変動しますので一概には言えません。
管理人のPCで確認したところ229ピクセルでしたが、常にこの高さになるわけではありません。
なので、ヘッダー画像を設置する場合は、そのヘッダー画像に合わせ、ヘッダー部の高さを何ピクセルにするのかをCSSで明確に指定するのが無難です。
それから、新CSS編集用デザインには、ヘッダー部のすぐ下に標準のナビゲーションバーがありますが、これも同じく、横幅は1120ピクセルです。
高さは上下の1ピクセル幅の境界線も含めて75ピクセルになっています。
記事領域の幅
アメブロのコンテンツ部のカラムレイアウトは、大きく分けて、2カラム（メイン+サイドバー）と3カラム（メイン+サイドバーが2つ）の2種類があります。
全体の幅はどちらも同じですので、2カラムの場合と3カラムでは、メインカラムの幅が異なり、それに合わせて記事領域の幅も変わってきます。
まず、2カラムの場合の記事の幅は620ピクセルで、記事エディタでは「大」サイズで画像を貼り付けた時にピッタリ合う幅です。
これに対し、3カラムの場合の記事の幅は440ピクセルとなり、こちらは、記事エディタにちょうど良いサイズが無く、「中」が近いですが、それだと少し横に隙間ができてしまう幅です。
もし、この隙間が気になる場合は、記事の幅いっぱいに画像を表示したい場合は、やはり「大」サイズで画像を貼り付けると良いと思います。
2カラム、3カラムとも、記事領域の周辺には広めの内側余白（padding）が確保されていますので、記事に枠を付けたい時や記事本文の幅を微調整したい場合なども、この余白部分を利用して比較的容易に実現できます。
余白（padding）の大きさは、2カラムの場合は上30ピクセル、左右50ピクセルずつで、3カラムの場合は上・左右とも30ピクセルずつです。
つまり、この余白も含めた記事領域の幅は、2カラムの場合は720ピクセル、3カラムの場合は500ピクセルとなります。
サイドバーの幅
>
新CSS編集用デザインのサイドバーには、幅の広いサイドバー(2カラム、3カラム両方)と、幅の狭いサイドバー(3カラムのみ)があります。
横幅は、それぞれ、
幅の広いサイドバーは、300ピクセル
幅の狭いサイドバーは、200ピクセル
となっています。
フリースペースに貼り付けるバナー画像を作る場合などは、これに合わせると良いでしょう。
また、サイドバーの左右に、2カラムレイアウトの場合は50ピクセル、3カラムレイアウトの場合は30ピクセルの余白（margin）がに設定されています。
左右の余白も含めると占有する横幅は、2カラムレイアウトの場合は400ピクセル、3カラムレイアウトの場合は360ピクセルと260ピクセルになります。
ただし余白がサイドバーの領域の外側なので、このままでは、サイドバーの背景色を設定したりや画像を敷いても余白部分までは反映されません。
もし、それらを行いたい場合は、外側余白(margin)で確保されている部分をを内側余白(padding)に変更するなどの工夫が必要になります。
なお、サイドバーの各パーツ（ウィジェット）は、タイトル、本体ともに、内部のコンテンツがサイドバーの幅いっぱいに配置されます。
なので、ウィジェットに枠を付けたい場合などは、サイドバーの幅を広げたり余白の調整をするなど、工夫をしないと、ウィジェットの内部の配置が崩れてしまう可能性がありますので注意が必要です。
まとめ
以上、アメブロの新CSS編集用デザインで、比較的重要だと思われるヘッダーやカラムのレイアウトとサイズについてご紹介しました。
まとめると、
- ヘッダーの幅は、1120px
- 記事領域の幅は、620px(2カラム)または440px(3カラム)
- 左右余白も含めた記事の幅は、720px(2カラム)または500px(3カラム)
- サイドバーの幅は、300px(幅広)と200px(幅狭)
- 左右余白も含めたサイドバーの幅は、400px(2カラム)または360px(3カラム幅広)と260px(幅狭)
となります。
各パーツが専有している幅を知っておくことは、カスタマイズをする時や画像のおさまり具合を考える時に役立つと思いますので、よかったら参考にして下さい。
