「リンク」と「画像」をマスターするための もくじ



○「リンク」が使えるようになるとweb作成が楽しくなる


 
  リンクの基本形は思いのほか単純だった
 
  別ウインドを開く「target="_blank"」は知らないと損
 
  長いページでこそ生きてくる「ページ内リンク」

○「画像」がわかると華やかなページが作れるようになる


 
  まずは画像の設置場所について ひとこと大事なこと
 
  画像の貼り付けの基本形を押さえる
 
  画像貼り付けの基本形はシンプル
 
  画像ファイルの代わりに画像URLを入れてみる
 
  画像の貼り付けで知っておきたい命令文3つ
 
  代替テキストと呼ばれる「alt=" "」は見えないけど大事
 
  画像の枠線に「border="○"」を使う?
 
  画像の大きさを変える「width」「height」も重宝する
 
  「画像」と「リンク」のあわせ技は意外とよく使う
 
  「画像」+「リンク」のあわせ技で使い道が広がる
 
  大きな画像を別画面で表示するのも「画像」+「リンク」でOK

○目に見える部分を最後まで作り上げる


 
  別ページにリンクするサイドメニューを作ると読者にやさしい
 
  著作権表示をみんなしているけど・・
 
  かんたんなプロフィールを載せてブランディングをする

○webサイトのHTMLの入力内容を見る方法をご存知ですか?





グーペ公式サイトへのリンク



「リンク」が使えるようになるとweb作成が楽しくなる




★★ リンクの基本形は思いのほか単純だった ★★



「リンク」の基本形

<a href="リンク先のURL" >リンク先のサイト名など</a>



まずはリンクの基本形を使って、私が運営
しているwebサイトへリンクするよう設定
してみました。


ちなみに私のサイトは・・

サイトURL:http://homepagenotukurikata.com
サイト名:ホームページの作り方/初心者でも簡単!webサイト作成のコツ

です



<TeraPadの表示>
※クリックすると大きな画像が見れます
ホームページの作り方/初心者でも簡単!webサイト作成のコツへのリンクを貼り付けているHTMLの画像
矢印
<ウェブブラウザの表示>
ホームページの作り方/初心者でも簡単!webサイト作成のコツ


リンクの基本形はサイトURLサイト名
入れ替えるだけでカンタンにできあがります。

どうです?意外とカンタンでしょ?



★★ 別ウインドを開く「target="_blank"」は知らないと損 ★★



別ウインドを開く「target="_blank"」

<a href="サイトURL" target="_blank" >サイト名</a>


リンクの基本形に「target="_blank"」を書き込むと、
新しいウインドウでリンクが開きます。

最初にご紹介した「基本形」では、今ご覧になっている
ベージが、リンク先のページにそのまま変わりましたが、
「target="_blank"」では今の画面を残したまま新しい
ページを表示させることができます。

今の画面が変わってしまうと、来訪者がリンク先に行って
しまったまま、二度と返ってくることがないなんてことも
よくあります。訪問者に少しでも自サイトに戻ってきて
もらうための工夫でもあります。

そういう意味で重要なのでよく使います。
ぜひ覚えておいてください。



<TeraPadの表示>
※クリックすると大きな画像が見れます
ホームページの作り方/初心者でも簡単!webサイト作成のコツへのリンクを貼り付けているHTMLの画像
矢印
<ウェブブラウザの表示>
ホームページの作り方/初心者でも簡単!webサイト作成のコツ

実際に「基本形」と「target="_blank"」を
クリックして違いをご確認ください。

使い分けすると便利だと思いませんか?



★★ 長いページでこそ生きてくる「ページ内リンク」 ★★


ページ内リンク先を指定する

<a href="#○○○">指定する場所の名前など</a>
矢印

<a name="○○○">指定する場所の名前など</a>

上のhrefと#を使った命令で、ページ内の指定する
場所にリンクさせることができます。

指定された場所に<a name="・・・と命令文を
書いておく必要があります。

言葉で説明するのは難しいですが、長いページで
「もくじ」に使うことが多いので、実際にリンクを
使われたら「ああ、こういう使い方のことね!」と
ご理解いただけるでしょう

もくじを使った例を作りましたので、実際にクリック
してみてください↓↓


<TeraPadの表示>
内部リンクのタグを示した画像
矢印
<ウェブブラウザの表示>

<もくじ>
・見出し1
・見出し2
矢印
見出し1

 文章・・・
 文章・・・

見出し2

 文章・・・
 文章・・・





「画像」がわかると華やかなページが作れるようになる



★★ まずは画像の設置場所について ひとこと大事なこと ★★




画像ファイルはどこに保管しても
問題はないのですが、今回は下の画像の
ようにhtmlファイルと同じフォルダ内
保管して作業をします。

なぜなら、初心者の方にはフォルダの場所
を示す記述が難しくなるからです。

慣れてきたら保管場所を分けるのも
いいと思います。

興味のある方は「相対パス」と「絶対パス」
のキーワードで調べたら詳しくわかりますよ。



画像の保存場所の画像



★★ 画像の貼り付けの基本形を押さえる ★★



画像貼り付けの基本形はシンプル

<img src="画像のファイル名や画像URL">

トップページの冒頭の写真を貼り付ける
ことを例にお話します。

↓↓この写真です


本を真剣に読む外人女性の画像


なお、写真はこのページのhtmlファイルと
同じ場所に保存してあります。

画像のファイル名は「copywriting.jpg」です。


画像の保存場所の画像


画像ファイルをhtmlと同じファイルに保存
して、画像の名前を入れるだけで写真が
表示されます。

カンタンですよね。



<TeraPadの表示>

画像表示のための命令文の画像 矢印
<ウェブブラウザの表示>
本を真剣に読む外人女性の画像


写真画像は無料で手に入れることもできます
ので、実際に写真をダウンロードして試して
みてください。


参考サイト→ サイトデザインを劇的に変化させる写真素材


★★ 画像ファイルの代わりに画像URLを入れてみる ★★




さて突然ですが、画像URLとはナンでしょうか?

画像URLとは、アップロードしてある画像、言い
換えれば、ネット上で見ることのできる画像の
置き場所を示す住所のようなもので、http://~
というURLで画像の場所を表示したものです。

たいていは、アップロードしてある画像の上で
右クリックすると、下のようにURLをコピーできます。



画像URLをゲットする方法を示した画像


右クリックでgetした画像URLを貼り付けた
画像の表示は下のようになります↓↓



<TeraPadの表示>

画像表示のための命令文の画像 矢印
<ウェブブラウザの表示>

本を真剣に読む外人女性の画像


※画像のコピーは著作権の問題がありますので、
 安易に行わないようご注意ください。



★★ 画像の貼り付けで知っておきたい命令文3つ ★★




代替テキストと呼ばれる「alt=" "」は見えないけど大事

<img src="画像のファイル名や画像URL" alt="画像の説明">


altタグは代替テキストと呼ばれ、画像が表示
されない時に「画像の説明」が代わりに出てくる
というもの。

わざと画像が表示されないよう、間違ったファイル名
を入力してみました。



<TeraPadの表示>

代替テキストを表示させるための画像 矢印
<ウェブブラウザの表示>

画像URLをゲットする方法を示した画像



altタグは「代替テキスト」という意味とは別に、
「音声」としての使い方もあります。

目が不自由な方は、webサイトの文字を音声合成
で読み上げて「聞いて」います。

altタグに適切な説明が入力されていると、
とても有効です。

このほかaltタグには、画像の内容を適切に
検索エンジンに知らせる働きがあるといわれて
います。

altタグは画像が表示されている限り、画像の
説明は見えませんが、きちんと画像の説明を入れて
いるサイトは、上位検索のためにもプラスに作用します。

画像の説明の部分になにも入れない
「alt=" " (ブランク)」でも、重大な
問題になることはありませが、可能な限り
適切な内容を入力するほうが良さそうです。

altタグについてまとめた記事も作っています
ぜひ読んでみてください。


  → Googleが伝える、適切な「alt属性の入力」のススメ



画像の枠線に「border="○"」を使う?

<img src="画像のファイル名や画像URL" border="○">

※"○"には枠線の太さを表す数字が入ります


枠線なしの画像に「border=" "」を入れると
枠線が表示されるということですが・・

ただし、border属性はhtml非推奨属性の為
表示できないものも多くあるようです。

ですから、画像処理ソフトなどで枠線をつけて
おくのが良さそうです。

参考サイト→ 画像の加工を覚えると、サイト作成の幅がグンと広がります



画像の大きさを変える「width」「height」も重宝する

<img src="画像URLなど" width="○○" height="○○">

※"○○"には画像の大きさを表す数字が入ります

「width」は、画像の横の長さを、
「height」は画像の縦の長さを指定
する命令です

下の例では横の長さを750pxから550pxに
変えています


<TeraPadの表示>

※クリックすると別画面に元々の750pxの画像が表示されます
画像の長さを変える命令文の画像




★★ 「画像」と「リンク」のあわせ技は意外とよく使う ★★



「画像」+「リンク」のあわせ技で使い道が広がる

<a href="リンク先URL"><img src="画像URLなど"></a>

画像をクリックしたら別のサイトに
飛んでいく仕掛けは意外とよく使います。

「ボタン画像」をご存知ですか?

「今すぐここをクリック!」というメッセージ
がボタンの上に書いてあるボタンが代表例です。



<TeraPadの表示>

※クリックすると大きな画像が見れます
画像をクリックするとリンクする命令文の画像
矢印
<ウェブブラウザの表示>

本気でHTMLを身につけたい方は、今すぐ下のボタンを
クリックして公式サイトを確認してください

          ↓↓↓

 

※このボタンを押すと「自分で更新できる最短ホームページテンプレート」という
 商品の販売公式ページに本気で飛んでいきますのでご注意ください!!
 (この商品のおかげで私がHTMLをマスターできた いい商品ですが・・)



大きな画像を別画面で表示するのも「画像」+「リンク」でOK

<a href="画像のファイル名や画像URL"><img src="画像のファイル名や画像URL"></a>

先ほどから多用してますので、お気づき
の方もいらっしゃると思いますが、

大きな画像を別画面で表示するのも、
「画像」+「リンク」の応用です。


<TeraPadの表示>

※クリックすると別画面に元々の大きな画像が表示されます
画像の長さを変える命令文の画像



目に見える部分を最後まで作り上げる



★★ 別ページにリンクするサイドメニューは読者にやさしい ★★




<TeraPadの表示>

※クリックすると大きな画像が見れます
サイドメニューの画像
矢印
<ウェブブラウザの表示>

サイドメニューの画像


<div id="sub">より下がサイドメニューの
部分ですが、他ページへのリンクは、
「リンク」+「リスト」で作られています。

気をつけていただきたいのが、htmlファイルの
保管場所です。

リンクに「index.html」や「picture.html」が
ファイル名だけ記載してあります。

これは下の画像のように、同一フォルダにすべての
htmlファイルが入っている場合にできる記載です。


サイドメニューの画像


同一フォルダにすべてのhtmlファイルが入って
いない場合は該当ページのURLなどが入ります。



★★ 著作権表示をみんなしているけど・・ ★★



よくホームページの下に、このような表記が
あるのを見かけます。

「Copyright 2015 ~ All rights reserved」

これは、ホームページの著作権を主張する表記です。

ちなみに、著作権表示には次の3要素を入れます。



著作権表示の書式
万国著作権条約に基づく著作権表示には、次の3つの表示が必要である。
○ ©の記号 (symbol c)、「Copyright」
○ 著作権者の氏名 (name of the copyright proprietor)
○ 最初の発行の年 (the year of first publication)

※Wikipediaより抜粋


ただ、驚いたことに・・

現在は、ほぼ全ての法域で著作物を作れば著作権が
発生するので、一切の著作権表示なしで著作権は
保護されてます

だから、記載しなくても大丈夫なのです。

心配な人はWikipediaで調べてみてください


 →著作権表示(Wikipediaにリンクしてます)


でも、みんな書いてるし、書いたほうが安心だし
それらしく見えるから・・と私のように思う人は
記載してもいいと思います

記載方法はテンプレートのHTMLの一番最後の部分に
ある、黒い字のところを書き換えるだけです。

なお半角で「&copy;」とHTMLに記載すると、
丸にCの著作権マークが表示されます



フッターの著作権をHTMLで表示した場合の例示の画像




★★ かんたんなプロフィールを載せてブランディングをする ★★




サイドメニューの下の部分にプロフィールを記載
しました。
出来上がりはこんな感じ


サイドメニューにプロフィールを掲載した画像


画像は160px×160pxの正方形のものを使用してます。

ここではサイドメニューの幅が180pxなので、180pxの
正方形でも良かったかもしれません。

あとは「別ページにリンクするサイドメニュー」の
下の部分に入力するだけです
(今まで書いてきた入力内容だけで対応できます)


サイドメニューにプロフィールを掲載するHTMLの記載場所を表示した画像


