ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2014/05/16    投稿者:webコラム

みなさん、こんにちは。　

　　　

アメブロカスタマイズといえば、最初に思い浮かぶのがヘッダーですよね。

その「ヘッダー画像のサイズ変更」手順をプレビューしながら説明していきたいと思います！

　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　

アメブロのトップ画面で一番目立つのは "ヘッダー" という画像部分です。

ブログのタイトルやサイトの説明をしています。

　　　　　

ヘッダーはブログの"顔"と言われるほど重要な部分なのです！

みなさんが、最も力を入れて作成するところでもあります。

　　　　　　　　　　　　　　　

　　　　　　　　　　　

　　　　　　　　　　　　

　　　　　　　　　　　　　　

　　　　

では、ヘッダー画像のサイズを決めて行きましょう。

　　　　　

◆ 広告がない場合（基本）

広告が表示されない場合の高さは

400pix 以内にして、たくさんの情報を入れましょう。

　　　　　　　　　　

◆ 広告がある場合

広告があり横長のバナー広告が表示されていれば、画像の高さは
大きくても　300pix 以内にしましょう。

350pixでも許容範囲ですが、ちょっと大き過ぎるのかなと感じます。

　　　　　

※現在ヘッダー部分の広告は非表示になっておりますが、いつ再開するか分からないので、書いておきます！

　　　　　　

　　　　　　　　　　

アメーバブログへログイン

　　↓

アメブロ

　　↓

ブログ管理画面　→　デザインの変更　

　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　↓　　　　　　　　　　　　　　　　　　　　　　

　　　　　カスタム可能 　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　↓　　　　　　　　　　　　　　　　　　　　　　　　　

CSS 編集用デザイン

　　　　　　　　　　　　　　　　　↓　　　　　　　　　　　　　　　　　　　

　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　

カラムを選択　※自分のお好みのデザインを選びましょう　→　適用するをクリック

　　　↓

　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

ブログデザイン適用完了　→　CSS の編集をするをクリック

・ 選択したブログデザインのCSSが表示されています

・CSS（スタイルシート）の編集は、この画面から行います

　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　

今回は　幅 980pix 高さ 300pix　でオリジナルヘッダー画像を作成しました。

　ブログデザインヘッダ・背景用画像の追加 から画像をアップロードします。

　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　

　　　

★変更前 CSS

/* (3-2) ブログヘッダー

--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pixエリア */

.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

　　　　

★変更後 CSS

/* (3-2) ブログヘッダー

--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */

.skinHeaderArea{

background-image: url（ヘッダー画像URL）;

height: 300px;

}

　　　　　　　　　

　　　　　　　　　　　　　

そして、下線部分 url（ヘッダー画像URL） にアップロードした画像のURL

※この画像のパス をコピー&ペーストします。

ヘッダー画像の高さは「height: 300px;」で指定します。

※自分の作った画像の高さを入力します。

以上で ヘッダー画像のサイズ変更ができました！

　　　　　　　　　　　

　　　　　　　　　　　

　

「表示を確認する」で確認をし、保存をしましょう ◎

でき上がりは、こんな感じです～

　　　　

　　　　　　　　　　　　　

　　　

　　

　　

どうでしょうか？　　参考になったでしょうか！？

手順の通りにやれば、必ずできるはずです。

　　　

私用したオリジナル画像はこちらのサイトです。

　　http://pro.foto.ne.jp/