直線上に配置
メニューを開く

資料小分類

  • Jimdo でHP作成
  • 完成形をイメージ
  • 写真や画像の整理
  • Jimdo 基礎知識
  • Jimdo に登録
  • Jimdo にログイン
  • Jimdo の基本操作
  • Jimdo の管理メニュー
  • ヘッダ画像とタイトル
  • ページを作成
  • サイト名の編集
  • 見出しと本文
  • 書式の指定
  • 写真
  • 写真付き文章
  • リンク
  • 表
  • ダウンロードファイル
  • 新着情報
  • 地図
  • 問い合わせフォーム
  • フッター
  • 段組みレイアウト
  • フォトギャラリー
  • カレンダー
  • 全体の配色変更
  • 背景設置と調整
  • ヘッダ画像変更
  • タイトルスタイル
  • 掲示板
  • ブログ公開準備
  • ブログの公開
  • 外部ブログ取り込み
  • ブログコメント処理
  • パスワード保護
  • レイアウト調整
  • サイトの複製

資料大分類

  • 資料トップへ戻る
  • 基礎編
  • HPを作成してみる
  • 白紙からページ作成
  • トップページを作成
  • サブページを作成
  • サイト管理
  • HTML/CSSを知る
  • Web ページ
  • HTML 練習
  • CSS 練習
  • レイアウト作成
  • レイアウト編集
  • 最新テクニック活用
  • フォトモーション
  • フルCSSテンプ基本
  • フルCSSテンプ応用
  • jQuery 基本
  • Jimdoで作成

リンク

  • サイト内検索
  • 問い合わせ
  • 参加者作品
  • HP勉強会トップ
  • A班ホームページ

写真付き文章を挿入する

つぎに写真付き文章を入れます。「大勢集まるわけ」のページから始めます。

用語 写真付き文章
写真付き文章は、文章と写真をセットで扱うことができ、さらに写真の回り込みを設定できる便利な機能です。

写真付き文章を挿入する

➊ 見出しと文章を入力した「大勢集まるわけ」ページを使う

  • 先の「見出しと本文」で作成した、大見出しとその直下の文章、中見出しのみを入力した「大勢集まるわけ」ページを使う。
    • 0

➋[写真付き文章]を入力する

  • 中見出し「ボランティア活動をすることで自分も磨いています」の下にマウスを移動し[コンテンツを追加]から、[写真付き文章]を選択する。
    • 0
  • ▼[画像をアップロードする]ボタンをクリックし、まず写真を入れる操作を行う
    • 画像をアップロードする
  • ▼ [アップロードするファイルの選択]で画像を選択し、[開く]をクリックする。
    • アップロードするファイルを選択する
    • 画像は、ビルダーの素材集、あるいは保存しておいたフォルダーから pic_g173.jpg を選択する
  • ▼ 表示の大きさを調整する。
    • 画像の大きさを調整する
    • ここでは左右同じようになるようにする。
  • ▼ 画像の回り込みを設定する。 ここでは画像の右揃えをセットする。
    • 画像の右回り設定

➌ 文章を入力する

  • [文章]タブをクリックし、文章を入力する。
    • 文章入力に切り替え
    • 「ボランティア活動」の文章を、用意したテキストファイルを参照し、直接入力する、あるいはコピー&ペーストする。
  • 用語 タブ
    タブとは、一つのウィンドウ内で複数の画面を切り替えて使用する機能に付いている見出しのこと。

  • ▼ 文章入力後[保存]をクリックする。
    • 文章入力
  • ▼ 完成版
    • 0
トップへ

練習ー2

「大勢集まるわけ」ページの中見出し「ホームページの作成で物事の整理が進みます」と「仲間が広がり新たな発見ばかりです」の直下にもそれぞれ写真付き文章を挿入しましょう。

画像は、ビルダーの素材集から、pic_g320.jpg と pic_g284.jpg を使います。画像は交互に左揃え・右揃えに配置します。

文章は、あらかじめテキストファイルで用意しておいたホームページ設計文書を参考に、直接入力するか、あるいはコピー&ペーストします。その後、必要に応じて編集します。

以下は、完成したページです。

  • 完成したページ
    • 0
トップへ

練習ー3

入力済みの見出しや文章を変更することはよくあることです。ここでは入力済みの中見出しを変更するのに挑戦します。

「大勢集まるわけ」ページの中見出し「ホームページの作成で物事の整理が進みます」を、「ホームページの作成で物事の整理が進みます、パソコンも上達します」と変更します。

操作ステップを以下に示しますので、試してください。

  • ①「大勢集まるわけ」ページを開き、[編集]モードになっていることを確認します。
  • ② 中見出し「ホームページの作成で物事の整理が進みます」にマウスを移動します。
  • ③ 中見出しが選択された状態になるので、クリックします。編集ツールが表示されます。
  • ④ 文字入力できるので、「パソコンも上達します」と、これまでの見出しの後ろに追加入力します。
  • ⑤[保存]ボタンを押します。編集ツールが閉じて、入力が反映された中見出しを確認します。
  • 中見出しを変更する
    • 0
トップへ

次に、 リンクを見てみましょう。

直線上に配置

| |