はてなブログでは、ページの左右の余白部分に、お好みの背景画像を表示させることができます。
この記事では、はてなブログの背景画像をカスタマイズする方法、おすすめの画像サイズについてご紹介します。
ちなみに、ここで言う『背景画像』とは、下図の赤枠で囲った部分です。
メインの記事とサイドバーの左右にある空白部分のことを指します。ヘッダーの背景画像とは別なので、注意してください。
はてなブログに用意されている画像の中から、背景画像を変える方法
まずは、デフォルトで用意されている画像の中から、背景画像を切り替える方法です。
はてなの記事の管理画面 ⇨ 「デザイン」をクリック ⇨ 「カスタマイズ」をクリック
（画面まん中のスパナのようなアイコンが、「カスタマイズ」です）
いちばん上の「背景画像」をクリックすると、はてなブログにデフォルトで用意されている53個の背景画像が表示されます。
お好みの背景画像を選ぶ ⇨ 「変更を保存する」をクリック ⇨ 「✔設定を変更しました ブログを確認する」
試してみましょう。初期設定では、左右のスペースは真っ白。ちょっと味気ないですね。
背景画像を変えると・・・じゃん！！
だいぶ印象が変わります。素人っぽさが消え、ちょっぴり高級感が出ます。
オリジナルの画像を背景画像にするには？ おすすめの画像サイズは？
自分で作った画像や写真、またはフリー画像を背景画像に設定することもできます。ここでは、フリー画像をアップロードする手順をご紹介します。
フリー画像をお絵描きソフト「ペイント」にダウンロードする
例として、商用利用もOKなイラストを無料でダウンロードできる「イラストAC」というサイトを使います。
今回は、十野七さんの「水彩風冬の夜空の背景」を使わせていただきます。
イラストレーター 十野七さんのプロフィール／無料イラストなら「イラストAC」
気に入った画像を選び、JPEGで「ダウンロード」をクリック。
Windows10に標準装備されているお絵かきソフト、「ペイント」にダウンロードします。
画面上のメニュー ⇨ 左上の「サイズ変更」をクリック ⇨ 「ピクセル」にチェックを入れる（●） ⇨ 水平方向の数字を1500ピクセルに設定し、JPEG画像で保存する
いろいろ試した結果、おすすめの画像サイズは、水平方向が1500ピクセル、垂直方向が1000ピクセルです。
ペイントでは画像サイズを調整することができます。実際には、この比率に調整するのはかなり手間がかかります。面倒なら、長いほうの辺だけでも1500ピクセルに合わせておきます。
このままアップロードすると画像が重くなり、表示速度に影響が出ます。そこで、圧縮をかけておきます。
作ったオリジナル画像を背景画像として、アプロードする
はてなの記事の管理画面 ⇨ 「デザイン」をクリック ⇨ 「カスタマイズ」をクリック ⇨ 「ファイルを選択」をクリックし、作った画像をアップロードする
「変更を保存する」をクリック ⇨ 「✔設定を変更しました ブログを確認する」
こんな感じで、オリジナルの背景画像を作ることができます。
もし、画像サイズが小さすぎる場合は、外側に空白ができてしまいます。そのときは、背景画像をセットする画面で、「繰り返す」を選択します。
この「繰り返す」は、同じ画像を使い回すことによって、空いたスペースを埋める機能です。
背景画像を変える際の2つの注意点とは？
外観が変わって、見た目にもオシャレ！ 背景画像を変えるのは楽しいのですが、気をつけたいポイントが2つあります。
背景画像によっては記事が読みづらくなり、広告も目立たなくなってしまう！
あまり派手な背景画像を設定してしまうと、メインコンテンツである記事が読みにくくなってしまいます。
また、場合によっては、アドセンス広告やamazonや楽天のアフィリエイト広告も目立たなくなります。売り上げに影響するかどうか、分析する必要が出てきます。
オリジナル画像は表示速度を遅くしてしまう！
はてなブログは、WordPressなどに比べて表示速度が遅いブログサービスです。オリジナル画像をアップロードすると、ページが重くなってしまいます。
特に
- ふだんから、画像や写真が多め
- 画像を圧縮していない
- ブログ村などの外部パーツをつけている
- はてなスターをつけている
- コメント機能をオンにしている
に、いくつも当てはまる場合。
こういう人は、ただでさえ表示速度が遅いことになります。
関連：【コアウェブバイタル】はてなブログで出来る対策は?表示速度を改善するには?
画像を背景画像に設定するなら、
- 圧縮して、画像を軽くする
- 重たいブログパーツを、どれか外す
などの対策が必要となります。
