ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » 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;」で指定します。
※自分の作った画像の高さを入力します。
以上で ヘッダー画像のサイズ変更ができました!
「表示を確認する」で確認をし、保存をしましょう ◎
でき上がりは、こんな感じです~
どうでしょうか? 参考になったでしょうか!?
手順の通りにやれば、必ずできるはずです。
私用したオリジナル画像はこちらのサイトです。