CSS編集用デザイン レイアウト概要

  • アメブロ
  • このエントリーをはてなブックマークに追加

アメブロで、カスタマイズ用ベースデザイン「CSS編集用デザイン」を選択した時の、PC向けページのレイアウトについてご紹介します。

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

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

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

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

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

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

ヘッダー画像やコンテンツ部背景画像を作る際は、横幅=1120ピクセルで作成すると良いでしょう。

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

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

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

サイドバーの幅

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

それぞれ横幅が、

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

になっています。

フリースペースに画像バナーを貼る場合などは、この幅に合わせるといいと思います。

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

記事の幅

アメブロのCSS編集用デザインは、大きく分けて2カラムと3カラムのレイアウトがありますが、全体幅はどちらも同じですので、記事領域の横幅も2カラムの場合と3カラムの場合で異なります。

まず、

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

そして、

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

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

ただし、記事の幅よりも横幅が大きい画像は、記事の幅まで自動的に縮小して表示されるようになっていますので、自動縮小が気にならない場合は、大きめにアップロードしておくと良いかもしれません。

なお、どちらのレイアウトの場合も記事領域の周辺には広めの余白が確保されていますので、記事に枠を付けたい場合や記事幅を変えたい場合なども、調節は比較的容易です。

まとめ

アメブロのカスタマイズ用ベースデザイン「CSS編集用デザイン」の、重要と思われる箇所のレイアウト、横幅などについてご紹介しました。

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

関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す