【初心者】HTMLリンクの飛ばし方・飛ばない時の対処法

やる木なし男くん

俺のブログからこのURLに飛んでもらうにはどうすればいいんだ?

トリ課長

リンクを飛ばせばいいんだよ。とても簡単だよ。

HTMLの基本ルール

HTMLとは

HTMLとは、WEBページに文字や画像を表示させるための命令のようなものだ。

今見ているこの記事も、実は裏側は文字だらけなんだよ。

裏側↓

ルール

上の裏側の画像に、< >という記号がたくさん書いてあるのがわかるかね?

これをタグと言うんだ。

< >=タグ

命令を書く時には、

<命令開始のタグ>◯◯<命令終了のタグ/>

という形式にする必要がある。

【入門編】HTMLって何?初心者でも超わかりやすいHTMLの基本と書き方

HTMLでリンクを飛ばす方法

リンクを飛ばす

リンクを飛ばすには、<a href>という命令式を使うんだ。

例えばトップページへのURLを貼るなら、こうなる。

HTML

<a href="https://web-tama.net/">トップページヘ</a>

意味がわからなくても、そのままコピーして使えば問題ない。

下のソースをそのままコピーして、”URL”のところに飛び先のURLを。△△のところに飛び先のリンクを説明する言葉を入れてみてくれたまえ。

HTML

<a href="URL">△△</a>

は?href?何語?と思った君、僕も全く同感だよ。
読み方は、エイチレフというらしいよ。

これだけは覚えてもらうか、このページをお気に入り登録して、毎回コピペしてもらうしかないね。

画像にリンクを貼る

それからリンクを貼れるのは言葉だけではない。画像にも貼れるんだ。

これがソースだよ。

HTML

<a href="URL"><img src="画像のURL"></a>

<img src”>というのは、image sorce(画像の保存先)という意味で、画像を表示させる時に使う命令タグだ。(閉じタグは不要)

その外側を、<a href>というタグで囲んであげればいい。

下の卵の画像をクリックすると、トップページに飛ぶぞ。

ソースはこうなっている。太字の部分が画像のURLだ。

HTML

<a href="https://web-tama.net/"><img src="https://web-tama.net/wp-content/uploads/2018/07/tamago-300x300.png" alt="" width="300" height="300" class="aligncenter size-medium wp-image-149" /></a>

ちなみにalt=画像の名前、width=画像の幅(単位はpxだが省略可能)、height=画像の高さ、class以下は画像の配置位置など詳細を設定する意味を持つ。

これらがなくても画像は表示されるよ。

リンクを新規タブで開く

よくリンクをクリックすると勝手に新規タブが開くことがあるだろう?

それも簡単な一言を追加するだけでOKだ。

target=”_blank”

実際に使ってみるとこうなる。

HTML

<a href="リンク先のURL" target="_blank">△△</a>

簡単だろう?

うっす。やってみるっす。

やる木なし男くん

ん?飛ばないんすけど。イライラするっす。

やる木なし男くん

トリ課長

なし男くん、その気持ちはとてもよくわかるよ。例えばこんなエラーをしていないかい?

リンクが飛ばない時の原因と対処法

タグの記述ミス

HTMLは細かい文字がいっぱいだから、正しく書いたつもりでもエラーがある場合は多々あるんだよ。

例えば・・・

タグ内の「”」が抜けていないかい?

 

URLをペーストして貼りかえる時に、元のURLの後ろの”(ダブルクオテーション)まで選択して貼りかえてしまっていないかい?

◯ <a href=https://web-tama.net/></a>

✕ <a href=https://web-tama.net/></a>

タグは1字でも間違えると正しく表示されないよ。

【初心者】HTMLページ内リンクが飛ばない時の対処法

タグ内の「”」が全角になっていないかい?

 

同じくよくあるミスだが、タグ内の「”」が全角になっていないかい?

パッと見ると気づかないけれど、リンクが飛ばない時はこれも疑ってほしい。

HTML

<半角○>:<a href="https://web-tama.net/"></a>

<全角☓>:<a href="https://web-tama.net/"></a>

HTMLでは全角と半角は全く異なる存在なんだよ。

URLの一部が切れていないかい?

