目次

アメブロの新CSS編集用デザインのレイアウト概要

  • アメブロをカスタマイズするために画像を作ろうと思っている。
  • アメブロのカスタマイズで使う画像の適切なサイズがわからない。

新CSS編集用デザインについて

アメブロの「CSS編集用デザイン」は、デザインのカスタマイズのためにユーザー自信が編集できるブログデザインCSS(以下、CSS)が提供されている、カスタマイズ専用のベースデザインです。

CSSを編集することで、パソコンやiPad向け画面のデザインをかなり自由にカスタマイズすることができます。

アメブロのデザイン選択画面を見ると、CSS編集用デザインという名前のデザインが4つありますが、その中でサイドバーのプロフィール画像が丸く表示されている3つが当サイトで主にカスタマイズ対象としている新CSS編集用デザインです(新CSSと呼ぶこともあります)。

残りの1つを旧CSS編集用デザイン(または、旧CSS)と呼んでいます。

当記事では、この新CSS編集用デザインの初期状態のレイアウト(各パーツのサイズなど)について簡単にご紹介したいと思います。

  • ヘッダー画像のサイズ
  • 記事内で利用する画像サイズ
  • サイドバー(フリースペース等)に貼り付けるバナーのサイズ

などの目安になると思いますので、よかったら参考にして下さい。

なお、いずれのサイズもカスタマイズで変更できますので、あくまでも初期状態の情報であることをご承知置きください。

ブログ全体の横幅とヘッダーの高さ

新CSS編集用デザインは、(ブログタイトルと説明文のある)ヘッダー部、(サイドバーを含めた)コンテンツ部ともに、横幅=1120ピクセルになっています。

旧CSS編集用デザインでは980ピクセルでしたので、140ピクセル広くなっています。

ヘッダー画像やコンテンツ部の背景画像を作る場合は、横幅を1120ピクセルにするとコンテンツ幅にピッタリ納まります。

もし画面の表示幅が1120ピクセルよりも大きい場合(たいていそうだと思いますが)、1120ピクセルを越えた分は余白として両側に均等に配置されます。

また、ヘッダー部の高さは、使用するフォントや、ブログタイトル・ブログ説明文の長さなどによって変動しますので一概に言えません。

管理人のPCで確認したところ229ピクセルでしたが、常にこの高さだとは思わないほうが良いでしょう。

なので、ヘッダー画像を設置する場合などは、CSSにしっかりと高さを指定したほうが良いでしょう。

なお、ヘッダー部のすぐ下に標準のナビゲーションバーがありますが、これも同じく、横幅は1120ピクセルで、高さは上下の1ピクセル幅の境界線も含めて75ピクセルです。

記事領域の幅

アメブロには、(サイドバーを含めた)コンテンツ部のカラムレイアウトが、大きく分けて、2カラム(メイン+サイドバー)と3カラム(メイン+サイドバー+サイドバー)がありますが、全体の幅はどちらも同じですので、2カラムの場合と3カラムの場合では、メインカラムの横幅が異なり、それに合わせて記事の幅も変わってきます。

2カラムの場合記事の幅は620ピクセルです。

3カラムの場合記事の幅は440ピクセルとなります。

画像を記事の幅ピッタリのサイズにしたい場合は、画像の横幅をそれぞれのカラム数の場合の記事幅に合わせてリサイズしてアップロードすると良いでしょう。

ただし、記事の幅よりも横幅が大きい画像は、自動的に縮小して記事幅で表示されるように設定されていますので、縮小による画像の「ぼやけ」や、画像のファイルサイズ(容量)があまり気にならない場合は、やや大きめのサイズでアップロードしておくと、後に記事の幅を広げた時などにも違和感なく表示できて良いのではないでしょうか。

あまりにも大きすぎる画像は、読者の端末での表示に時間がかかってしまい、読者が離脱する(ページを閉じてしまう)要因になりますのでご注意下さい。

なお、2カラム、3カラムどちらのレイアウトの場合も、記事領域の周辺には広めの余白(padding)が確保されていますので、記事に枠を付けたい場合や記事幅を微調整したい場合などは、この余白部分を利用して比較的容易に実現できます。

余白(padding)の大きさは、2カラムの場合は上30ピクセル、左右50ピクセルずつで、3カラムの場合は上・左右とも30ピクセルずつとなっています。

サイドバーの幅

新CSS編集用デザインのサイドバーには、幅の広いサイドバー(2カラム、3カラム設定とも)と、幅の狭いサイドバー(3カラム設定のみ)があります。

横幅は、それぞれ、

  • 幅の広いサイドバー → 300ピクセル
  • 幅の狭いサイドバー → 200ピクセル

となっています。

フリースペースに貼り付けるバナー画像を作る場合などは、これに合わせると良いでしょう。

また、2カラムレイアウトの場合は50ピクセル、3カラムレイアウトの場合は30ピクセルの余白(margin)がサイドバーの左右に設定されているため、左右の余白(margin)も含めると占有する横幅は、2カラムレイアウトの場合は400ピクセル、3カラムレイアウトの場合は360ピクセルと260ピクセルになります。

なお、サイドバーの各パーツ(ウィジェット=Widgetと呼ばれるようです)は、タイトル、本体ともに、内部のコンテンツがサイドバーの横幅いっぱいに配置されるようになっています。

なので、ウィジェットに枠を付けたい場合などは、サイドバーの幅を広げたり、余白の調整をするなどの工夫をしないと、ウィジェットの内部の配置が崩れてしまう可能性がありますので注意が必要です。

まとめ

以上、アメブロの新CSS編集用デザインで、比較的重要だと思われる箇所のレイアウトについてご紹介しました。

特に各所の横幅の設定を知っておくことは、カスタマイズをする時や画像のおさまり具合を考える時に役立ちますので、よかったら参考にして下さい。