CSS編集用デザイン(新タイプ/第二世代)レイアウト概要

アメブロのデザインを新タイプの「CSS編集用デザイン」に変更した時の、パソコン(含iPad)向けページのレイアウトについてご紹介します。

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

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

(何れもCSSの編集によるカスタマイズで変更できる部分なので、あくまでも初期状態の紹介です。)

新タイプの「CSS編集用デザイン」レイアウト概要

それでは、以下、新タイプの「CSS編集用デザイン」のレイアウトをご紹介します。

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

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

新タイプ(第二世代)のCSS編集用デザインの初期状態では、ヘッダー部、コンテンツ部ともに、横幅は1120ピクセルになっています。

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

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

また(例えば、Windows7+Google Chromeの環境で見たときの)ヘッダー部の高さの初期値は229ピクセルでしたが、これは、使用するフォントや、ブログタイトル、ブログ説明文の内容によって変動しますので、この値をそのまま使うことは避けたほうが良いでしょう。

詳しくは、アメブロのヘッダー画像を表示するカスタマイズ方法などを参考にして下さい。

なお、ヘッダー部とコンテンツ部の間に標準のナビゲーションバーがありますが、ナビゲーションバーの高さは75ピクセルになっています。

サイドバーの幅

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

それぞれ横幅が、

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

となっています。

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

なお、サイドバーの各パーツ(WordPressと同じようにウィジェット=Widgetと呼びます)は、タイトル、コンテンツともに横幅いっぱいに配置されるようになっていますので、各ウィジェットに枠を付けたい場合などは、サイドバーの幅を広げるなどの工夫が必要だと思います。

記事の幅

最後に記事の幅です。

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

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

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

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

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

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

まとめ

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

特に、画像のおさまりを考える際に横幅がどのような設定になっているかを知っておくと便利ですので、よかったら参考にして下さい。

よろしければフォローお願いします

CSS編集用デザイン(新タイプ/第二世代)レイアウト概要” に対して 2 件のコメントがあります

  1. 山口 哲代 より:

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

    1. matsmoto より:

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

コメントを残す

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

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