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

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

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

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

「CSS編集用デザイン」で提供されるCSSを編集することで、パソコンやiPad向け画面のデザインをカスタマイズすることができます。

アメブロのデザイン選択画面では「CSS編集用デザイン」という名前で4種類のデザインが用意されていますが、その中の新しいタイプ3種類を、当サイトでは「新CSS編集用デザイン」と呼んでいます。

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

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

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

いずれのサイズもカスタマイズで変更できますので、あくまでも初期状態のご紹介です。

なお、くどいようですが、当記事の対象となるのは、新タイプ(第2世代)のCSS編集用デザインであり、旧タイプ(第1世代)のCSS編集用デザインには当てはまりませんのでご注意下さい。

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

新CSS編集用デザインは、ヘッダー部、ボディ部ともに、横幅は1120ピクセルになっています。

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

ですので、ヘッダー画像やボディ部の背景画像を作る際は、横幅を1120ピクセルにするとピッタリと納まります。

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

当方の環境で確認したところ229ピクセルでしたが、常にこの高さだとは思わないほうが良いでしょう。

ヘッダー部の高さについては、アメブロにヘッダー画像を表示するカスタマイズ方法でも触れていますので、よろしければご参照下さい。

なお、ヘッダー部とボディ部の間に標準のナビゲーションバーがありますが、これも同じく、横幅は1120ピクセルです。

ナビゲーションバーの高さは75ピクセルになっています。

サイドバーの幅

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

横幅は、それぞれ、

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

となっています。

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

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

なので、もし、各ウィジェットに枠を付けたい場合などは、サイドバーの幅を広げたり、余白の調整をするなどの工夫が必要になります。

記事の幅

最後に記事の幅です。

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

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

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

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

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

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

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

まとめ

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

カスタマイズをする際や、画像のおさまり具合を考える際には、横幅がどのような設定になっているかを知っておくと便利ですので、よかったら参考にして下さい。

関連記事

アメブロ新CSS編集用デザインのレイアウト概要” に対して1件のコメントがあります。

  1. 山口 哲代 より:

    いつもありがとうございます。
    これからもすごく頼りにしています。どうぞよろしくお願いいたします。
    沢山のカスタマイズをしていないので、httpsになってもまあまあで済んでいますが、なにかとわからないことが有る度、訪れています。ホンマに心強い限りです。有難うございます。

    1. matsmoto より:

      山口さん
      コメントありがとうございます。
      こちらこそ、これからもよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。