アメブロ新CSSカスタマイズ時の押さえておきたいポイント

blog

3月にアメブロカスタマイズの新CSSが出ました。
時間ができたので、新CSSにデザインを変更してみました。
新CSSのデザインポイントを載せてみたいと思います。

アメブロ新CSSカスタマイズの押さえておきたいポイント

blog

こんな感じで新CSSバージョンにカスタマイズしました。

ヘッダー制作に1時間、細かいカスタマイズに1時間くらいでしょうか。

新CSSってこんな感じ

新CSSは何度かここで記載しているようにフラットなデザインです。

装飾を無理やり入れることもできますが、デザインを生かすには、
ボタンの色を変えるとかタイトルの装飾にちょっと手を加える程度で十分かなと思います。
下手に手を加えたほうが野暮いッス。

グローバルメニューがフルサイズで存在している

画面の端から端までグローバルメニューがありますので、ヘッダーのデザインには結構気を配らないといけません。

ameblo-sample2b

つまり…背景を付けるならフルサイズで作らないといけません。(2000px)

そこで難しいのが、背景の選び方
フリー画像で大きいサイズの画像はありますが、横の長さが長いと縦の長さも大きくなります。
なのでトリミングも難しい。
(自分の写真を入れたい方は、16:9とかヘッダー向きの縦横比に最初から撮影してもらうとよいと思います)

自分で制作するなら切り抜き画像で構成するなど、割と画像編集テクが必要になってきます。
(わたしのブログのヘッダーのように、白背景で中心部分に購入した素材集にあるイラストを入れるという方法もありますが)

ヘッダーデザインが今まで以上に重要!

サイドメニューなどシンプル構造のため、ヘッダーの出来映えが全体の雰囲気を大きく左右します。
デコりすぎてもバランスが悪い。
「シンプルだけど映えるデザイン」という難易度の高いものが求められます。

自作グローバルメニューはつける?

付けたほうが目的の場所に行けるので良いかなと思いつつ、
実際どれだけの人がグローバルメニューをクリックしているのか謎&バランスが気になるのでわたしは付けません。
その分、メッセージボードとサイドメニューにバナーアイコンを付けました。

グローバルメニューは必要!と思う方は、
融通が利くし自然なデザインなので旧CSSのほうがおすすめですよ。

実際に新CSSにしてみて

シンプル派なので、見た目スッキリして満足です。
新エディタを駆使して見出しやリストなど活用すると、見やすくわかりやすいデザインにできますのでぜひお試しくださいね!


iphone-banner

対面講座で好評だったiPhoneでアメブロヘッダーや告知画像を作ろう講座ですが、
通信講座としてリリースしました。
iPhoneだけでアメブロヘッダーやFacebookカバー画像が作れます。
新旧CSSデザインのアメブロヘッダーに対応していますよ。

詳細はこちらから販売ページはこちら