Sharesあなたは、「アメブロのヘッダーをおしゃれにしたい!」と思っていても、実際に何をすれば良いのか、分かっていないのではないでしょうか?ボク自身も経験がありますが、ネットで調べてみると、ある程度はヘッダーをいじれるようになりますが、もう一工夫ほしいなと思いますよね。そこで今回は、アメブロのヘッダーを自由自在にカスタマイズする方法を紹介していきます。初心者の方でも、この記事の通りにやれば必ずできるようにしているので、ぜひ、参考にして下さい。ccスポンサーリンク1.ヘッダー画像のサイズを調整しようアメブロのヘッダーで使える画像のサイズは、(980pix)×(300pix)に収まるサイズの画像と決まっているので、まずはヘッダーに使う画像のサイズ調整をしましょう。(ちなみに画像サイズの980×300とは、横幅980pix、縦幅300pixという意味です。サイズを調整するためにも、Windowsであれば最初から入っている「ペイント」というソフトを使います。ペイントのソフトの開き方は、画面の左下にあるWindowsマークを右クリックして、「検索」を押した後に、検索メニューが出るので、そこに「ペイント」と入力すれば、ペイントが起動できます。ペイントを使ったサイズ変更の方法ペイントを開くと、画面の左上に「ファイル」があるのでクリックして、その後に「開く」をクリックして、ヘッダーにした画像をダブルクリック。すると、画面に選択した画像が出てきます。選んだ画像のサイズを変更していくわけですが、やり方は2つあります。画像全体のサイズを変更する画像の一部分を切り取るそれぞれ、説明していきましょう。上の画像の赤い枠の所に「サイズ変更」と言う項目があるので、そこをクリックすると、下のような画面が現れます。「ピクセル」にチェックを入れる「縦横比を維持する」のチェックを外す「水平方向」に980、「垂直方向」に300と入力するOKをクリックをすると、980×300の画像が出来上がります。出来上がったら、「ファイル」→「上書き保存」を忘れずにしましょう。画像の一部分を切り抜く時は、まずは、下の画像のように、「選択」をクリックした後に、画像の切り抜きたい部分をドラッグをして決めます。上手くいくと、切り抜く部分に、点々がたくさんある線(破線)が画像に浮かび上がるので、「トリミング」をクリックします。したら、画像の完成です。2.ヘッダー画像を変更できるデザインに変える画像が完成したら、今度はアメブロのマイページを開きましょう。マイページの右上に「三」のようなマークがあるので、ここをクリック。その後表示されるメニューにある「デザインの変更」をクリックしましょう。したら、下の画像のような画面が出てきます。この画面の赤線の部分に「CSSの編集」または「カスタマイズ」のリンクがあれば、このまま「CSSの編集」か「カスタマイズ」をクリックして良いです。なければ、今のブログのデザインでは、ヘッダー画像を変えることができないので、デザインを変更してください。下の方にページを降していくと、「他のカテゴリからブログデザインを探す」という項目が見つかると思います。その中から、ブログデザインは、「カスタム可能」の項目から選んでください。したら、下の画像のような画面になりますが、赤線で囲まれた「CSS編集用のデザイン」をブログデザインに選んだ時と、それ以外のブログデザインを選んだ時とでは、ヘッダー画像の設定の方法が違ってきます。「CSS編集用デザイン」以外のブログデザインを選択した時のヘッダー画像の設定方法を見ていきましょう。先ほどから言っているように、「カスタマイズ」をクリックします。したら、下のような画面が出てくるので、「オリジナル画像を使う」をクリック。下の画面のように、「ファイルを選択」を押して、ヘッダーにしたい画像を選び、アップロードを押します。その後、青色で「再読み込み」と出てくるので、「再読み込み」を押すと、アップロードした画像が画面に出てくるので、その画像をクリック。したら、ブログのヘッダーが画像に変わっているはずです。この画面にも書かれていますが、画像のファイル名は、「○○.jpg」(ドットを忘れずに)になっていることを確認しましょう。「.jpg」がないと、画像が使えない場合があります。ファイル名は、「○○.gif」でも「○○.png」でも良いですが、基本的には「○○.jpg」がオススメです。○○の部分は、ご自由に名前を決めて良いです。一応、ヘッダーは変更できましたが、今のままではヘッダー画像が窮屈で、カッコ悪いです。カスタマイズの最初の画面い戻って、上の画像のように「ヘッダーの高さ」を変えましょう。最大300まで設定できるので、自分に合ったサイズを選びましょう。4.「CSS編集用デザイン」のヘッダー設定方法まずは、「2.ヘッダー画像を変更できるデザインに変える」で説明したように、「CSS編集」をクリックします。したら、下の画像のような画面が出るので、「ファイルを選択」を押して、ヘッダーにしたい画像を選択し、アップロードをクリックです。これも同じですが、画像のファイル名は、「○○.jpg」(ドットを忘れずに)になっていることを確認しましょう。「.jpg」がないと、画像が使えない場合があります。画像のアップロードが完了したら、下の方に行って「現在使用中のブログデザインCSS」の所を見つけて下さい。ローマ字がたくさん書かれている部分です。そこをスクロールして、真ん中ぐらいの所に、下の画像のような記述があると思います。今回は、赤枠の部分をいじることで、ヘッダー画像を入れます。やり方は簡単で、以下の手順の通りにして下さい。赤枠の部分を消して、代わりに以下の記述を丸ごとコピーして貼り付けます。*/上手くいくと、下の画像のような記述に変わっているはずです。そこで、先ほど画像をアップロードした時に、下のような画面が出たと思いますが、その赤枠で囲われているURLの所を丸ごとコピーしましょう。上の画像の赤枠部分の3行目にある「コピーした画像のパス」を消して、そこにコピーしたURLを貼り付けます。ここまで作業すると、下の画面のようになっていると思います。ヘッダー画像の横幅を変えたい場合は、赤枠の部分の下から4行目にある「width:980px;」の980の数字を変えて、縦幅を変えたい時は、「height:300px;」の300の数字を変えましょう。ちなみに、縦幅は300までしか設定できません。サイズを変更する時は、pxの部分を消さないように注意しましょう。ここまで終わって、下にある「保存」ボタンを押せば、完成です。ヘッダーが変わっていなければ、ページを再読み込みさせてください。