チュートリアル6 サイトファイルを用意する 画像タグ編

画像タグについてのチュートリアルです。画像タグはリンクタグと全く同じ方法で行います。

1) 早速、画像タグを削除/追加してみましょう。まず、画像タグを探します。画像タグは
<img src="○○">
となります。私の方では1件見つかりました。テンプレートによっては画像がなかったり、CSSファイルで画像を呼び出したりしていることがあるので、こちらのタグがない場合があります。

2) 画像タグはリンクタグと同じ、いらなければ削除して構いません。削除する場合は
<img src="○○">
ごと消します。

3) 画像を追加する場合は、<img src="○○">の○○の中に画像がある場所を入力します。方法はリンクタグのときと全く同じです。あなたのサイト外にある画像はhttp://から始まるURLアドレスを入力します。
<img src="http://google.com/image/test.jpg">
ですが、こちらの方法は『画像外部呼び出し』や『直リンク』と呼ばれており、一般的には迷惑行為とされています。使用時はかならず、画像の持ち主に直リンクが可能か確認してから行なってください。

4) あなたのサイト内の画像を表示する場合。こちらもリンクタグと全く一緒です。http://は必要ありません。表示したい画像を好きなフォルダの中に入れ、その場所を○○の中に入力します。例として、samplebannerという画像を入れたフォルダと画像を表示したいページが同じ1層にある場合、
<img src="img/samplebanner.gif">
となります。このとき、.gifなどの拡張子に気をつけてください。画像の拡張子は一般的に.gif、.jpg、.pngです。拡張子がわからないときは、ダウンロードした画像の上で右クリック>プロパティで、ファイルの種類と表示されている箇所にて確認できます。

チュートリアル6 サイトファイルを用意する ページ内リンク編

同じページ内でのリンク方法についてのチュートリアルです。長いページなどで、閲覧者が簡単にページのトップや項目に跳ぶために使用します。

1) まず最初に、ページ内リンクがよくわからない方はこちらをクリックしてください。上のステップ3番まで跳ばされるはずです。これは今クリックしたリンクタグ
<a href="#test">こちら</a>
と跳ばされた先にセットしてある
<span id="test"></span>
のペアーでできあがっています。当サイトのテンプレートにも、ページ内リンクは予め、メッセージが表示されています。

2)このペアーは互いに、『href="#』と『id="』以降の綴りが同一ならば動きます。もう2つ例をあげます。
例1:
<a href="#shiori">こちら</a>
<span id="shiori"></span>

例2:
<a href="#mail">こちら</a>
<span id="mail"></span>
閲覧者がクリックする方には綴りの前にかならず、『#』をつけてください。また、『こちら』はその状況にあった言葉や文章を入れてください。これで、ページ内リンクのチュートリアルは終了です。

PREV BACK NEXT
inserted by FC2 system