簡単HTML!テキストにリンクを貼る「a href」を覚えよう。新しいウィンドウでも開けます。

シェアされると喜びます♪

  • このエントリーをはてなブックマークに追加
  • 0

リンクタグの「a href」(エーエイチレフ)は、よく使うhtmlタグです。ブログを書いていて見かけたことありませんか?

これは、どういうときに使うのかというと、テキストにリンクを貼るときに使います。

とは言っても、実際に記事を書くときは、ほとんどのブログサービスで、リンクを貼るボタンが用意してありますので、手で入力をすることは無いかもしれません。

HTMLやCSSの超初心者が、初心者目線でまとめておきたいと思います。

スポンサーリンク
簡単デイズ336

アンカーテキストとは。

アンカーテキストとは、リンクを設定したテキストのことです。こういうやつです。

おすすめブログ!簡単デイズはこちらから!!

SEOを考える上で、アンカーテキストはとても重要です。ですが、説明するのは難しいので省きます。「アンカーテキスト SEO」でググると、たくさん情報が出てきますよ。

リンクタグの「a href」を覚えると、アンカーテキストのイメージをつかむのが簡単です。覚えるのは2つのパターンでいいと思います。リンクをクリックして、そのまま画面が移動するパターンと、新しいウィンドウが開くパターンです。

2つのパターンを覚えよう。

画面が移動するパターン。

テキストをクリックすると、そのまま画面が移動するパターンは下記のようになります。

<a href="URL">アンカーテキスト</a>

URLとアンカーテキストのところを変更して使いましょう。

URLのところは、リンク先のURLを入力します。アンカーテキストのところは、表示したいテキストを入力します。テキストの部分は好きな文字でもいいですし、URLでも構いません。

例として下の行に、<a href=”https://kantandays.com/”>簡単デイズのトップに戻ります</a>と入力してみます。

簡単デイズのトップに戻ります

このリンクをクリックすると、トップページに戻ります。トップに戻った人は、また、この記事に戻ってきて下さいね。

新しいウィンドウを開くパターン。

テキストをクリックすると、そのまま画面が移動するパターンは下記のようになります。

<a href="URL" target="_blank">アンカーテキスト</a>

URLとアンカーテキストのところを変更して使いましょう。

移動するパターンのときと違うところは「 target=”_blank”」の部分です。これが、新しいウィンドウを開くという意味になります。「target」の前に半角スペースが入ってるのがポイントですよ。

例として下の行に、<a href=”https://kantandays.com/” target=”_blank”>簡単デイズのトップが開きます</a>と入力してみます。

簡単デイズのトップが開きます

このリンクをクリックすると、トップページが新しいウィンドウで開きます。必要ないので閉じちゃって下さい。

Simplicityのブログカードはこちらがおすすめ。

このブログのテーマはSimplicityです。URLを入力するだけでカード化される、ブログカードの機能が付いています。

ブログカードにするには、2つの方法があります。URLだけを入力する場合と、ここで紹介したアンカーテキストを使う場合です。

見た目はどちらも同じです。簡単デイズを2つのパターンで紹介してみます。

1.https://kantandays.com/

毎日の生活を簡単にするお役立ち情報や豆知識をお届けします。

2.<a href=”https://kantandays.com/”>https://kantandays.com/</a>

毎日の生活を簡単にするお役立ち情報や豆知識をお届けします。

作者のわいひらさんのおすすめは2番です。なぜなら、他のテーマを使ったり、仕様が変わったり、ブログカードの機能をオフにしても、きちんとリンクとして生きるからです。

 参考  Simplicityのブログカードの使い方と注意点

私のブログでは混在してますね。いずれ全てを2番に変更したいと思っています。

まとめ

今、新しいブログを2つ立ち上げています。初心に戻って勉強することが多くて、すごく新鮮な気持ちになりますね。

特に、Simplicityじゃないテーマで立ち上げてるブログは、試行錯誤を繰り返しながら、形にしていってます。

これも新たな発見があって、面白いんですよ。Simplicityがいかに初心者のために作られているかが分かります。カスタマイズから何でもできる無料のテーマってすごいことですよ。

カスタマイズのところから、色んな設定ができないテーマを使うなら、HTMLとCSSの知識が全く無いと困りますね。

そんなわけで、HTMLの超初心者ではありますが、改めて基本中の基本をまとめてみました。