通常ブロックには、文章だけでなく画像を載せることもできます。ここでは、画像の挿入方法をご説明します。練習のために、好きな画像をひとつ用意しておいてください(形式はJPEG、GIF、PNGのいずれかをご用意ください)。
SITE PUBLIS に画像を載せるにはいくつかの方法がありますが、ここでは「ライブラリ」という機能を使ったやり方を見ていきます。「ライブラリ」とは、画像などを貯めておく倉庫のような場所です。いったんライブラリに画像を置き、次に通常ブロックでライブラリの画像を読み込む、という手順を踏みます。
ライブラリに画像をアップロードする
ライブラリの中をのぞいてみましょう。編集画面上部のメガメニュー「編集」>「登録」>「ライブラリファイル」をクリックしてください。
クリックすると、「ライブラリファイル登録」のウインドウが開きます。
「ファイルの追加」のボタンを押すと、「ファイル追加」ウインドウが開きます。
「ファイルを選択」ボタンをクリックし、あなたの PC から画像を選択してください。ここでは「img_publis.png」という画像を選択しました。選択し終わったら、「保存」をクリックしてください。
「保存」をクリックすると、「ライブラリファイル登録」のウインドウに戻ります。「現在のフォルダ」に「img_publis.png」が追加されていることが確認できます。
ファイル名をクリックすると、右側に画像がプレビュー表示されます。
「閉じる」ボタンを押すことで、ライブラリへの画像の登録は完了です。
通常ブロックに画像を追加する
通常ブロックに戻って、メニューバー内「画像の挿入・編集」 をクリックします。
「画像選択」の画面が開きます。
上の画像の赤枠で囲まれている「サーバーのライブラリから選択」を選択し、画像のファイル名 img_publis.png をクリックし、「保存」をクリックすると、通常ブロックに画像が追加されます。
画像の大きさが大きすぎる・小さすぎるという場合には、調整しましょう。画像をクリックすると青く反転し、選択されます。この状態でマウスのカーソルを画像の右下隅に移動すると、カーソルのアイコンが両方向矢印に変化します。
そのまま左上方向にドラッグすると、画像を縮小することができます。
画像の縮小ができました。
ここで紹介した画像の大きさの調整方法は、画像の「見た目の大きさ」を変更するものであり、画像の「実体サイズ」を変更するものではありません。実体サイズを変えずに見た目の大きさを変更することには、次のような問題があります。
- サイズが小さな画像を登録して、見た目の大きさを大きくした場合、画質が粗く見える
- サイズが極端に大きな画像を登録して、見た目の大きさを縮小して表示している場合、画像の読み込みに時間がかかるように感じられる
- 見た目の大きさの変更は、実際には閲覧者側のブラウザが行うため、閲覧者の環境に処理負荷がかかる
上記の問題は、ファイルの実体サイズを予め調整しておき、見た目の大きさの変更をしないことで避けることができます。実体サイズの変更は、次の方法で行えます。
- 画像編集ソフトで実体サイズを変更し、保存する
- SITE PUBLIS に画像を登録する際、「画像サイズを変換する」で実体サイズを変更する
チャレンジ!
「ライブラリ」内は、フォルダを作成することができます。フォルダを1つ作成し、フォルダ内に画像を保存してみてください。なお、作成したフォルダの中に入るには、フォルダ名をダブルクリックします。