3月4日の勉強会

画像付き文章の移動

前回「ごあいさつ」ページに見出しと画像つき文章を入れたのだが、別のページにこれらを入れた方があり、本来のページにこれらコンテンツを移動した。

コンテンツ移動の操作状況はプロジェクターに表示して全員で視聴した。

 

外部リンク先の変更

これも前回の作業だったが、「ほどがやパソボラ」の従来からのURLを使ってしまった。4月から新しいURLとなることから、新しいURLで外部リンクをつけ直しした。

 

画像付き文章の画像サイズを変更してみる

画像つき文章で挿入される画像のサイズは、ページ幅の半分のサイズに調整して表示されるようだ。

挿入後は、ページ幅一杯にしてみたり、小さくしてみたりでき、適当なサイズを選べるようになっている。オリジナル画像のサイズがページ幅に満たないときは、最大オリジナル画像の幅で表示される。

 

ページ内リンクの図解

縦長のページで、スクロールしながら該当箇所にたどり着くのではなく、目次のようなもの用意しておいてその目次をクリックすると直ちに該当の箇所に飛んで表示されるようにするのがページ内リンクであるとの説明を白板にて紹介した。

 

リンクコードの説明

リンク元の文字列にセットするHTMLコードを説明した。

 

<a href="○✕▼◉☐△&%$!">リンク元文字列</a>

「リンク元文字列」をクリックすると、「○✕▼◉☐△&%$!」へジャンプするという方式

 

「○✕▼◉☐△&%$!」は、「リンク先のページ名/」プラス「リンク先のセレクターID」となる。

リンク先はページ名とそのページ内のセレクターとの合成である。

 

ページ内リンクの作成とテスト

ページ内リンクを設定するには、

1)リンク元で、リンク先ページを内部リンクで設定する

2)リンク先のセレクタIDを「開発者ツール」で表示し、コピーする

  1. プレビューモードでリンク先を右クリック
  2. 「検証」をクリック
  3. リンク先のコードから、リンク先を囲むボックスを含むソースコードへ移動する
  4. 移動したソースコード上で右クリックし、「Copy」➡「Copy Selector」をクリックする

3)編集モードで、リンク元をHTMLコードで編集する

  1. リンク元を「HTMLで編集する」を開く
  2. リンク元にアンカータグで記述されている「リンク先ページ/」の直後にコピーしたセレクターを結合する。「リンク先ページ/」は、リンク先ページのコード情報があり、最後の文字は「/(スラッシュ)」となっている。従って、「/」文字と次の情報区切り文字「"(ダブルクォーテーション)」との間に、コピーしたセレクター情報を追加する。操作としては、「/」と「"」の間にマウスカーソルを入れクリックし、「プレーンテキストで貼りつける」を行う。
  3. 「OK」をクリックしてHTMLコード編集を閉じる

4)プレビューモードで、編集したページ内リンクを試す。

 

「トップへ戻る」ボタンを表示する

ページ内リンクであっちこっちへジャンプするので、ページの最上端へ簡単に戻る「トップへ戻る」ボタンを表示することにした。