映画ときどき海外ドラマ

映画のあらすじ、たま~に雑学

【はてなブログのカスタマイズ】背景画像を変えるには?おすすめの画像サイズは?

【はてなブログのカスタマイズ】背景画像を変えるには?おすすめの画像サイズは?

はてなブログでは、ページの左右の余白部分に、お好みの背景画像を表示させることができます。

 

この記事では、はてなブログの背景画像をカスタマイズする方法、おすすめの画像サイズについてご紹介します。 

ちなみに、ここで言う『背景画像』とは、下図の赤枠で囲った部分です。

はてなブログの背景画像の位置

 

メインの記事とサイドバーの左右にある空白部分のことを指します。ヘッダーの背景画像とは別なので、注意してください。

 

はてなブログに用意されている画像の中から、背景画像を変える方法

 まずは、デフォルトで用意されている画像の中から、背景画像を切り替える方法です。

 

はてなの記事の管理画面 ⇨ 「デザイン」をクリック ⇨ 「カスタマイズ」をクリック

(画面まん中のスパナのようなアイコンが、「カスタマイズ」です)

スパナから背景画像

いちばん上の「背景画像」をクリックすると、はてなブログにデフォルトで用意されている53個の背景画像が表示されます。

 

「はてなブログ」デフォルトの背景画像


お好みの背景画像を選ぶ ⇨ 「変更を保存する」をクリック ⇨ 「✔設定を変更しました ブログを確認する

 

 試してみましょう。初期設定では、左右のスペースは真っ白。ちょっと味気ないですね。

 

【初期設定】サイドバー任意の記事の背景画像

 

 

背景画像を変えると・・・じゃん!!

 

サイドバーの背景画像を「青い布」に変える

 

 だいぶ印象が変わります。素人っぽさが消え、ちょっぴり高級感が出ます。

オリジナルの画像を背景画像にするには? おすすめの画像サイズは?

 自分で作った画像や写真、またはフリー画像を背景画像に設定することもできます。ここでは、フリー画像をアップロードする手順をご紹介します。

フリー画像をお絵描きソフト「ペイント」にダウンロードする

 例として、商用利用もOKなイラストを無料でダウンロードできる「イラストAC」というサイトを使います。 

無料イラストなら「イラストAC」

 

今回は、十野七さんの「水彩風冬の夜空の背景」を使わせていただきます。

イラストレーター 十野七さんのプロフィール/無料イラストなら「イラストAC」

 

 気に入った画像を選び、JPEGで「ダウンロードをクリック。

 

イラストACからダウンロード

 

 

Windows10に標準装備されているお絵かきソフト、「ペイント」にダウンロードします。

 画面上のメニュー ⇨ 左上の「サイズ変更」をクリック ⇨ 「ピクセル」にチェックを入れる(●) ⇨ 水平方向の数字を1500ピクセルに設定し、JPEG画像で保存する

 

ペイントのサイズ変更から長辺を1500ピクセル

 いろいろ試した結果、おすすめの画像サイズは、水平方向が1500ピクセル、垂直方向が1000ピクセルです。

 

ペイントでは画像サイズを調整することができます。実際には、この比率に調整するのはかなり手間がかかります。面倒なら、長いほうの辺だけでも1500ピクセルに合わせておきます。

 このままアップロードすると画像が重くなり、表示速度に影響が出ます。そこで、圧縮をかけておきます。

 

www.iloveimg.com

作ったオリジナル画像を背景画像として、アプロードする

 はてなの記事の管理画面 ⇨ 「デザイン」をクリック ⇨ 「カスタマイズ」をクリック ⇨ 「ファイルを選択」をクリックし、作った画像をアップロードする

 

ファイルを選択から、オリジナル画像をアップロード

 

変更を保存する」をクリック ⇨ 「✔設定を変更しました ブログを確認する

 

こんな感じで、オリジナルの背景画像を作ることができます。

 

オリジナル背景をアップロード

 

 もし、画像サイズが小さすぎる場合は、外側に空白ができてしまいます。そのときは、背景画像をセットする画面で、「繰り返す」を選択します。

 

オリジナル背景画像をくり返す

この「繰り返す」は、同じ画像を使い回すことによって、空いたスペースを埋める機能です。

背景画像を変える際の2つの注意点とは?

 外観が変わって、見た目にもオシャレ! 背景画像を変えるのは楽しいのですが、気をつけたいポイントが2つあります。 

背景画像によっては記事が読みづらくなり、広告も目立たなくなってしまう!

 あまり派手な背景画像を設定してしまうと、メインコンテンツである記事が読みにくくなってしまいます。

 

また、場合によっては、アドセンス広告やamazonや楽天のアフィリエイト広告も目立たなくなります。売り上げに影響するかどうか、分析する必要が出てきます。

オリジナル画像は表示速度を遅くしてしまう!

 はてなブログは、WordPressなどに比べて表示速度が遅いブログサービスです。オリジナル画像をアップロードすると、ページが重くなってしまいます。

特に

  • ふだんから、画像や写真が多め
  • 画像を圧縮していない
  • ブログ村などの外部パーツをつけている
  • はてなスターをつけている
  • コメント機能をオンにしている

に、いくつも当てはまる場合。

 

こういう人は、ただでさえ表示速度が遅いことになります。オリジナル画像を背景画像に設定するなら、

  1. 圧縮して、画像を軽くする
  2. 重たいブログパーツを、どれか外す

などの対策が必要となります。