自社でホームページ作成
Jimdo入門講座


第2回 デザインに関する設定


1.デザインメニュー
2.レイアウトの選択
3.背景画像の設定他
4.スタイル設定概念

1.デザインメニュー

Jimdo のデザインに関する設定は、左図のように3つのメニューになります。

  1. ① レイアウトの選択
  2. ② 背景(画像)の設定
  3. ③ タイトルや見出しのスタイル設定

ホームページ全体のデザインは Jimdo で用意されている「レイアウト」(テンプレート)から選択します。そして、トップページの写真などの背景画像は、あらかじめ準備しておき、「背景」で設定します。その際、下記のファイルサイズと形式に注意しましょう。

  1. 画像サイズ:  最大サイズ: 幅 1600px × 高さ 1000px
  2. 画像の形式:  jpg 形式、png 形式


また、トップページのタイトル文字やホームページ全体の見出しの文字書式については、「スタイル」で設定を行います。それらの設定を見てみましょう。

2.レイアウトの選択

Jimdoには、多くのレイアウトが用意されています。選択するレイアウトによって背景画像が表示される位置やナビゲーションメニューの位置、サイドバーの表示位置が異なります。どのような構成にするかを念頭において選択しましょう。アカウント登録時に選んだレイアウトも変更することができます。

また、1つのレイアウトにデザインの異なる複数の「プリセット」からも選択できます。

  1. ① [管理メニュー]→[デザイン]→[レイアウト]を選択
  2. ② レイアウト一覧が表示されます。(下図)
  3. ③ 選択したいレイアウトの上にマウスポインタ―を合わせて[プレビュー]をクリック
  4. ④ 選択したレイアウトがプレビューされます。
        (右上のデバイス別プレビューボタンでスマートフォンでの表示も確認可能)
  5. ⑤ [保存]でレイアウトが適用され、[やり直す]でキャンセルされます。
  6. ⑥ [閉じる]ボタンでレイアウト選択画面を閉じます。



※レイアウト一覧 https://jimdo.design/
※タイトル文字を変更し、ロゴ画像をあらかじめ準備し差替えて使います。

3.背景画像の設定他

背景設定には4種類の方法があります。

  1. ① 画像(背景エリア一杯に画像を表示)
  2. ② スライド表示(複数の画像を速度設定し連続表示)
  3. ③ 動画(Youtube または Vimeo のURL 設定で動画を表示)
  4. ④ カラー(色を指定)

あらかじめ、それぞれの設定に合わせて背景データを準備しましょう。①②の画像ファイル形式は「.png」「.jpg」「.gif」です。

次の手順で背景の設定を行います。

  1. ① [管理メニュー]→[デザイン]→[背景]を選択
  2. ② プラス(+)をクリックすると背景種類が表示(下図)
  3. ③ 背景種類(画像/スライド表示/動画/カラー)を選択し、指示に従い設定
  4. ④ [保存]で背景が適用され、[やり直す]でキャンセルされます。
  5. ⑤ 保存した画像が「選択画像」として背景設定画面に表示

Jimdoの背景設定

※ 選択画像の[歯車]をクリックすると背景画像の編集ができます。
※ 選択画像の[歯車]をクリックし、画像上の丸印(〇)の位置を変えると画像の位置調整できます。
※ 選択画像の[歯車]をクリックし、[この背景画像をすべてのページ設定する]を選択します。

4.スタイル設定概念

スタイル機能を利用すると、ホームページ全体、もしくは見出しや文章など部分的に文字色やフォントの種類等を変更することができます。

スタイル設定の[詳細設定]がオフの時はホームページ全体スタイルの設定になり、[詳細設定]がオンの時は部分的スタイルの設定になります。ここでは、[詳細設定]オンでトップページのタイトル文字の編集方法をご紹介します。

  1. ① [管理メニュー]→[デザイン]→[スタイル]を選択
  2. ② スタイル編集画面が表示され[詳細設定]がオンになっていることを確認

Jimdoのスタイル設定画面

  1. ③ 刷毛アイコンを編集したいコンテンツ(タイトル)でクリックすると編集画面が表示

Jimdoのスタイル設定画面

  1. ④ フォント、フォントサイズ、フォントカラーなどを編集
  2. ⑤ 選択コンテンツ(タイトル)の設定が変ります。
  3. ⑥ [保存]で設定が変更され[やり直し]でキャンセルされます。

※見出しや本文など選択コンテンツを変更すれば、同様の操作でスタイルを変更できます。
※見出しや本文のコンテンツを変更すると全ページの同コンテンツのスタイルが変更されます。
※ナビゲーションやリンク文字を選択すると文字色(リンクカラー、active)背景色を変更できます。

[次へ]