アメブロのヘッターをオリジナル画像に変更する方法

「アメブロのヘッダーってどうやって変更するの?」

ブログの記事更新に慣れてきたら、
自分のサイトをかっこよくカスタマズしたくなりますよね?

例えば、

・サイドバーを編集したい
・ヘッダーをオリジナル画像に変更したい
・プラグインを入れてみたい

などなど思うことでしょう。

だけど、アメブロのカスタマイズってうまく出来ますか?

無料ブログのカスタマイズって簡単に思えるけど意外と難しく、
うまくいかず悩んでいる人も多いんですよね。

と言うことで今回は、

アメブロのヘッダーをオリジナル画像に変更する方法

をご紹介していきます。

アメブロのヘッダーをオリジナル画像に変更する方法

アメブロは、初心者でも簡単にきれいなデザインのブログを作れるよう、
沢山のテンプレートが用意されています。

あなたも今はお気に入りのテンプレートを選んでいるはずです。

だけど、今のテンプレートではたぶんカスタマイズは限られていますよ!

「えっ?そうなの?何で?」

と思うかもしれませんね。

実をいうと、アメブロでオリジナルのヘッダーを
挿入出来るテンプレートは決まっているのです。

というかcssを変更できるテンプレートは一つしかありません。

cssって聞いたことあります?

CSS(スタイルシート)とは
ブログなどのレイアウトやデザインを、一定の言語によって
細かく設定することができる決まりのことです。

これによって、より美しいサイトを作成することができます。

アメブロで、このCSSを編集することによって、あなた好みの
デザインのブログに変身させることが出来ます。

よってcssを編集できるテンプレートに変えなくてはなりません。

css編集可能なテンプレートに変更する方法

アメブロにログインし、ブログ管理画面左下の「デザインの変更」をクリックして下さい。
ame-1

右下の「カスタム可能」をクリック。

ame-2

左上に「css編集用デザイン」と言うテンプレートがありますよね。

そちらを選択して下さい。

カラムを聞かれると思います。

これはお好みで問題ありません。

ame-3

「cssの編集」をクリックします。

ame-4

次にオリジナルヘッダー画像をアップロードする作業に入ります。

オリジナルのヘッダー画像は用意していますか?

用意していなければ、オリジナルのヘッダー画像の作り方はコチラ記事を参考にして下さい。

初心者でも簡単にヘッダー画像を作る方法【動画】

ちなみにヘッダー画像とはコチラです。

ame-5

これ、僕が最近作ったアメブロです。
もし良かったら除いて見て下さい^^

ヘッダー画像をアメブロ内にアップロード

下記画像を参考にヘッダー画像をアップロードします。

ame-6

画像のパスは後ほど使います。

cssを変更し、ヘッダー画像を挿入

次にcssを編集していきます。

といってもコピペするだけなので安心して下さい^^

まずはcss編集の中ほどにある
/* (3-2) ブログヘッダー
という部分を見つけて下さい。

そこから/* (3-3) コンテンツエリアの上まで全部消しちゃって下さい。

他の部分を消さないよう注意して下さい。

ame-9

消した部分の変わりに下記のソースを貼り付けます。

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

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
margin-bottom: 10px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea {}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea {
text-indent: -9999px;
}

/* クリックするとブログのトップに移動 */
.skinTitleArea a.skinTitle {
width: 980px;
height: 300px;
display: block;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea {
text-indent: -9999px;
}

貼り付けたら、貼り付けた文の中に

コピーした画像のパス

と書いてある部分があると思います。

ここに、さきほどアップロードした画像のパスをコピペしていきます。

「アップロードされた画像」のところを見ると、
画像の下に「この画像のパス」とあります。

そのウインドウの中に記述されているのが、画像のパスとなります。

そのウインドウの中の文字をコピーします。

そして、先ほどの

「コピーした画像のパス」

と書いてあるところに貼り付けます。

このとき気をつけて欲しいのは、

background-image: url(コピーした画像のパス);

この部分の、( )の部分は、絶対に消さないで残してください。

すべてが終わったら、ページの一番下にある「保存」ボタンをクリックしてください。

 

その後、ブログを確認してください。

画像が表示されていたら、成功です。

お疲れ様でした。

この記事を読まれた方はコチラの記事もオススメです。

僕が副業アフィリで毎月50万円以上稼いでいるヒミツを

無料メール読者さん限定で公開しています。

なぜ、時間がない副業アフィリエイターでも
毎月50万円以上を稼ぐことが出来るのか?


僕が200万円以上投資して得たスキルと実践で得たテクニックを
超初心者の方でもすぐに実践出来るよう噛み砕いて解説しています。

 

メール講座では、パソコンド素人だった僕が


・ゼロから抜け出した方法


・3ヶ月後に10万円稼いだ方法


そして毎月継続して50万円以上稼ぎ続けているテクニック

を惜しみなく解説しています。

 

さらに

・わずか10記事で累計100万円以上稼ぐブログ運営法


・自分で1記事も書かずに毎月安定して10万円以上稼ぐ外注戦略

も期間限定で公開します。

 

かなり、再現性が高い手法ので今すぐ実践して下さいね。

 


*登録後の解除もワンクリックで簡単に出来るので気軽にご登録お願いします♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA