ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors
電話番号: 03-3986-2773
電話番号: 03-3986-2773
ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » webコラム» アメブロカスタマイズ・ヘッダー画像のサイズ変更
投稿日: 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;」で指定します。
※自分の作った画像の高さを入力します。
以上で ヘッダー画像のサイズ変更ができました！
「表示を確認する」で確認をし、保存をしましょう ◎
でき上がりは、こんな感じです～
どうでしょうか？ 参考になったでしょうか！？
手順の通りにやれば、必ずできるはずです。
私用したオリジナル画像はこちらのサイトです。
我社のマスコット『弁慶』です。
名前の由来：忠実な番犬
主な仕事：マスコットキャラとして認知度UP↑
不得意：電話
しゃべりが苦手なので、コンタクトはこちらから
我社のキャラクター「長フチ様」がユーザーに変わり、聞きづらい疑問を直球で投げかけるQ&A式コンテンツ。強面の顔からは想像も容易いほどのおバカさんが、弊社スタッフと対談します。
Copyright(C)2014 ｜ ホームページ制作・SEO対策を通じて集客向上↑売上UP↑Cyber Accel-Advisors. All Rights Reserved.
