JIMDO EXPERT
今すぐJimdoに登録する
メニューの表示切り替え

HOME  > 実践!ホームページ作成! > 第18回 背景をオシャレに

【連載】 実践!Jimdoでホームページ作成!

第18回 背景をオシャレに

チッチ

前回は管理メニューの「スタイル」でフォント設定について教えたね。

今日は背景の設定についておしえるよ!

(※選んだレイアウトによっては背景の設定を適用できないことがあります)

あっくん

わぁ~い!ぼくのホームページの背景、登録した時のままだったから、

色をつけてみたかったんだ!!

チッチ

じゃあ、さっそく管理メニューの「デザイン」をクリックして「背景」を選んでみてね。まずは背景の編集画面を説明していくよ。


あっくん

はーい!

チッチ

ここから背景の色を設定したり、好きな画像をアップロードして使う事ができるんだよ。

しかも、背景には動画を設定することもできちゃうんだ!

まずは大きな「+」ボタンをクリックして新しい背景の設定をしてみよう!

  1. +ボタン・・・新しい背景の設定を作成します。
  2. 小さな歯車アイコン・・・選択中の背景の詳細設定を変更できます。
  3. ゴミ箱アイコン・・・選択中の背景の設定を削除します。
  4. 大きな歯車アイコン・・・背景固定の設定ができます。オンにすると背景が固定され、ページをスクロールしても動きません。
あっくん

「画像」「スライド表示」「動画」「カラー」っていうメニューが出てきたよ!

こんなにたくさんあると迷っちゃうよ~!!

チッチ

ふふ。まずは簡単な「カラー」の背景を試してみよう!

「+」ボタンのメニューから「カラー」をクリックしてね。

カラーの設定

背景カラー設定
  1. カラーピッカーから色を作成したり、カラーコードを直接入力して変更できます。
  2. 「この背景画像をすべてのページに設定する」ボタンをクリックすることで、すべてのページの背景に同じカラーを適用することができます。
  3. カラー設定画面を閉じます。
プレビュー

「保存」を選ぶと背景にカラーの設定が適用されます。

「やり直す」を選ぶと背景にカラーの設定が適用されず、設定前の画面に戻ります。

チッチ

次は自分で用意した好きな「画像」を背景にしてみよう。

大きいサイズの画像じゃないと、画面の幅に合わせて引き伸ばされてぼやけた画像になってしまうから注意してね。

あっくん

まかせて!

おしゃれできれいな画像をたくさん用意しておいたよ〜!

画像の設定

「+」ボタンのメニューから「画像」をクリックして、パソコン内からアップロードしたい画像を選びます。

  1. 中央に表示されている白い円を動かすことで、表示させる画像の中心を設定できます。
  2. 「この背景画像をすべてのページに設定する」ボタンをクリックすることで、すべてのページの背景に同じ画像を適用することができます。
  3. 画像設定画面を閉じます。

「保存」を選ぶと背景に画像の設定が適用されます。

「やり直す」を選ぶと背景に画像の設定が適用されず、設定前の画面に戻ります。

チッチ

つづいて「画像」の応用で「スライド表示」の背景を設定してみよう!

複数枚の画像を、一定の速さで順番に表示させることができるよ。

お気に入りの画像をいくつか用意してね。

あっくん

えへへ。大好きなおやつの画像を3枚選んでみたよ!

楽しみだな〜!

スライド表示の設定

「+」ボタンのメニューから「画像」をクリックして、パソコン内からアップロードしたい画像を2枚以上選んでアップロードします。

  1. 中央に表示されている白い円を動かすことで、表示させる画像の中心を設定できます。
  2. 「+」ボタンをクリックして新しい画像を追加します。
  3. 現在スライド表示されている画像一覧です。クリック&ドラッグで左右に並び替えができます。ゴミ箱アイコンをクリックすると一覧から画像が削除されます。
  4. スライド表示の速さを設定できます。「スライド開始」ボタンをクリックするとスライド表示がプレビューで確認できます。止める時は「一時停止」ボタンをクリックします。
  5. 「この背景画像をすべてのページに設定する」ボタンをクリックすることで、すべてのページの背景に同じスライド表示を適用することができます。
  6. スライド表示設定画面を閉じます。
チッチ

わぁ!あっくんらしい画像でぜんぶおいしそう!!

おなかがすいちゃう前に、とっても簡単な「動画」の設定についておしえるね!

動画の設定

「+」ボタンのメニューから「画像」をクリックして、パソコン内からアップロードしたい画像を2枚以上選んでアップロードします。

  1. YoutubeまたはVimeoの「動画のURL」を入力します。
  2. 「動画を追加する」ボタンをクリックして背景に動画を適用します。
  3. 「キャンセル」ボタンをクリックすると適用せずに設定画面を閉じます。
チッチ

「カラー」「画像」「スライド表示」「動画」を使って、

あっくんのホームページにピッタリの背景を探してみてね!

あっくん

わかったよ!

同じレイアウトでも背景によってぜんぜんイメージが変わるからたのしいね!

チッチ

「デザイン」メニューでフォントや背景をカスタマイズすればオリジナリティのあるホームページができるから、

いろいろ試してかっこいいホームページをつくってね!!

あっくん

よーし、こうやって・・・こうして・・・うーん。

こっちのほうがいいかな?

できた!できたよチッチ!みて!

チッチ

はいはい、慌てないで!いま見るね!

こ・・・これは!あっくん、独特なセンスしてるね。

あっくん

わーいありがとう!チッチにほめられた!

うれしいなー。

チッチ

よかったね・・・あっくん。

あっくんの独特なセンスが爆発した背景にチッチはあぜん。

でもお気に入りのページができてよかったね、あっくん。