◆練習前に押下してデスクトップなどわかりやすい場所にダウンロードしておきましょう。

画像ファイル:https://demo.i-school.jp/file/34
PDFファイル:https://demo.i-school.jp/file/27

画像の挿入

メニュー一覧の上記アイコンを押下すると、エクスプローラが開きますので、先程ダウンロードした画像ファイルをここからアップします。

2025-11-18_18h07_45

★参考(画像の大きさ)

  • 1200px:ヘッダー画像や左右のエリアを使わない場合のメインエリアの枠一杯の大きさ
  • 800px:左右どちらかのエリアを使った時のメインエリアの枠一杯の大きさ
  • 400px:800pxの半分の大きさ、またはフレームの幅を「6」にしたときのエリア幅いっぱいの大きさ
    ※ブログで推奨される画像の大きさです。
  • 200px:さらにその半分の大きさ

【練習してみましょう】Responsive(レスポンシブ)対応

1.エクスプローラが開いたら保存した画像を選択し、800pxで挿入してみましょう。
2025-11-19_10h10_19

2.続けて(改行せずに)同じ画像を400px、200pxと3つ挿入してみましょう。

3.挿入できたら、それをスマホ表示にして画像の大きさや表示される場所に注意して確認してみましょう。

4.次に、画像に枠を付けて挿入してみましょう。

※エクスプローラで画像を選択したら、「クラス」の項目で「枠線+Responsive」を選択して「保存」します。

5.画像の周囲に5pxの余白を入れてみましょう。
2025-11-12_13h42_01

※画像選択エクスプローラで、左側の「詳細」を押下し、上下余白や左右の余白をピクセル数で入力してから保存します。

6.画像に次のリンクを貼りましょう
リンク:https://www.com-net2.city.hiroshima.jp/portal/
※右クリック⇒「リンクのアドレスをコピー」または「リンクのコピー
2025-11-12_13h39_12 

※外部サイトへのリンクの場合は、「新規ウィンドウ」にします。

PDFファイルの挿入

PDFマークのアイコンを押下するとエクスプローラが開き、サムネイル(ファイルなどの内容を一覧表示するために使われる見本画像)付きでアップロードすることができます。
※1つのファイルの容量制限に注意!

2025-11-19_08h21_33

2025-11-19_10h40_54

1.エクスプローラを開いて保存したPDFファイルを選択します。

2.「サムネイルの大きさ」を選択します。
 大きさの目安:大(1200px)、中(800px)、小(400px)、極小(200px)、サムネイル(150px)

3.「サムネイルの数」:必要に応じて

4.「保存」を押下します。

※「PDFパスワード」:このパスワードはファイルにパスワードを付けるための設定ではなく、すでにパスワード付きのファイルをアップする場合にそのパスワードを入力するためのものです。通常は空白でOK

画像とPDFの挿入ができたら、次は表組みの練習をしましょう。
https://demo.i-school.jp/table

👉画像挿入のマニュアルはこちら
https://support.opensource-workshop.co.jp/file/55

👉リンクの挿入方法のマニュアルはこちら
https://support.opensource-workshop.co.jp/file/55