アメブロのヘッダー画像の作り方とカスタマイズ方法まとめ


アメブロのヘッダー画像の作り方とカスタマイズ方法まとめ

昨今のアメブロではヘッダー画像のカスタマイズが当たり前になってきています。

芸能人ブログだけでなく一般ブロガーも多くはカスタマイズしています。

特に商売やビジネスなど、お仕事の一環でアメブロを活用している人はヘッダー画像のカスタマイズは必須と言われています。

スポンサーリンク

 

実際にヘッダー画像を変えてインパクトを与えるだけで読者の増え方が変わったり集客に結びついたりもします。

 

そんなヘッダー画像も簡単なものなら自分で作る事が出来ますが、本格的にお仕事でブログを利用している場合はプロに依頼する方が多いです。

やはりクオリティの違いによって読者の反応も変わってくるからです。

 

しかし、いきなりプロに依頼するよりもまずは自分で色々と調べておいた方が今後の為にも絶対に良いです。

今回はヘッダー画像を作ってブログに設置するカスタマイズに関する情報をまとめたので参考にして下さい。

 

目次

 

 

ヘッダー画像の基本的な作り方

ヘッダー画像の作り方として画像編集ソフトを使うのが一般的です。

画像編集ソフトには無料のものと有料のものがあります。

 

無料だと有名なソフトとしては、「GIMP」や「Paint.NET」というのがあります。

有料だとやはり「Photoshop」ですよね。

写真加工を綺麗にしたりグラデーションをつけておしゃれなヘッダー画像にしたい場合にはPhotoshopなどの有料ソフトを使って作ります。

 

もっと簡単に画像を作りたいという方はエクセルなどを使用して作る事もできますが、

やはり写真加工などが難しく集客の為の仕事用ブログとしてはクオリティが低くなってしまいます。

 

趣味でアメブロをやっていて、とりあえずヘッダー画像をオリジナルのものに変えたいという場合はそれでも問題ないでしょうが、アメブロで集客したいと考えている場合には本格的なヘッダー画像の設置は必須になってきています。

見た目の印象でお仕事の申し込み数や依頼数も変わってきますからね。

やはりしっかりとしたヘッダー画像で第一印象を良くしておく必要があるのです。

 

cssの編集でヘッダー画像をカスタマイズする方法

ヘッダー画像の準備が出来たら次は設置対応が必要となります。

自分で作ったヘッダー画像を設置するには「css編集テンプレート」というテンプレートに切り替えてcssを追加しなければなりません。

 

少し難しいかもしれないので順に説明していきます。

 

1:マイページの管理トップにある「デザインの変更」をクリック

cssの編集でヘッダー画像をカスタマイズする方法

 

2:画面下に移動して「カテゴリから探す」の「カスタム可能」をクリック

cssの編集でヘッダー画像をカスタマイズする方法

 

3:「次へ」をクリックして2ページ目に移動

cssの編集でヘッダー画像をカスタマイズする方法

 

4:「CSS編集用デザイン」をクリック

cssの編集でヘッダー画像をカスタマイズする方法

 

5:サンプルが表示されるので「適用する」をクリック

cssの編集でヘッダー画像をカスタマイズする方法

 

 

これでデザインが変更されました。

 

次にcssの編集を行います。

 

1:マイページの管理トップにある「デザインの変更」をクリック

 

cssの編集でヘッダー画像をカスタマイズする方法

 

2:適用中のデザインの下にある「CSSの編集」をクリック

 

cssの編集でヘッダー画像をカスタマイズする方法

 

3:作ったヘッダー画像をアップする為に「参照」をクリックし、ヘッダー画像を選択します

 

cssの編集でヘッダー画像をカスタマイズする方法

 

4:「アップロード」をクリック

cssの編集でヘッダー画像をカスタマイズする方法

 

5:画像がアップされた事を確認

 

6:以下のコードをコピーしてcssの一番下に貼り付けます

※2016年以降に公開された最新版CSS編集用デザインの場合はコードが変わりますのでこちらの記事を参考にして下さい

/* ブログヘッダー画像のURLを指定 */
.skinHeaderArea{
height:310px;
width:980px;
background-color:#FFFFFF;
background: url(■■■ここに画像のURLを入れます■■■) no-repeat;
}

/* ブログタイトルとブログ説明文を消す */
#header h1,.skinTitleArea{ /* ブログタイトルを消す */
display:none;
}
#header h2,.skinDescriptionArea{ /* ブログ説明文を消す */
display:none;
}

先程アップしたヘッダー画像のURLを「■■■ここに画像のURLを入れます■■■」部分に貼り付けます。

 

7:「表示を確認する」を押してちゃんと編集できているか確認

cssの編集でヘッダー画像をカスタマイズする方法

 

8:問題がなければ「保存」をクリック

cssの編集でヘッダー画像をカスタマイズする方法

 

これでcss編集によるヘッダー画像の設置が完了します。

 

ヘッダー画像が変更できない時のチェック

「ヘッダー画像が変わらない。」

「ヘッダー画像が表示されない。」

そんな時は以下のチェック項目を確認してみましょう。

 

