CSSを使って、サイトの内部リンクだけデザインを変更する2つの方法

CSSを使って、サイトの内部リンクだけデザインを変更する2つの方法

テキストリンクを貼る時に内部リンク(サイト内のページへのリンク)と外部リンク(他のサイトへのリンク)の2種類があると思いますが、どちらも同じ見た目だとどっちがどっちなのか分かりづらいですよね。

このブログでは外部リンクには右端にマークが出るようになっていますが、違いというのはそれぐらい。できれば内部リンクをはっきりと目立たせたいなと思ってました。

というわけで今回このブログでもCSSを使って実装してみたので、その方法を紹介したいと思いますー。

今回2種類の書き方を紹介するので、それぞれ実装できる方を選んで試してみてください。

スポンサーリンク

外部リンクのみ新規タブで開くようにしている場合

まずこのブログのように、外部リンクのみ新規タブ(ウィンドウ)で開くようなリンク設定をしている場合です。このルールを利用してCSSを書きたいと思います。

新規タブで開く場合はaタグに「target=”_blank”」と入力されているので、この記述がないaタグが内部リンクということになります。

ちなみに同じタブで開く時はtarget=”_self”という書き方になりますが、デフォルトが_selfになるため記述が省略されていることも多いです。このブログでもtarget=”_self”の記述は省略しています。

否定擬似クラス「:not」を使う

上記をふまえて、ひとまず「target=”_blank”じゃないaタグ」という指定がCSSで書ければ実装できますね。

その時に役立つのが否定擬似クラスの「:not」というものです。これを使うと指定したものが除外されて設定できるんです、便利・・・!

targetが_blankじゃないaタグは:notクラスを使うとこんな記述になります。

a:not([target="_blank"])

aのあとに[] のブラケット・角括弧を使うと、そのタグの属性を指定することができます。この場合はaタグのtargetが_blankだったら、という設定ですね。

これに:not()をつけることで、targetが_blankじゃない時という設定になります。

サンプルで:notを使ったCSSを実装してみる

実際にどんな風になるのか、内部リンクと外部リンクのaタグを作ってサンプルを作ってみました。

See the Pen 内部リンクにだけCSSを設定 by tatsuya nakafuji (@handywebdesign) on CodePen.

内部リンクと外部リンク(こちらはtarget=”_blank”記述あり)を作って、:notクラスを使ってCSSでデザインを設定してみました。こうすると実際に内部リンクにだけデザインが変更されているのがわかると思います。

この方法は外部リンクが新規タブで開く設定をしている場合なので、もうひとつの別の方法もご紹介します。

内部・外部リンクともに同じタブ設定の場合

外部リンクも新規タブで開く設定はしてないよ?そういう時は実装できないの?という方のために、もうひとつの方法もご紹介します。たしかに内部リンクも外部リンクも同じ設定だと:not()では区別できないですね。

この場合:notを使っても振り分けができなくなるので、その時はリンク先のURLで判断するとわかりやすいです。

属性セレクタを使って振り分けする

リンク先のドメインで振り分けるためには、属性セレクタを使います。

内部リンクはそのサイトのドメインから始まっているはずなので「(特定のドメイン名)からリンク先が始まっていたら内部リンク」だと判断することができますよね。

例えばこのブログの場合はドメイン(URL)はhttp://handywebdesign.netなので、属性セレクタを使うとこのような書き方ができます。

a[href^="http://handywebdesign.net"]

=(イコール)の前に^(カレット)をつけると「指定した値から始まる」という指定ができます。なのでこの書き方をすると、指定したドメインから始まるリンクのみCSSを適用するという指定ができるんですね。

属性セレクタってよくワカラナイ( ;∀;)という方はこちらの記事を参考にしてみてください!

CSSの属性セレクタを使い分ければ、特定の要素にスタイルが適用できる

サンプルで属性セレクタを使ったCSSを実装してみる

同様に属性セレクタでドメイン指定をしたサンプルを作ってみました。

See the Pen 属性セレクタを使った内部リンクのデザイン変更 by tatsuya nakafuji (@handywebdesign) on CodePen.

内部リンクの指定ドメインから始まるリンクだけが、CSSが反映されていると思います。こんな風に条件付けを工夫すると、特定の要素にだけデザインを変更することができます。

今回お伝えした内容は逆に考えると、外部リンクだけデザイン変更というのも同様にできますね。CSSの条件づけがちゃんとできれば、枠をつけたり背景をつけてみたり、あとはCSSで好きなデザインを記述するだけです。

まとめ

というわけで、2種類の方法で内部リンクのデザイン変更の仕方を紹介しました。

ちなみにこのブログでは、ブログの記事内の内部リンクにだけ適用させるために

.entry-content a[href^="ドメイン名"]

という風に記事が表示されるエリアの親要素のクラス名もつけて限定しています。

内部リンクはサイトの回遊率(どれだけサイト内のページを見たか)につながるので、できれば目立たせたい方も多いと思うので、もし役に立ったら嬉しいです。

実装するサイトの仕様に応じて使い分けていただければと思います。それではー!

スポンサーリンク

SNS・feed登録はこちら

コメントを残す

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