パソコンの中で作業するだけなら、見える部分を
修正すれば以上で作業終了でしょう。

ひとつひとつの作業を自分なりにアレンジして
ゆくと、きっと満足のいくサイトが作れるはずです。

最後に1つだけ、HTMLを勉強してwebサイトを作ろう
としている方に、他の先輩サイトがどのような
HTMLを組んでいるのか参考にできるよう、便利な
知識をお伝えします。ぜひ使ってみてください。



webサイトのHTMLの入力内容を見る方法をご存知ですか?




いろいろなサイトのHTMLソース(記載内容)を知りたい
という方も多いはず。

どのwebサイトでも簡単に確認できますので、一度
ためしてみてください。

ウェブサイトが開いている状態で「右クリック」して
「ページのソースを表示」をクリックするだけです。


右クリックしてページのソースを表示させる画像

矢印
右クリックしてページのソースを表示させた画像



以上で無料テンプレートを使ったHTMLの作業は
終わりますが、目に見えない部分の作業で実は
重要な「タイトルの変更」や「サイト説明文作成」
(説明文のことをメタディスクリプションといいます)
などの作業を残しています。


作ったwebサイトを公開するとなると
レンタルサーバーの契約をしたり、ドメインを
取得したりしなくてはなりません。

検索エンジンの順位をあげて、多くの人に見て
もらえるようにSEO対策という、検索エンジン向け
にwebサイトを構成する作業にも気を遣わなくては
なりません。

小難しく書きましたが、これもひとつひとつ
調べながらやっていくうちに、わかってきます。
途中で投げ出さない限り大丈夫ですよ。



楽しそうに綱渡りをしている画像

「挑戦することは 楽しいかも」



私はHTMLの習得が難しくて挫折してしまった経験が
ありますが、ソフトを使ってサイト作成に取組み
サイトを作っているうちにHTMLができるようになりました。

自分の経験から、サイト作成はソフトを使って
効率的にやったほうが結果的に早道だと考えています

※私のサイト作成を始めた頃の経験は↓↓こちらに記載してます。

 →  サイト作成をはじめた理由は「副業で稼いでみたい!」


ですから、ここまで無料テンプレートでのHTMLを
ご説明してきましたが、本当のおすすめはソフトを
使ったwebサイト作成です。

本気でサイト公開して、いろいろな人に記事を見て
もらおうとお考えなら、記事作成に集中できたほうが
いいと考えているからです。

ですから、簡単で圧倒的に記事作成に集中できる
「ホームページ作成ソフトの利用」を真剣に検討
してみてください。

ソフトを考えてみる方は、今すぐこちら↓↓で確認!!

 →  ホームページ作成ソフトを決める!簡単で便利なソフトはありますか?



もし、どうしてもHTML習得からきちんと学びたいなら、
「自分で更新できる最短ホームページテンプレート」の
ようなテンプレートを使うのがいいと思います。

 ※レビューページを作りました

  → 自分で更新できる最短ホームページテンプレート 特典付きレビュー


最近は「モバイルフレンドリー」といって、スマホ
などに対応したwebサイトが良いとされる傾向が
ありますので、そういうものにもきちんとした対応
を求められます。

「自分で更新できる最短ホームページテンプレート」なら
モバイルにも対応可能です。

私の記事を参考にしてみてください

 → あなたのサイトは「モバイルフレンドリー」ですか?


これからサイトを公開して、もう1つ上のステージで
やってみたいとお考えの方は、ぜひ私のサイトを
参考にしてみてください。きっと役に立ちますよ。

 トップページです
  → ホームページの作り方/初心者でも簡単!webサイト作成のコツ

 ここから検討してもいいかも
  → ホームページ作成ソフト購入までにしておきたい「4つの準備」





グーペの公式サイトへのリンク


Category

管理人deep


管理人deep

管理人の「deep」です。
よろしくおねがいします。

3児の父、現役サラリーマン アフィリエイーターです。

今から4年前、HTMLによるサイト作成に多くの時間を投入しましたが、あえなく挫折。

2年後に再びホームページ作成に取組み、今では毎日600人もの人が集まるサイトを作ることができました。

この経験を生かして、これからホームページを作ろうとお考えの人たちに、できれば最短距離でサイト公開して欲しいと考えています。

運営サイトの「ホームページの作り方」では、サイト作成のポイントやコツをわかりやすくご説明してますので、きっと「稼ぐホームページ」が作れるようになりますよ

ページのトップへ戻る