◯ <a href=”hhttps://web-tama.net/html/linkerror/”></a>

✕ <a href=”https://web-tama.net/linkerror/”></a>

さっきと同じで貼りかえる時のミスとしてよくあるのが、URLの一部が切れているというものだ。

丸ごとURLを貼りかえるのではなく、途中から貼りかえる時にカテゴリーの階層を抜かしてペーストしていたりしないかい?

間違えていないつもりでも、一度URLを貼り直してみてはどうかな。

閉じタグはあるかい?

◯ <div class=△△><a href=”https://web-tama.net/”><img src=”https://web-tama.net/wp-content/uploads/2018/07/toribcho3.jpg”></a></div>

✕ <div class=△△><a href=”https://web-tama.net/”><img src=”https://web-tama.net/wp-content/uploads/2018/07/toribcho3.jpg”></div>

画像にリンクを飛ばす時などは、aタグの前後の文字が長くなりがちだ。

色々いじっているうちに、という短い閉じタグがいつの間にかどこかに行っていた、ということはないかい?

google chromeの拡張ツールに、HTMLのエラーをチェックしてくれる便利なツールがあるぞ。

一度使ってみてはどうかね?

HTMLエラーチェッカーを見る

MEMO
chromeの拡張ツールとは?

google chromeに拡張ツールを追加すると、chromeの検索バーの隣にツールのアイコンが表示される。インターネットでページを表示しながらツールが使えるという便利なものだぞ。

リンクを貼れない場所にリンクを貼っていないかい?

ワードプレスの場合はほぼないが、楽天などは思わぬ場所にリンクが貼れない設定になっていることがある。

一度確認してみよう。

リンク先のページは存在しているかい?

リンクを踏むと飛ぶのは飛ぶが、404エラーが出ているという場合。

これは、そもそも飛ばし先のページが非公開になっていたり、FTPでページをアップロードしたまののエラーになっている恐れがあるぞ。

トリ課長

どうだい?リンクは飛ぶようになったかな?

「タグの記述ミスなんて当たり前にわかってんだよ、それでも飛ばねえんだよ」という方は、もっと上級の人に相談しておくれ。

課長は下級なんすか?

やる木なし男くん

トリ課長

・・・
【入門編】HTMLって何?初心者でも超わかりやすいHTMLの基本と書き方

16 Comments

Situs Judi

I will right away grab your rss as I can not in finding your email
subscription hyperlink or newsletter service. Do you’ve any?
Kindly allow me recognise so that I may subscribe.
Thanks.

返信する
Poker Online

Hello There. I discovered your blog the usage of msn. This is an extremely well written article.

I’ll be sure to bookmark it and come back to read more of
your helpful information. Thanks for the post. I’ll certainly comeback.

返信する
Susan

I think thіs iѕ ɑmong the most ѕignificant іnformation f᧐r me.

And i am glad reading youг article. Ᏼut
ѕhould remark on ѕome geneгal things, The web site style is perfect, tһе articles іѕ really nice :
Ⅾ. Good job, cheers

返信する
해외사이트

Wonderful article! That is the kind of information that
should be shared around the internet. Disgrace on Google for now not positioning this put up upper!
Come on over and visit my web site . Thanks =)

返信する
https://www.mediasjet.com

Magnificent goods from you, man. I’ve understand your stuff
previous to and you are just too fantastic. I really like what you have acquired here, certainly like what you’re stating and the way in which
you say it. You make it entertaining and you still care for to keep it wise.

I cant wait to read much more from you. This is really a great website.

返信する
무료만화

Link exchange is nothing else except it is only placing the other person’s
blog link on your page at proper place and other person will also do similar for you.

返信する
own your army of bots

obviously like your website but you need to test the spelling on quite a few of your posts.

A number of them are rife with spelling problems and I to find it very bothersome to tell the reality nevertheless I will certainly come again again.

返信する
หวย

Heya i am for the first time here. I found this board
and I to find It truly useful & it helped me out a lot.
I’m hoping to present one thing back and aid others like you aided me.

返信する
หวย

Great post. I used to be checking continuously this weblog and I am impressed!
Very useful information specifically the ultimate section 🙂 I deal with
such information a lot. I used to be looking for this certain info for a long
time. Thanks and best of luck.

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です