カスタマイズ(外観)23項目-外部リンク

Luxeritas カスタマイズ(外観)の項目はデザイン的な内容が多いのですが、魅力的にするために工夫を凝らす事とは別に見た目の変更から閲覧者にその意味を表示するための意味的な外観表示の工夫も含まれます。後ろに外部リンクだとアイコンを付けたりここでできます。さらに装飾とは別になりますが、外部リンクには別窓(target=”_blank”)でリンクURLを開く設定もここでできます。

もちろん装飾的に色とかアイコンもここで設定できます。外部リンクだと閲覧者に明示的に示すためには内部リンクと外部リンクと別にclass属性で種別を分けて、後でcssで編集すると簡単です。ただリンクを付ける度に外部リンクと内部リンクかclass属性で分けていくのもかなり面倒なので、一般的にはプラグインで行うようですがLuxeritasには標準でそれが可能になっています。プラグインで表示が重くならないようになっているということです。便利で助かります。

Luxeritasカスタマイズ外観外部リンクメニュー

スポンサーリンク

外部リンク

記事の外部リンクにclass=”external”を付ける

Luxeritasカスタマイズ外観外部リンクにclass属性付けるにチェック画像
外部リンクにclass属性をつけ種別として”external”と付けることでcss編集で内部リンクと外部リンクを明示的に分けて表現できたり、外部リンクだけに閲覧者に本サイト外へのリンクだと表したりする事が可能になります。
cssで独自外部リンクへカスタマイズを加える場合はチェックします。

Luxeritas以外のテーマに詳しいわけではありませんけど、外部リンクにclass属性を付けてcssで閲覧者に外部リンク表示だと示すためclass属性挿入プラグインを探して設定する必要があったりするそうです。カスタマイズメニューが多すぎてLuxeritas利用者でも気づかずにプラグインでclass=”external”を挿入されている方もいるかもしれません。

記事の外部リンクにアイコン付ける

Luxeritas記事の外部リンクにアイコンを付けるにチェック画像
本サイト外へのリンクだと言うことを一目瞭然に表すために外部リンクのみアイコンをつけられます。リンクの右端に外部リンクだというアイコンをつけ、それとわかるようにすることが出来ます。

ここで寄り道になります。
・「記事の外部リンクにclass=”external”を付ける」にチェックしなくても「記事の外部リンクにアイコン付ける」にチェックすればアイコンを付けることができるのか?
・「外部リンクにアイコンを付ける」設定にした場合、内部リンクにもアイコンは付いてしまわないのか?
Luxeritas外部リンクにclass属性を付けないで外部リンクにアイコン付ける設定した画像
そこで、「記事の外部リンクにclass=”external”を付ける」のチェックを外してみたところ、外部リンクのGoogleへのリンクは「外部リンクにアイコンを付ける」にチェックさえあればgoogleの文字の後ろにアイコンが付きました。
新たに外部リンクの「google」の下に「内部リンク」という文字を挿入し、「内部リンク」にこのサイト内の別のページにリンクを付けてみました。内部リンクにはアイコンは付きません。外部リンクに独自に装飾したりcssで扱う必要が無くて、Luxeritasで用意されているアイコン付けてアイコンの色を変更だけなら「記事の外部リンクにclass=”external”を付ける」にチェックは必要無いようです。
外部リンクの後ろに付けるアイコンは内部リンクには付かないので内部リンクが多くてサイト内移動をあちこちで促しているサイトなので「アイコンだらけのページなるのでは?」という心配はありません。外部リンクだけにアイコンは限定されています。

外部リンクアイコンのタイプ

fa-external-link

Luxeritas外部リンクアイコンタイプfa-external-linkを選択
「記事の外部リンクにアイコン付ける」でアイコンが外部リンクの後ろに付けられますが、アイコンは2種類の中から選べます。まず標準ではfa-external-linkが選択されます。
アイコンが外部へ飛び出て行く感じでリンクが表されています。

fa-external-link-square

Luxeritas外部リンクアイコンタイプfa-external-link-squareを選択
白抜きの矢印が外部にリンクが飛ぶのを表しています。

外部リンクアイコンの色

ここでさらに外部リンクアイコンの色を自由に変更できます。

luxeritas外部アイコンの色クリックする画像
カラーピッカーを開くために「色を選択」部分をクリックします。

luxertas外部リンクアイコンをカラーピッカーで赤に変更する画像
カラーピッカーを開いてデフォルトは白黒になっているのでピッカーの下に並ぶ中から赤を選んでみると、外部リンクアイコンも赤色になりました。

記事の外部リンクに target=”_blank” 付ける

内部リンクは特には設定を施さず同じウィンドウで表示させたいけれど、外部リンクについては別ウィンドウで開く設定にしたい場合は外部リンク編集ごとにtarget=”_blank”設定してしても良いのですが、ここで設定してしまえば自動的に全ての外部リンクにはtarget=”_blank”を付けることができます。

記事の外部リンクに rel=”nofollow” 付ける

※ 非推奨 (記事で紹介しているリンクに nofollow 付けるのはマナー違反です)
上の注意書きがあるように通常はリンクにnofollow付けるのは相手のリンク先に何のメリットも与えたくないという理由ですので、通常はこの設定はしないのですが、悪質サイトであるとか悪い例としてだけ外部リンクを貼るという場合ですとか特別な理由がある場合に使い道があるのかもしれません。