リンクタグの「a href」（エーエイチレフ）は、よく使うhtmlタグです。ブログを書いていて見かけたことありませんか？
これは、どういうときに使うのかというと、テキストにリンクを貼るときに使います。
とは言っても、実際に記事を書くときは、ほとんどのブログサービスで、リンクを貼るボタンが用意してありますので、手で入力をすることは無いかもしれません。
HTMLやCSSの超初心者が、初心者目線でまとめておきたいと思います。
アンカーテキストとは。
アンカーテキストとは、リンクを設定したテキストのことです。こういうやつです。
SEOを考える上で、アンカーテキストはとても重要です。ですが、説明するのは難しいので省きます。「アンカーテキスト SEO」でググると、たくさん情報が出てきますよ。
リンクタグの「a href」を覚えると、アンカーテキストのイメージをつかむのが簡単です。覚えるのは２つのパターンでいいと思います。リンクをクリックして、そのまま画面が移動するパターンと、新しいウィンドウが開くパターンです。
２つのパターンを覚えよう。
画面が移動するパターン。
テキストをクリックすると、そのまま画面が移動するパターンは下記のようになります。
<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を入力するだけでカード化される、ブログカードの機能が付いています。
ブログカードにするには、２つの方法があります。URLだけを入力する場合と、ここで紹介したアンカーテキストを使う場合です。
見た目はどちらも同じです。簡単デイズを２つのパターンで紹介してみます。
１．https://kantandays.com/
２．<a href=”https://kantandays.com/”>https://kantandays.com/</a>
作者のわいひらさんのおすすめは２番です。なぜなら、他のテーマを使ったり、仕様が変わったり、ブログカードの機能をオフにしても、きちんとリンクとして生きるからです。
私のブログでは混在してますね。いずれ全てを２番に変更したいと思っています。
まとめ
今、新しいブログを２つ立ち上げています。初心に戻って勉強することが多くて、すごく新鮮な気持ちになりますね。
特に、Simplicityじゃないテーマで立ち上げてるブログは、試行錯誤を繰り返しながら、形にしていってます。
これも新たな発見があって、面白いんですよ。Simplicityがいかに初心者のために作られているかが分かります。カスタマイズから何でもできる無料のテーマってすごいことですよ。
カスタマイズのところから、色んな設定ができないテーマを使うなら、HTMLとCSSの知識が全く無いと困りますね。
そんなわけで、HTMLの超初心者ではありますが、改めて基本中の基本をまとめてみました。