BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ・ヘッダー画像のサイズ変更

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

アメブロカスタマイズ・ヘッダー画像のサイズ変更

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

top1.jpg

みなさん、こんにちは。 

   

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

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

                          

ヘッダーって?

                         

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

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

     

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

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

               

           

            

top2.jpg

              

ヘッダー画像のサイズを決める

    

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

     

◆ 広告がない場合(基本)

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

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

          

◆ 広告がある場合

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

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

     

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

      

「CSS編集用デザイン」でのカスタマイズ

          

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

  ↓

アメブロ

  ↓

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

top3.jpg

 

                                  

                    ↓                      

     カスタム可能        

                       ↓                         

CSS 編集用デザイン

                 ↓                   

      

                          

top5.jpg

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

   ↓

top6.jpg

 

                             

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

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

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

                    

top7.jpg

                         

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

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

                       

top8.jpg

                                   

                

                     

現在使用中のブログデザインCSS を次のように編集していきましょう。

           

                   

top9.jpg

   

★変更前 CSS

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

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

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

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

    

★変更後 CSS

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

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

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

.skinHeaderArea{

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

height: 300px;

}

         

             

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

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

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

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

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

           

           

 

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

top10.jpg

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

    

             

top12.jpg

まとめ

   

  

  

どうでしょうか?  参考になったでしょうか!?

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

   

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

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

カテゴリ:

TOPへ