アメブロのヘッダー変更とタイトルを消す方法!!CSS編!!

kijikotu

前回、簡単にアメブロのヘッダー画像を変更する方法について解説しました。

今回はCSSを使って、ヘッダー画像を変更する方法を解説したいと思います。

 

ヘッダー設置とタイトルの削除

アメブロ用のサイズに作られたヘッダー画像であれば、前回の方法で問題なく設置できると思います。

関連記事⇒アメブロのヘッダー画像を簡単に変更する方法!!

 

しかし、高さが300ピクセルを超えるなど、少し大きめのヘッダーを設置する際はこのCSSを使った変更をすることになります。

さらに、ヘッダーを変更してもブログのタイトルと説明文がヘッダーに重なってしまうので、タイトルと説明文を非表示にしなければいけません。

 

今回は、このタイトルと説明文の消し方も併せて説明していきたいと思います。

 

CSSを使ったヘッダー変更

まずヘッダーに使う画像を用意して、ブログの管理トップ画面に進んでください。

そこから、【デザインの変更】をクリックします。

 

ameblohead

 

CSSの変更を行うには、CSS編集が可能なテンプレートを使う必要があります(それ以外のテンプレートではCSS編集はできません)。

そのため、まずは画面下の【カスタム可能】と書いてある部分に進み、CSS編集可能なテンプレートを選びます。

 

ameblohead1

 

そして【CSS編集用デザイン】というテンプレートを選択します。

繰り返しになりますが、これ以外のテンプレートではCSS編集はできません。

 

ameblohead css

 

【CSS編集用デザイン】のテンプレートを選んだら、レイアウトを決めて【適用する】をクリック。

 

ameblohead css1

 

次に【CSSの編集をする】に進みます。

 

ameblohead css2

 

すると、ヘッダー画像をアップロードする画面が表示されるので、【ファイルを選択】を選んでヘッダーに設定する画像を選びます。

画像を選んでアップロードすると、選択した画像と、その画像の下にパス(画像のURL)が表示されます。

このパスは後ほどコピペして使うことになります。

 

ameblohead css3

 

画像の追加画面の下に進むとCSSの編集画面があります。

その一番下に【その他、拡張があれば記述】という部分があるので、その記述の下に下記のコードを貼り付けましょう。

 

.skinHeaderArea{
height:300px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center top;
}

 

そして、画像のURLと記載してある部分の()の中に先程の画像のパスをコピーして貼り付けます。

ヘッダーの高さを調節する場合は【height:300px;】の数値の部分を変更すればOKです。

下記のような状態になっていれば完成です。

 

ameblohead css4

 

これで設定を保存して、表示を確認してみるとヘッダー画像の挿入が完成しています。

コードの貼付けや画像のパスの入力方法に間違いがないのに、ヘッダー画像が表示されない場合は、F5のキーを押して画面を更新すれば表示されることがあります。

 

ブログタイトルを消す

ヘッダー画像に文字などが入っていないものであれば問題がないのですが、画像によってはブログのタイトルと説明文と、画像の文字が重なってしまうことがあります。

そこで必要となってくるのが、ブログのタイトルを消して非表示にする作業。

 

これは、先程挿入したヘッダー画像のコードの下に、下記のコードを貼り付けるだけで完了します。

 

#header h1,.skinTitleArea{
display:none;
}
#header h2,.skinDescriptionArea{
display:none;
}

 

ヘッダー画像の表記と合わせて下記のようになっていればOKです。

 

ameblohead css5

 

これで保存をしてブログを確認してみると、きちんとヘッダーが表示されているので確認してみて下さい。

きちんと高さの値を変更すれば300ピクセル以上のヘッダー画像の表記も可能になります。

 

 

アメブロは趣味のブログとして利用するのはいいですが、カスタマイズの自由度やSEO(上位表示させること)の観点からは全くおすすめできません。

アメブロをしばらく続けてブログの扱いに慣れてきたらワードプレスでサイトを作ることにも挑戦してみましょう。

 

そうすれば検索エンジンからの集客が見込めるようになるので、やりがいが出てくるはずです。