CSSのコードが保存できているか?

CSSを編集して保存ボタンを押した時、稀にエラーがでる場合があります。

エラー表示が出た場合はCSSが保存されていません。

その為、ヘッダー画像も正常に変更できない状態となってます。

 

その時は一度「ブログ管理」を押して「デザインの変更」リンクから再度「CSS編集」ページへ移動しましょう。

改めてCSSを変更して保存ボタンを押すと正常に保存できます。

その後、ヘッダー画像を確認してみましょう。

 

CSSの記述に間違いやスペルミスはないか?

CSSは専門的に仕事で使っている人以外は馴染みのないコードです。

初心者さんなどは記述ミスやスペルミスなどが特に多くなったりします。

 

CSSは少しでも記述ミスがあると正常に動作しません。

その為、コピーしたつもりでも一部の文字が抜けていたりしてミスに気付かず保存するとヘッダー画像が表示されなかったり、他の部分に影響が出たりする事もあります。

特にコードをコピー貼り付けする時には十分注意しておきましょう。

 

キャッシュの影響で表示されない

パソコンやスマホには「キャッシュ」と呼ばれる機能があります。

これは一度表示した画像などをパソコン内で記憶しておく事で次回以降の表示の際に表示速度を上げるという機能です。

 

普通にページを表示するとキャッシュが読み込まれます。

その影響から新しいヘッダー画像が表示されないといった事も起こります。

 

もしヘッダー画像を変更したのに表示されなかったり、古いヘッダー画像が表示されている場合は、ブログを開いた状態で一度パソコンの「F5」キーを押してページを更新してみましょう。

 

新しいヘッダー画像の設定が正常に行われていれば、ページの更新で新しいヘッダー画像を表示する事ができます。

ページを更新してもヘッダー画像が変わらない場合は設定に不備があると思うのでCSSの見直しを行いましょう。

 

ヘッダー画像のサイズについて

ヘッダー画像のサイズは自由に決める事ができますが、一般的なサイズもある程度決まってます。

一番多いのは「980px×300px」のサイズです。2016年以降に公開された最新版デザインでは横幅が少し大きくなって「1120px」が基本のサイズとなります。

この大きさが今最も主流のサイズになります。

 

そして、これよりも少し大きめのサイズとして「980px×400px」や「980px×500px」というのもあります。

縦の長さが少し大きいのでインパクトを与える事が出来ます。

 

このサイズで特に多いのが芸能人ブログです。

芸能人は自分自身が売り物で自分を一番目立たせたいという気持ちが強いです。

なので縦のサイズも少し大きくしてインパクトを与えられるような大きさのヘッダー画像になってます。

 

しかし、縦の長さが長い分、その下に表示されるメッセージボードや最新記事が見えなくなるというデメリットがあります。

スクロールしないと見えない状態となり、少し気になる部分ではあります。

 

特に最新記事の記事タイトルが見えないのは勿体ないです。

最新記事の記事タイトルは最初の画面で見えている状態の方が興味を持って記事を読んでくれる確率も上がります。

 

ヘッダー画像のインパクトを取るか、最新記事への興味を取るか、といったところでしょう。

その辺りのバランスもあって、結局はお仕事で使うアメブロのヘッダー画像サイズは「980px×300px」が主流となっている感じですね。

 

ヘッダー画像のサイズを最大にしたい時の対応方法

画像のサイズ変更方法は大きく分けて2パターンあるので紹介します。

 

1:画像編集ソフトを使ってサイズを調整する

画像のサイズを変更する一番簡単な方法が画像編集ソフトを使ったサイズ変更です。

最近ではフリーソフトがたくさんあるので自分に合った編集ソフトをダウンロードして利用するといいでしょう。

「画像 サイズ調整 フリーソフト」

といったキーワードで検索すれば色々な編集ソフトが見つかります。

それらを使うと簡単にサイズ変更ができます。

 

2:CSSで画像サイズを変更する

もう一つの方法は画像自体のサイズを変えずにCSSだけで表示サイズを変更する方法です。

画像の編集ができない人はこちらの方法でも変更可能です。

 

特に画面全体に画像を表示させる最大化などの対応はCSSで行うのが一般的です。

CSSでは以下の方法で画像の大きさを変更できます。

 

通常のヘッダー画像設置CSSコード

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:300px;
width:980px;
background: url(ここに画像のURLを入れます) no-repeat;
}

 

ヘッダー画像のサイズを最大サイズに変更したCSSコード

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:300px;
width:auto;
background: url(ここに画像のURLを入れます) no-repeat;
background-size: 100% 300px;
}

 

widthの項目を「auto」に変更し、「background-size: 100% 300px;」を追加しました。

この設定でヘッダー画像のサイズを画面いっぱいにまで拡大することができます。

 

比率を調整するために縦サイズの大きさを変えるときは「height」項目の数値(300px)と、background-sizeの右側の数値(300px)を変更すると縦サイズも変わります。

 

980pxのヘッダー画像を2016年最新版CSS編集デザイン用のサイズに変更する方法

2016年以前のCSS編集デザインは980px×300pxのヘッダー画像が一般的でした。

