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


第5回 コンテンツの活用(基本)


1.画像付き文章
2.カラムの作成
3.水平線と余白
4.リンクの設定

1.画像付き文章

写真に説明文章を添える場合は、「画像付き文章」を利用します。画像の表示位置(左右)を選択でき、画像のサイズも変更できます。通常の「文章」と「画像」の編集機能がそのまま使用できます。

  1. ① コンテンツを追加したい位置にマウスポインタを合わせる
  2. ② [+コンテンツを追加]が表示されたらクリック
  3. ③ コンテンツの一覧から[画像付き文章]を選択

画像付き文章入力画面

  1. ④ [ここへ画像をドラッグ]をクリックして画像を追加
  2. ⑤ 左側の文章エリアに文字入力し、下の編集ボタンで書式設定
  3. ⑥ [画像]タブに切り替えると画像の書式設定ができます。
  4. ⑦ [保存]をクリック

※画像を右側に配置する場合は、画像の編集ボタン[右揃え]を選択します。
※[文章]と[画像]の編集ボタンについては
「第4回コンテンツの基本操作」の3.4.をご覧ください。

2.カラムの作成

コンテンツを横並びに表示する場合には「カラム」を利用します。「カラム」を利用して複数の列を作り、その中に写真や文章などのコンテンツを配置できます。列の数は追加したり削除したりできます。

例えば、写真を横に3枚並べて説明文を付ける場合には、カラムを作成し、列数を3列に設定します。各列の中に画像を挿入し、画像の下に文章を追加します。

  1. ① コンテンツを追加したい位置にマウスポインタを合わせる
  2. ② [+コンテンツを追加]が表示されたらクリック
  3. ③ コンテンツの一覧から[カラム]を選択

カラムの設定画面

  1. ④ 最初カラムは2列なので追加したい場所の[+]をクリックして1列追加
  2. ⑤ [保存]でカラムを保存
  3. ⑥ 各カラム内で[+コンテンツを追加]をクリックして[画像]選択
  4. ⑦ 写真を挿入し、書式設定して[保存]
  5. ⑧ 写真の下に[文章]を追加して[保存]
  6. ⑨ 各カラム内で⑥~⑧を繰り返します。

カラムの利用例

※2カラムで[画像]と[文章]コンテンツを各カラムに追加し、写真の説明文を作成することができます。

3.水平線と余白

ホームページ内に複数のコンテンツを配置する際、区切りの位置を明確にするため、[水平線]を利用することがあります。あるいは、見出しの下に[水平線]を引くことで見出しを強調させることもできます。

<水平線の追加>

  1. ① コンテンツを追加したい位置にマウスポインタを合わせる
  2. ② [+コンテンツを追加]が表示されたらクリック
  3. ③ コンテンツの一覧から[水平線]を選択
  4. ④ 水平線が表示されます。
水平線の追加

また、コンテンツとコンテンツの間隔がないとページが窮屈になります。ページ内のバランスをとるためコンテンツとコンテンツの間に空白を入れる場合は、[余白]を利用します。

<余白の追加>

  1. ① コンテンツを追加したい位置にマウスポインタを合わせる
  2. ② [+コンテンツを追加]が表示されたらクリック
  3. ③ コンテンツの一覧から[余白]を選択
  4. ④ 余白の大きさ(〇〇px)を指定し[保存]をクリック
余白の追加

余白と水平線を上手く使って、見やすいページを作成してください。

4.リンクの設定

ホームページで文字や画像にリンクの設定をしておくと、クリックした時に、ほかのページに移動することができます。自分のホームページ内にリンクすることもできるし、外部URLを設定すると外部ホームページにリンクすることもできます。

<文字にリンク設定する>

  1. ① リンク設定する文字を選択
  2. ② [リンク]をクリック
  3. ③ リンク先指定画面で、リンクを指定する(
  4. ④ [リンク設定]をクリック


<画像にリンク設定する>

  1. ① リンク設定する画像を選択
  2. ② [画像にリンク]をクリック
  3. ③ リンク先指定画面で、リンクを指定する
  4. ④ [リンク設定]をクリック



※ 文字や画像以外にも、[ボタン]コンテンツを利用するとリンクボタンも作成できます。

[次へ]