ブログの背景画像やカラーテーマを設定する

広告
eyecatch

Blogger ではカラーテーマと呼ばれるブログで使用される色の配色をまとめたものを変更することでブログの背景色やその他の色をまとめて変更することができます。また背景に画像を設定して表示することも管理画面から簡単に行うことができます。背景画像は自分自身で画像を用意することもできますし、あらかじめ用意された複数の画像から選択することもできます。ここではブログの背景画像やカラーテーマを設定する手順について解説します。

※ Blogger では「上級者向け」設定を使うことで、背景やメイン部分の色を個別に指定したり透明に設定したりすることができます。詳しくは「背景(外側、メイン、ヘッダー)の色を設定する」を参照されてください。

ブログの背景に関する設定画面を表示する

ブログの背景色や背景画像を設定するには Blogger の管理画面左側に表示されている「テーマ」をクリックしてください。

ブログの背景に関する設定画面を表示する(1)

「テーマ」画面が表示されます。

ブログの背景に関する設定画面を表示する(2)

「ブログで使用中」の下に表示されている「カスタマイズ」をクリックしてください。

ブログの背景に関する設定画面を表示する(3)

テーマの編集画面が表示されます。

ブログの背景に関する設定画面を表示する(4)

画面左上に表示されている「背景」をクリックしてください。

ブログの背景に関する設定画面を表示する(5)

ブログの背景に関する設定を行う画面が表示されます。

ブログの背景に関する設定画面を表示する(6)

カラーテーマを設定してブログで使用される背景色や他の色を決定する

ブログで使用するメインとなる色を選択すると、ブログ内で使用されるタイトルの背景色やブログの背景色など様々な色の配色が設定されます。これをカラーテーマと呼んでいます。メインとなる色を変更するには色を指定するか、おすすめのテーマと表示されているところにあるカラーテーマの候補をクリックしてください。

最初におすすめのテーマをクリックしてみます。クリックするとカラーテーマが変更されて画面下部に表示されているプレビューにすぐに反映されます。最初に青系のカラーテーマです。

カラーテーマを設定する(1)

カラーテーマを設定する(2)

クリックしたカラーテーマに合わせてブログ内の色々な色が変更されました。今度は赤系のカラーテーマです。

カラーテーマを設定する(3)

カラーテーマを設定する(4)

先ほどと同じようにクリックしたカラーテーマに合わせてブログ内の色々な色が変更されました。

次にメインとなる色を指定してみます。「メインのカラーテーマ」と書かれた下の個所をクリックしてください。

カラーテーマを設定する(5)

メインの色を選択するためのウィンドウが表示されますので、いずれかをクリックしてください。

カラーテーマを設定する(6)

クリックした色にあわせてカラーテーマが作成され、画面下部のプレビューにすぐに反映されて表示されます。

カラーテーマを設定する(7)

設定が完了したら画面右上の「ブログに適用」をクリックしてください。

カラーテーマを設定する(8)

テーマに対して行った変更が保存されました。それではブログへアクセスしてみます。

カラーテーマを設定する(9)

新しいテーマカラーがブログに反映されて、タイトルや背景の色が変更されています。

用意された画像を使って背景画像を設定する

ブログの背景には色だけではなく画像を設定することができます。任意の画像をアップロードして設定することもできますし、あらかじめ用意された画像の中から選択して設定することもできます。

それでは最初にあらかじめ用意された画像から選んで背景画像に設定してみます。「背景画像」と書かれた下の部分をクリックしてください。

背景画像を設定する(1)

背景に設定する画像を選択するウィンドウが表示されます。

背景画像を設定する(2)

画像をクリックすると画面下部のプレビューにすぐに反映されてどのように表示されるのかを確認することができます。

背景画像を設定する(3)

背景に設定する画像が決まったら「完了」をクリックしてください。

背景画像を設定する(4)

背景画像が設定されました。背景画像を選択すると自動的にカラーテーマも画像に合わせて変更されます(その後で別のカラーテーマに変更することはできます)。設定が終わりましたら画面右上の「ブログに適用」をクリックしてください。

背景画像を設定する(5)

テーマに対して行った変更が保存されました。それではブログへアクセスしてみます。

背景画像を設定する(6)

背景に設定した画像がブログに表示されていることが確認できます。

アップロードした画像を使って背景画像を設定する

背景画像に設定する画像は Blogger で用意されたものだけではなく自分で用意した画像をアップロードして設定することもできます。設定するには「背景画像」と書かれた下の部分をクリックしてください。

独自画像を背景画像に設定する(1)

背景に設定する画像を選択するウィンドウが表示されます。

独自画像を背景画像に設定する(2)

ウィンドウの一番上にある「画像をアップロード」をクリックしてください。

独自画像を背景画像に設定する(3)

背景画像に使用できる画像は最大 300KB 以下で JPG 、 GIF 、 PNG のいずれかのファイル形式の画像となります(ただ画像のサイズはもう少し大きくてもエラーにはなりませんでした)。「ファイルを選択」をクリックして画像を選択してください。

独自画像を背景画像に設定する(4)

画像の選択が終わりましたら「完了」をクリックしてください。

独自画像を背景画像に設定する(5)

背景画像が設定されました。続いて画像をどのように背景に表示するのかを設定します。

独自画像を背景画像に設定する(6)

最初に画像の並べ方です。「並べない」を選択するとアップロードした画像を1つだけ背景に表示します。「並べて表示」を選択すると上下左右にタイル状に画像を並べます。「横に並べる」を選択すると左右方向にだけ画像を並べ、「縦に並べる」を選択すると上下方向にだけ画像を並べます。

独自画像を背景画像に設定する(7)

次に画像の配置方法です。画像を最初にどこに置くのかを「左上」、「中央上」、「右上」、「左下」、「中央下」、「右下」から指定します。画像の並べ方で「並べない」を選択している場合は画像を置く場所の指定となりますし、画像を並べておく場合にもどこに最初画像を置いて並べだすのかに関係してきます。

独自画像を背景画像に設定する(8)

最後にページをスクロールした時に背景画像も一緒にスクロールするか、それとも背景画像は固定でスクロールさせないかの設定です。スクロールさせる場合は「ページと共にスクロール」にチェックをしてください。

独自画像を背景画像に設定する(9)

今回はすべてデフォルトで設定されている値のままにしました。「並べて表示」「左上」「ページと共にスクロール」です。設定が終わりましたら画面右上の「ブログに適用」をクリックしてください。

独自画像を背景画像に設定する(10)

テーマに対して行った変更が保存されました。それではブログへアクセスしてみます。

独自画像を背景画像に設定する(11)

背景に設定した画像がブログに表示されていることが確認できます。

-- --

ブログの背景色や背景画像を設定する手順について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。