- 外部リンクには自動で「target=”_blank” rel=”noopener”」を付けたい
- 外部リンクには自動でそれっぽいアイコンを付けたい
- PDFへのリンクに自動で書類アイコンを付けたい
等々自動化したい項目がありますが、全部をすっきりさせる方法はなかなか、、、
ので、お手軽さを最優先に再度検討。
※アイコンのプロパティはなんでもよいのですが、本記事ではダッシュアイコンを使っています。有効化の方法はこっちの記事で。
CSS例
外部リンクに自動でアイコンを付与
a[target*="_blank"]:after {
font-family: dashicons;
content: "\f504";
padding-left: 0.25em;
}「target=”_blank” rel=”noopener”」は手動で、アイコンは自動、という線で。
ワードプレスなら「リンクを新しいタブで開く」をチェックするだけだし。
PDFへのリンクに自動でアイコンを付ける
a[href$=".pdf"]:after {
font-family: dashicons;
content: "\f546";
padding-left: 0.25em;
}「target=”_blank”」にすることが多いと思います。
ので、「外部リンクに自動でアイコンを付与」のCSSより後に書いて上書きされるようにしてください。
拡大画像へのリンクなら「.pdf」を「.jpg」「.png」等に変えてルーペアイコンでもいいか。
調整
a[target*="_blank"], a[href$=".pdf"] {
text-decoration: none;
display: inline-flex;
}
a[target*="_blank"]:hover, a[href$=".pdf"]:hover {
text-decoration: none;
}- アイコンに下線が出ちゃうとみっともないので下線はナシで
- 上下位置が気持ち悪い感じになるのでinline-flex
装飾削除
画像に外部リンクをかけると余計なアイコンが付いちゃう。
あるいは、なんにも装飾したくないケースもあると思います。
そういうケースは手動で。
.link-decoration-none a {
text-decoration: none;
}
.link-decoration-none a:after {
content: none;
}ビジュアルエディターの「スタイル」に登録しときます。
また、構文を判断して自動でアイコンが付くので、ナビゲーション、ヘッダー、フッターなどに要らぬ装飾が付くことも。
#contentとか、.site-mainとかに限定した方がいいかもしれません。
が、これが結構面倒くさい。
#page > *:not( #main ) a[target*="_blank"]:after, #page > *:not( #main ) a[href$=".pdf"]:after {
content: none;
}テンプレートによって書き方が全然違うはず。
:notを使わず、headerでの否定、footerでの否定等、直接否定した方が簡単かもしれません。
電話
PCでは電話をかけないように。
電話アイコンを足してもいいけど、サイトによってデザインが変わるので割愛。
<?php if( wp_is_mobile() ){
}else{ ?>
a[href^="tel:"] {
pointer-events: none;
}
<?php } ?>条件分岐が必要なので、header.phpに直書き。
クラス「.is-mobile」「.not-mobile」等を出しているなら、
.not-mobile a[href^="tel:"] {
pointer-events: none;
}表示例
- 外部リンク、手動で「target=”_blank”」
ググる - 外部リンク、手動で「target=”_blank”」「class=”link-decoration-none”」
- PDFへのリンク
PDF - 電話リンク
電話：03-0000-0000
Java ScriptやPHPでもっとスマートにできると思うけど、「どうしても」という部分じゃないのでこれで妥協。