しかし新デザインに変更してからは横幅が1120pxのヘッダー画像になっており、今までのヘッダー画像ではサイズが合わなくなっています。

これを調整するためにはCSSで対応可能なので以下のCSSを加えて画像サイズを変更しましょう。

.skin-bgHeader {
background: no-repeat scroll center;
background-color: #FFFFFF;
background-image: url(画像のURL);
background-size: 1120px 343px;
}

/* ヘッダーの横幅を設定する */
.skin-bgHeader [amb-layout=”headerInner”] {
width: 1120px;
}

/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout=”headerInner”]>a {
height: 343px;
}

 

上記の赤文字の部分のように横のサイズを1120pxとするのに合わせて縦のサイズも変更が必要です。

比率を計算すると元画像の縦サイズが300pxだった場合、343pxに変更すると縦横の比率を保ったままサイズを大きくできます。

比率が違うと画像を拡大した時のバランスがおかしくなるので注意しましょう。

 

ヘッダー画像の下に設置されているメニューとは?

アメブロでよく見かけるのがヘッダー画像の下に設置されているメニューバーです。

このメニューバーは「グローバルメニュー」や「グローバルナビ」とも呼ばれていて、ホームページなどでもよく見かけるボタンです。

 

メニューバーには主に、

  • ブログトップ
  • サービスメニュー
  • アクセス
  • お客様の声
  • お申込み
  • お問い合わせ

などがあります。

 

一般的には上記の項目のうち、5つくらいをメニューバーに入れる事が多いです。

メニューバーは多ければ多いほど良いというものでもありません。

数が多すぎるとボタンを押してもらえなくなるからです。

適度な数というのが5つ~6つ程なので、それくらいの数で設定するようにしましょう。

 

メニューバーの設定方法

メニューバーの設定方法を紹介します。

メニューバーを設置するにはフリースペースとcssの設定が必要となります。

それぞれの項目毎にコードを紹介するのでコピーして自分のブログに貼り付けてください。

 

メニューバー設置のフリースペースコード

<div id=”topmenu”><ul class=”menu”><li><a href=”■■■ここに記事のURLを貼り付け■■■”>メニュー</a></li><li><a href=”■■■ここに記事のURLを貼り付け■■■”>メニュー</a></li><li><a href=”■■■ここに記事のURLを貼り付け■■■”>メニュー</a></li><li><a href=”■■■ここに記事のURLを貼り付け■■■”>メニュー</a></li><li><a href=”■■■ここに記事のURLを貼り付け■■■”>メニュー</a></li></ul></div>

※改行を入れないようにしてください

 

メニューバー設置のcssコード

以下のコードをコピーしてcss編集の一番下に貼り付けてください。

/* メニュー設置用スペース */
#wrap,.skinContentsArea{
padding-top:70px;
position:relative;
}
/* メニューエリア */
#topmenu{
width:980px; /* メニュー全体の幅 */
position:absolute;
margin:0px 0px 0px 0px;
padding:0;
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
}
/* メニューリストのグループ */
#topmenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
/* メニューリスト */
#topmenu ul.menu li{
display:block;
float:left;
margin:0;
padding:0;
text-align:center;
width:196px; /*ボタンの幅*/
line-height:40px; /*ボタンの高さ*/
}
/* メニューリストのリンク */
#topmenu ul.menu li a{ /*通常時*/
display:block;
font-size:14px; /*ボタンの文字サイズ*/
color:#228B22; /*文字色*/
font-weight:bold; /*太字*/
background-color:#ffffff;/*背景色*/
}
/* メニューリストのリンク(マウスオーバー時) */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#ffffff; /*文字色*/
font-weight:bold; /*太字*/
text-decoration:none;/*下線*/
background-color:#228B22; /*背景色*/
}

 

ヘッダー画像にブログトップのリンクを設定する方法

ヘッダー画像の上にマウスのポインタを移動させるとブログのトップにリンクされている事があります。

これはブログトップにすぐに移動できるようにしていて意外と便利です。

 

これを設定していればグローバルメニューに「ブログトップ」を入れる必要がなく、ボタンの数を一つ減らす事ができます。

ブログトップへのリンク設定はcssの編集で簡単に設定できるので是非追加しておきましょう。

 

以下のコードをコピーしてcss編集の一番下に貼り付けてください。

/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitleArea{
display:block;
padding:0;
text-indent:-99999px;
}
.skinTitle{
display:block;
height:300px;
}

 

満足のいくヘッダー画像が自分で作れない時

「自分でやってみたけど思うようなヘッダー画像が作れない。」

「ヘッダー画像が欲しいけど作ってる時間がない。」

そんな時は作れる人に依頼しましょう。

 

時間を掛けて自己流で頑張るよりも、時間を掛けずに圧倒的にクオリティの高いプロの作ったヘッダー画像を使う方が何倍も良いブログになります。

趣味ブログでもお仕事用のブログでも完成度と満足度が違いますよ。

 

私も今までに様々なヘッダー画像を作ってきました。

あなたが満足するようなヘッダー画像をお作りします。


スポンサーリンク