前回、簡単にアメブロのヘッダー画像を変更する方法について解説しました。
今回はCSSを使って、ヘッダー画像を変更する方法を解説したいと思います。
ヘッダー設置とタイトルの削除
アメブロ用のサイズに作られたヘッダー画像であれば、前回の方法で問題なく設置できると思います。
しかし、高さが300ピクセルを超えるなど、少し大きめのヘッダーを設置する際はこのCSSを使った変更をすることになります。
さらに、ヘッダーを変更してもブログのタイトルと説明文がヘッダーに重なってしまうので、タイトルと説明文を非表示にしなければいけません。
今回は、このタイトルと説明文の消し方も併せて説明していきたいと思います。
CSSを使ったヘッダー変更
まずヘッダーに使う画像を用意して、ブログの管理トップ画面に進んでください。
そこから、【デザインの変更】をクリックします。
CSSの変更を行うには、CSS編集が可能なテンプレートを使う必要があります(それ以外のテンプレートではCSS編集はできません)。
そのため、まずは画面下の【カスタム可能】と書いてある部分に進み、CSS編集可能なテンプレートを選びます。
そして【CSS編集用デザイン】というテンプレートを選択します。
繰り返しになりますが、これ以外のテンプレートではCSS編集はできません。
【CSS編集用デザイン】のテンプレートを選んだら、レイアウトを決めて【適用する】をクリック。
次に【CSSの編集をする】に進みます。
すると、ヘッダー画像をアップロードする画面が表示されるので、【ファイルを選択】を選んでヘッダーに設定する画像を選びます。
画像を選んでアップロードすると、選択した画像と、その画像の下にパス(画像のURL)が表示されます。
このパスは後ほどコピペして使うことになります。
画像の追加画面の下に進むとCSSの編集画面があります。
その一番下に【その他、拡張があれば記述】という部分があるので、その記述の下に下記のコードを貼り付けましょう。
.skinHeaderArea{
height:300px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center top;
}
そして、画像のURLと記載してある部分の()の中に先程の画像のパスをコピーして貼り付けます。
ヘッダーの高さを調節する場合は【height:300px;】の数値の部分を変更すればOKです。
下記のような状態になっていれば完成です。
これで設定を保存して、表示を確認してみるとヘッダー画像の挿入が完成しています。
コードの貼付けや画像のパスの入力方法に間違いがないのに、ヘッダー画像が表示されない場合は、F5のキーを押して画面を更新すれば表示されることがあります。
ブログタイトルを消す
ヘッダー画像に文字などが入っていないものであれば問題がないのですが、画像によってはブログのタイトルと説明文と、画像の文字が重なってしまうことがあります。
そこで必要となってくるのが、ブログのタイトルを消して非表示にする作業。
これは、先程挿入したヘッダー画像のコードの下に、下記のコードを貼り付けるだけで完了します。
#header h1,.skinTitleArea{
display:none;
}
#header h2,.skinDescriptionArea{
display:none;
}
ヘッダー画像の表記と合わせて下記のようになっていればOKです。
これで保存をしてブログを確認してみると、きちんとヘッダーが表示されているので確認してみて下さい。
※キャッシュが保存されていて、ヘッダーの変更が反映されないことがあります。そんな時はF5(ウインドウズの場合)を押して画面を更新してみてください。
きちんと高さの値を変更すれば300ピクセル以上のヘッダー画像の表記も可能になります。
アメブロは趣味のブログとして利用するのはいいですが、カスタマイズの自由度やSEO(上位表示させること)の観点からは全くおすすめできません。
アメブロをしばらく続けてブログの扱いに慣れてきたらワードプレスでサイトを作ることにも挑戦してみましょう。
そうすれば検索エンジンからの集客が見込めるようになるので、やりがいが出てくるはずです。
はじめまして
教えて下さい。ヘッダー画像も載せて、タイトル、説明文も消して
表示確認をしましたら画像もちゃんと表示されたので保存をしました。
で、マイページからブログを開いてみましたら、ヘッダー画像は表示されず、
タイトル、説明文が表示された状態になっているのですが、
確認表示では画像も表示されるのですが？
お教え下さい。よろしくお願い致します。