編集環境の準備
講習を始める前に、「かるがもカフェ」内にある「スケジュール」と「デザイン文書」メモ帳を画面半分ずつに表示できるように、各自のPC画面を設定してもらった。
毎回事前にこうした設定を行うことで、OneDriveでの共有ファイルを探したりPC画面の操作に慣れることにもなり、一石二鳥にも三鳥にもなるのではないかと感じた。
カラム列数の確認
前回からの続きで、「素晴らしき仲間」ページに空白の3列のカラムが追加されているのを確認した。該当のページを編集モードで開くと、3つの「+コンテンツを追加」が横並びで表示されるので、空白の3列のカラムがあるのが分かる。
カラム内にコンテンツを追加する
メモ帳に従って、それぞれのカラムに「小見出し」「画像」「文章」のコンテンツを追加した。「画像」と「文章」は中央揃え、「画像」のサイズは最大にした。
カラムでコンテンツを追加するメリット
コンテンツが横並びで表示されるので、一種の統一感ができる。
追加した個々のコンテンツを縦列にまとめ、列単位で追加・削除ができる。すべての列をまとめてカラムコンテンツとして扱うこともできる。
カラムコンテンツの編集メニューを表示し、「上あるいは下へ移動」「複写」「削除」を試してそのまとまりを実感してもらった。
画像にリンクを貼る
各カラムに挿入した「画像」にリンクを貼った。
リンクは、同じサイト内のページなので「内部リンク」であること、リンク先のページは、▼をクリックするとページの一覧が表示されるので、その中からリンク先のページを選び、「リンクの設定」>「保存」ボタンをクリックすることで設定できる。
設定したリンクを確かめる
設定したリンクを確かめる方法として3つの方法を紹介した。
1)「プレビュー」で、画像にマウスを載せるとポインターが人の手の形に代わる。そこでクリックして目的のページへジャンプすることを確認する。
2)「プレビュー」で、画像にマウスを載せるとポインターが人の手の形に変わり、同時に画面左下にリンク先のURLが表示されるので、URLに該当のページが表示されることで確認する。
3)「編集」モードで、画像にマウスを載せると、鎖印のアイコンが表示される。鎖印のアイコンをクリックすると、該当のページへジャンプするかどうかで確認する。
以上で「素晴らしき仲間」ページの編集は完了。以降は「ごあいさつ」ページの編集となる。
「ごあいさつ」ページを開く
ナビメニューから「ごあいさつ」のページを開く。
ページの左上部にある、パンくずリストを見て、現在のページとその上(親)のページとが表示されていることを確認する。
また開いた直後に表示されるページ内容を見て、当ページには何かしらのコンテンツがあるものなのか、あるいは何もなく空白のページなのかを判断できることを確認した。
「画像付き文章」コンテンツを追加する
「大見出し」と「文章」コンテンツを追加後、「画像付き文章」コンテンツを追加した。
まず「画像付き文章」コンテンツとはどのようなものなのかを紹介し、画像と文章がセットされたコンテンツであること、画像を左側か右側に配置するかを指定できることを紹介した。画像の配置はいつでも変更できること、画像の配置に伴って文章はその逆の位置に配置されること、また文章量が画像の高さよりも多い時は、文章が画像の下に回り込むことを紹介した。
追加で試すことで、やり残したのは、画像のサイズを変更した時に、画像と文章の関係がどのようになるのかを確認するのがあった。後に時間を取って試してみたい。
「画像」に「キャプション」と「代替テキスト」を付ける
「画像」に「キャプション」と「代替テキスト」を追加することで、画像の説明となること、また読み上げソフトで画像の説明として読み上げてくれることなどを紹介した。具体的にキャプションを追加した。
「外部リンク」の設定
挿入した文章内にある「パソボラ」という文字列にリンクを貼り、パソボラのホームページへジャンプするようにした。リンク先は、作業しているサイトの外にあるページなので「外部リンク」であることを説明し、そのリンクの貼り方を以下のように紹介した。
1)ブラウザの「新しいタブ」をクリックして、タブを開く
2)開いたタブで「パソボラホームページ」を表示する
3)「パソボラホームページ」のURLをコピーする
4)タブをクリックして、編集中の Jimdo ページ「ごあいさつ」に戻る
5)文章中の「ぱそぼら」の文字列を選択する
6)鎖印の「リンク」アイコンをクリックする
7)「外部リンク…」をクリック
8)リンク先を入力するボックスに、コピーしたURLをプレーンテキストで「貼り付ける」
9)「リンクを設定」>「保存」ボタンの順にクリックする
以上で文字列「ぱそぼら」にリンクが設定された。
外部リンクの確認
設定された外部リンクを確かめる方法として、「プレビュー」表示でリンクを確認した。
まず、リンク元の文字列「ぱそぼら」の文字の色が変更されたことを確認した。
次に「ぱそぼら」をクリックすると、該当のページへジャンプすることを確認する。表示されるパソボラのページは、作業しているのとは異なる新しいタブで表示されることも確認した。外部リンクの場合は、新しいタブで表示されるのが通常の設定でもある。