BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ ヘッダーにオリジナルバナーを設置する方法

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

アメブロカスタマイズ ヘッダーにオリジナルバナーを設置する方法

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

head.jpg

みなさん、こんにちは。

 

アメブロカスタマイズ・ヘッダーにオリジナルバナーを設置する方法

自分のお気に入りで、ブログに似合ったオリジナルバナーを入れてみましょう!

 

アメブロにはたくさんの雛型がありますが人目を引くには、やはりオリジナルが一番~

難しいからと諦めないで!

ぜひ、チャレンジしましょう。

 

今回は、プレビューを交えながら、分かりやすく説明していきますよ!

 

 

 

step1 まずは画像の用意

 

アメブロのヘッダーサイズは 横980ピクセル(pix)×300ピクセル(pix) です。

 

ご自分でどんなサイズにでも加工できる人は、サイズは気にせずとも良いのですが、

今回は、後でCSSで高さ調整しなくて良いように、手っ取り早く初めから 横980pix×300 pix で作ってしまいましょう。

 

横980pix×300 pix というのはヘッダーサイズとして大きいので、画像を探す時に以下のような事をご参考に!

 ・高画質であること(仕上がりに差がでます!)

 ・フリーであること(これは絶対ですよ!)

 ・さらに、フリーの無料素材サイトであっても「加工を禁止」しているサイトもあります。
まずは、利用規約をよ~く読んで加工OK!かを確認しておきましょう。

 

▶ ご参考までに 画像サイト集

        http://r-dsgn.net/free-pic/

 

 

step2 画像を加工する~Microsoft office picture manager

 

準備した加工を OS がWindows なら必ず入っている、Microsoft office picture managerを使って加工します。

 

1 画像をMicrosoft office picture managerで開きます。

 

 

ダウンロードした画像(ここではデスクトップ)右クリック

               

プルダウンメニューからMicrosoft office picture managerを選択

head2.jpg

 ↓

10.jpg

2 定義済みのサイズで ドキュメント大:(1024×768ピクセル)を選択

20.jpg30.jpg

 ↓

OKで確定します。

3 再度、画像の編集を選択しトリミングを選択します。

40.jpg

 ↓

 

50.jpg60.jpg

※新しいサイズが980×300 に近いサイズになっています。

 

 

マウスをドラッグし980×300 にします。

70.jpg80.jpg

マークをマウスで移動させて、使用した部分をきめます。

90.jpg

OK で確定します。

 

キレイなオリジナルバナーの 完成 です!!

100.jpg

 

 

完成した画像をデスクトップに保存します。

101.jpg

 

 

  

step3 アメバーブログ  ログインからの手順

 

1 アメーバブログへログイン  アメブロ → ブログ管理画面 → デザインの変更 

102.jpg

 

 

 

2 ★カスタム可能を選択 → ★★CSS 編集用デザイン → ★★★カラムを選択

 

 

103.jpg

★★

104.jpg

★★★

105.jpg

お好みのカラムを選んで 適用する をクリック

 

  これでブログデザインは決まりました。

  

3 CSS の編集に入ります。

 

CSS の編集をするをクリック (CSSの編集は、この画面から行います)

106.jpg

 

step4 CSS編集でオリジナルバナーをアップ

 

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

107.jpg

 

                       ↓

2 CSSを下のように変更します。

 

★変更前 CSS

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

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

 

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

.skinHeaderArea{}/*

 

★変更後 CSS

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

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

 

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

.skinHeaderArea{

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

height: 300px;

}

 

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

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

111.jpg


◎変更後のCSS

 

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

 オリジナル画図は300でしたね!

 

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

109.jpg

完成したトップページです~ ♪

110.jpg

まとめ

 いかがでしょうか?

 一度、やれば後はスラスラできるようになると思いますよ。

 

 高さ調整を最初からした、アメブロ ジャストサイズのオリジナル画像なので、コピ&ペーストで
終わってしまった感もしますが・・・

 

 オリジナルバナーのポイントは、土台となる画像の質とサイズ!

 元の画像がトリミングされることもお忘れなく!

 

カテゴリ:

TOPへ