テキストにリンクを貼るリンクの指定方法にもいろいろある。
今日はテキストリンクのHTMLの記載方法をメモ。
テキストリンクのHTMLの記載例
<a target="_blank" title="このブログの記事一覧を開きます" href="https://wordpress.0hs.org/kijiitiran/">wordpress初心者の覚書</a>
target="_"
リンク先のウィンドウやタブの表示の仕方を設定する。
よく使うのは【target="_blank"】と【target="_self"】の２つ。
省略も可能。
target="_"を省略した場合
省略した場合は基本的に現在表示されているウィンドウやタブと同じウィンドウ（タブ）でリンク先を開く。
target="_blank"
別ウィンドウまたは別のタブでリンク先を開く。
＊target="_blank" の指定は、ユーザーの環境によってはポップアップブロックが機能してしまう場合があるそう。
target="_self"
リンク先を現在のフレーム（ウィンドウ）に表示する。
テキストリンクの応用
スタイルシートをHTMLの中に書き込んだ場合（インライン）
例1）
<a title="このブログの記事一覧を開きます" href="https://wordpress.0hs.org/kijiitiran/" target="_blank"><font color="#ff0000"><em>wordpress初心者の覚書</em></font></a>
↓
例2）
<a style="font-style: oblique; font-weight: bold; color: red; text-decoration: none;" title="このブログの記事一覧を開きます" href="https://wordpress.0hs.org/kijiitiran/" target="_blank">wordpress初心者の覚書</a>
↓
例3）
<a title="このブログの記事一覧を開きます" href="https://wordpress.0hs.org/kijiitiran/" target="_blank"><span style="FONT-WEIGHT: bold; COLOR: red; FONT-STYLE: oblique; TEXT-DECORATION: none">wordpress初心者の覚書</span></a>
↓
例2と例3を外部スタイルシートにした場合
＊仮にclassをlink1とします。
例2）
<a class= "link1" title="このブログの記事一覧を開きます" href="https://wordpress.0hs.org/kijiitiran/" target="_blank">wordpress初心者の覚書</a>
例3)
<a title="このブログの記事一覧を開きます" href="https://wordpress.0hs.org/kijiitiran/" target="_blank"><span class="link1">wordpress初心者の覚書</span></a>
【スタイルシートの記載】
.link1{FONT-WEIGHT: bold; COLOR: red; FONT-STYLE: oblique; TEXT-DECORATION: none;}
コメント