アメブロのヘッダーをカスタマイズ・変更する6つの手順

   

アメブロ ヘッダー

あなたは、「アメブロのヘッダーをおしゃれにしたい!」と思っていても、実際に何をすれば良いのか、分かっていないのではないでしょうか?

ボク自身も経験がありますが、ネットで調べてみると、ある程度はヘッダーをいじれるようになりますが、もう一工夫ほしいなと思いますよね。

そこで今回は、アメブロのヘッダーを自由自在にカスタマイズする方法を紹介していきます。

初心者の方でも、この記事の通りにやれば必ずできるようにしているので、ぜひ、参考にして下さい。

photo credit: The Magic Tuba Pixie via photopin cc

スポンサーリンク

1.ヘッダー画像のサイズを調整しよう

アメブロのヘッダーで使える画像のサイズは、(980pix)×(300pix)に収まるサイズの画像と決まっているので、まずはヘッダーに使う画像のサイズ調整をしましょう。(ちなみに画像サイズの980×300とは、横幅980pix、縦幅300pixという意味です。

サイズを調整するためにも、Windowsであれば最初から入っている「ペイント」というソフトを使います。

desuku

ペイントのソフトの開き方は、画面の左下にあるWindowsマークを右クリックして、「検索」を押した後に、検索メニューが出るので、そこに「ペイント」と入力すれば、ペイントが起動できます。

ペイントを使ったサイズ変更の方法

ペイントを開くと、画面の左上に「ファイル」があるのでクリックして、その後に「開く」をクリックして、ヘッダーにした画像をダブルクリック。そうすると、画面に選択した画像が出てきます。

そして、選んだ画像のサイズを変更していくわけですが、やり方は2つあります。

  • 画像全体のサイズを変更する
  • 画像の一部分を切り取る

それぞれ、説明していきましょう。

hedda2

サイズを変更する方法

上の画像の赤い枠の所に「サイズ変更」と言う項目があるので、そこをクリックすると、下のような画面が現れます。

hedda3

上の画像のように、

  1. 「ピクセル」にチェックを入れる
  2. 「縦横比を維持する」のチェックを外す
  3. 「水平方向」に980、「垂直方向」に300と入力する
  4. OKをクリック

をすると、980×300の画像が出来上がります。出来上がったら、「ファイル」→「上書き保存」を忘れずにしましょう。

画像の一部分を切り抜く場合

画像の一部分を切り抜く時は、まずは、下の画像のように、「選択」をクリックした後に、画像の切り抜きたい部分をドラッグをして決めます。

上手くいくと、切り抜く部分に、点々がたくさんある線(破線)が画像に浮かび上がるので、「トリミング」をクリックします。そしたら、画像の完成です。

 hedda4

2.ヘッダー画像を変更できるデザインに変える

画像が完成したら、今度はアメブロのマイページを開きましょう。マイページの右上に「三」のようなマークがあるので、ここをクリック。その後表示されるメニューにある「デザインの変更」をクリックしましょう。

hedda9

そしたら、下の画像のような画面が出てきます。

hedda7

もし、この画面の赤線の部分に「CSSの編集」または「カスタマイズ」のリンクがあれば、このまま「CSSの編集」か「カスタマイズ」をクリックして良いです。もし、なければ、今のブログのデザインでは、ヘッダー画像を変えることができないので、デザインを変更してください。

hedda8

下の方にページを降していくと、「他のカテゴリからブログデザインを探す」という項目が見つかると思います。

その中から、ブログデザインは、「カスタム可能」の項目から選んでください。そしたら、下の画像のような画面になりますが、赤線で囲まれた「CSS編集用のデザイン」をブログデザインに選んだ時と、それ以外のブログデザインを選んだ時とでは、ヘッダー画像の設定の方法が違ってきます

hedda11

まずは、「CSS編集用デザイン」以外のブログデザインを選択した時のヘッダー画像の設定方法を見ていきましょう。

3.「CSS編集用デザイン」以外のヘッダー変更方法

先ほどから言っているように、「カスタマイズ」をクリックします。そしたら、下のような画面が出てくるので、「オリジナル画像を使う」をクリック。

hedda12

そして、下の画面のように、「ファイルを選択」を押して、ヘッダーにしたい画像を選び、アップロードを押します。その後、青色で「再読み込み」と出てくるので、「再読み込み」を押すと、アップロードした画像が画面に出てくるので、その画像をクリック。そしたら、ブログのヘッダーが画像に変わっているはずです。

hedda13

この画面にも書かれていますが、画像のファイル名は、「○○.jpg」(ドットを忘れずに)になっていることを確認しましょう。「.jpg」がないと、画像が使えない場合があります。

ファイル名は、「○○.gif」でも「○○.png」でも良いですが、基本的には「○○.jpg」がオススメです。○○の部分は、ご自由に名前を決めて良いです。

hedda15

一応、ヘッダーは変更できましたが、今のままではヘッダー画像が窮屈で、カッコ悪いです。なので、カスタマイズの最初の画面い戻って、上の画像のように「ヘッダーの高さ」を変えましょう。最大300まで設定できるので、自分に合ったサイズを選びましょう。そして、完成です。

4.「CSS編集用デザイン」のヘッダー設定方法

まずは、「2.ヘッダー画像を変更できるデザインに変える」で説明したように、「CSS編集」をクリックします。

そしたら、下の画像のような画面が出るので、「ファイルを選択」を押して、ヘッダーにしたい画像を選択し、アップロードをクリックです。

hedda10

これも同じですが、画像のファイル名は、「○○.jpg」(ドットを忘れずに)になっていることを確認しましょう。「.jpg」がないと、画像が使えない場合があります。

画像のアップロードが完了したら、下の方に行って「現在使用中のブログデザインCSS」の所を見つけて下さい。ローマ字がたくさん書かれている部分です。

そこをスクロールして、真ん中ぐらいの所に、下の画像のような記述があると思います。今回は、赤枠の部分をいじることで、ヘッダー画像を入れます。やり方は簡単で、以下の手順の通りにして下さい。

hedda21

まず、赤枠の部分を消して、代わりに以下の記述を丸ごとコピーして貼り付けます。

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

上手くいくと、下の画像のような記述に変わっているはずです。

hedda17

そこで、先ほど画像をアップロードした時に、下のような画面が出たと思いますが、その赤枠で囲われているURLの所を丸ごとコピーしましょう。そして、上の画像の赤枠部分の3行目にある「コピーした画像のパス」を消して、そこにコピーしたURLを貼り付けます。

hedda18

ここまで作業すると、下の画面のようになっていると思います。もし、ヘッダー画像の横幅を変えたい場合は、赤枠の部分の下から4行目にある「width:980px;」の980の数字を変えて、縦幅を変えたい時は、「height:300px;」の300の数字を変えましょう。

ちなみに、縦幅は300までしか設定できません。サイズを変更する時は、pxの部分を消さないように注意しましょう。

hedda19

ここまで終わって、下にある「保存」ボタンを押せば、完成です。もし、ヘッダーが変わっていなければ、ページを再読み込みさせてください。

スポンサーリンク

この記事をシェアする

こちらの記事もおすすめ!