![背景画像の使い方をみてみよう](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/icd57060a01020c4f/version/1548655776/%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%82%92%E3%81%BF%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86.png)
メインビジュアル部分に表示される画像は、ジンドゥー(Jimdo)の背景で設定します。背景画像には、画像や動画、単色の設定が可能です! 今回はジンドゥーの背景画像の設定方法についてご紹介します。
1. Jimdo の背景は大きく分けて2つのスタイル
Jimdo には「背景」を好きな画像に設定したり、色を変えたりできる機能が備わっていますが、大きく分けて下図のように 2 つのスタイルが存在します。
(A)背景がコンテンツの「バックグラウンド」になっているタイプ
![(A)背景がコンテンツの「バックグラウンド」になっているタイプ](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/i35789fdff55bb22e/version/1548651145/a-%E8%83%8C%E6%99%AF%E3%81%8C%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE-%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89-%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%82%BF%E3%82%A4%E3%83%97.png)
(B)背景がコンテンツの「メインビジュアル」になっているタイプ
![(B)背景がコンテンツの「メインビジュアル」になっているタイプ](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/if720e5dc9ab51ad1/version/1548651164/b-%E8%83%8C%E6%99%AF%E3%81%8C%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE-%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB-%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%82%BF%E3%82%A4%E3%83%97.png)
2. 背景機能の基本画面を確認しよう
Jimdo のアカウントを開設すると、テンプレートによってはあらかじめ背景画像が設定されています。削除や変更をしてみましょう。
1)Jimdo にログイン後、左側のツールバーから「デザイン」を選択後、「背景」を選択します。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/iadab5d78668465d9/version/1548651277/image.png)
▼
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ie420e692eed312f0/version/1548651323/image.png)
2)画面の上部にボタンが表示されますので、「背景」をクリックします。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i3fda1e3e44fe9a15/version/1548651360/image.png)
3)「+」記号が表示されているボタンをクリックすると、以下の画面が表示されます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i11c70c50761017be/version/1548651385/image.png)
▼
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ic0edbd761babd8e6/version/1548651412/image.png)
①画像 | 画像を一枚、静止状態で表示させます。 |
②スライド表示 | 画像を複数枚設置することで、スライド形式で表示させることができます。 |
③動画 | あらかじめYoutubeやVimeoにアップロードされている動画を、背景画像として表示させることができます。 |
④カラー | 単一のカラーを背景に設定することができます。 |
3. 背景画像(静止)を変更してみよう
背景画像を変更する際、1枚だけ変更する方法と、複数枚を設定してスライド表示にする機能があります。ここでは1枚だけ変更し、静止画の状態で表示を変更する方法を解説します。
1) 背景の設定画面で「画像」を選択します。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i29f4978009cb3084/version/1548651470/image.png)
2) ファイルをアップロードする画面が表示されますので、設定したい画像を選んでクリックしましょう。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i50a14bee2d201966/version/1548651500/image.png)
▼
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ie23d9c8d59fefa97/version/1548651532/image.png)
3)背景画像が変更されました。
(A)背景がコンテンツの「バックグラウンド」になっているタイプ
![](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/ia571cf0d34078674/version/1548651608/image.png)
(B)背景がコンテンツの「メインビジュアル」になっているタイプ
![](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/i94097d66fd645a47/version/1548651616/image.png)
4. 複数枚の画像を設定してスライドにしてみよう
背景画像を複数枚設定し、スライドのように表示させる機能を使ってみましょう。
1) 背景の設定画面で「スライド表示」を選択します。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i79da3e21cf98acab/version/1548651673/image.png)
2) ファイルをアップロードする画面が表示されますので、設定したい画像を複数選んでクリックしましょう。
スライド表示では、最低2枚以上の画像をアップロードする必要があります。Windowsではキーボードの「Ctrl(コントロール)」を押しながら、画像をクリックすると複数枚選択できます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i5bd7628ff7845322/version/1548651753/image.png)
▼
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i1e566b74b229e756/version/1548651780/image.png)
3) スライド表示を切り替えるスピードを設定しましょう。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i4e45facff301c315/version/1548651819/image.png)
4)背景として設定した画像がスライドショー形式になりました。
(A)背景がコンテンツの「バックグラウンド」になっているタイプ
![](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/i37c77d6577d30986/version/1548651903/image.png)
(B)背景がコンテンツの「メインビジュアル」になっているタイプ
![](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/i00004619f4a53a87/version/1548651915/image.png)
イメージ画像を使う際のポイントについて
Jimdoの公式サポートページ内に「イメージ画像を使う際のポイント」として、画像形式や背景画像に最適な画像のサイズなどが解説されています。更に、無料で利用できる背景画像も提供中!ぜひ活用してください。
5. 動画を設定してみよう
前項では複数の静止画像を使用しましたが、ここでは「動画」を使って、更に動きのある作り方を解説します。使用する動画はあらかじめ準備しておきましょう。
1) 動画を準備しよう
Jimdoの背景として動画を設置する場合には、あらかじめ作成した動画を、YoutubeかVimeoにアップロードしておきます。
![https://www.youtube.com/](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i1c4c0a560e2bc307/version/1548653008/https-www-youtube-com.png)
![https://vimeo.com/](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i48813cf817e3fd20/version/1548653036/https-vimeo-com.png)
Youtube や Vimeo は、動画共有サービスです。どちらも無料で利用できますが、動画をアップロードするためには、事前にアカウントを取っておく必要がありますので、準備段階で契約しておきましょう。
利用方法や規約については、各サービスごとの案内ページにてご確認ください。
2)準備した動画をアップロードし、URL(アドレス)をコピーしておきます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i751411b6d2eed5d1/version/1548653109/image.png)
3)Jimdoにログインし「スタイル」⇒「背景」を選択します。背景の設定画面が表示されたら「動画」をクリックしましょう。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i30f6d66b1d712dbd/version/1548653139/image.png)
4)動画のURL(アドレス)を貼り付ける画面が表示されますので、さきほどコピーしておいたURLを貼り付けます。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/icc0412f53efc10d8/version/1548653170/image.png)
5)背景に動画が表示されました。
(A)背景がコンテンツの「バックグラウンド」になっているタイプ
![](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/i26e0ed8230c5b759/version/1548653230/image.png)
(B)背景がコンテンツの「メインビジュアル」になっているタイプ
![](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/iff834c489cf72e14/version/1548653239/image.png)
第三者が作成した無料動画素材を使用する場合は、著作権や利用規約に注意しましょう。
※動画の配信元が、規約を用意しているケースが多いので、確認の上使用してください。
6. 背景に色をつけてみよう
(2)~(4)までは、画像(写真)や動画を使用しましたが、写真を使用せず単一のカラーを設定することもできます。
1) 背景の設定画面で「カラー」を選択します。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i4ff8c049f98577dc/version/1548653370/image.png)
2)カラーを変更できる画面が表示されますので、好みの色に変えてみましょう。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i64448c3b6a52a7ef/version/1548653394/image.png)
3)背景色が変更されました。
(A)背景がコンテンツの「バックグラウンド」になっているタイプ
![](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/i2c2ea70ca7aaa806/version/1548653465/image.png)
(B)背景がコンテンツの「メインビジュアル」になっているタイプ
![](https://image.jimcdn.com/app/cms/image/transf/dimension=343x10000:format=png/path/s0e84577b02fd7261/image/i8f10f96ac1623581/version/1548653473/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ifd9e90b19c4982fd/version/1548653513/image.jpg)
Jimdo の「背景」機能には、4 種類の機能があります。静止画、スライド、動画、カラーと、作りたいイメージに合わせて活用しましょう!ホームページの雰囲気がガラッと変わって、楽しいですよ。本文中でも解説しましたが、第三者が作成した動画、あるいは撮影した写真などを使用する場合には、著作権や利用規約に注意して、使ってくださいね。