感染しない・広げないために|新型コロナウイルスまとめ情報サイトへ

リンクの末尾にアイコンを自動追加する|WordPress・Cocoon

WordPressリンクの末尾にアイコンWordPress

ここではWordPressブログで、記事内リンクの末尾リンクマークのアイコン自動で追加する手順をご紹介します。

リンクマークのアイコンはコレです ⇒ 

リンクマークのアイコン

ちょっと正式名称が解りませんが、四角と矢印が合体したようなアイコンで、サイトでリンクの末尾にくっついているのを良く見かけますが、設定をすればできるようになります。

 

Cocoon:リンクアイコンを表示する方法

リンクアイコン

 

Cocoonテーマには、リンクアイコンを追加する機能が標準装備されています。

 

WordPress管理画面(ダッシュボード)の、「Cocoon設定」⇒「本文」タブをクリック。

Cocoon設定の本文

 

②「外部リンク設定」のカテゴリで「アイコンの表示」にチェックを入れ、「アイコンフォント」の種類から好きなアイコンにチェックを入れます。

※「内部リンク設定」のカテゴリでも同様な設定ができます。

 

③「変更をまとめて保存」をクリック。

変更をまとめて保存

 

 

Cocoonはこれだけで設定が完了し、ブログ記事の外部(内部)リンクの右側にリンクアイコンが追加されます。

とても簡単です。

 

WordPress:リンクアイコン追加機能が無いテーマでの設定

パソコンと悩む女性

 

★リンクアイコンを追加できる機能が装備されていないテーマを使用している場合の設定方法もご紹介します。

Cocoonテーマでの手順になっていますが、自分のテーマ設定に置き換えて進めてみて下さい。

 

WordPress:head内にコードを追加する

パソコンの設定

 

FontAwesome.comのフォントをブログで有効にする設定を行います。

 

WordPress管理画面(ダッシュボード)で「Cocoon設定」⇒「アクセス解析・認証」の設定画面を表示して下さい。

cocoon設定のアクセス解析

 

②「その他アクセス解析・認証コード設定」のカテゴリーで、「ヘッド用コード」のタグ貼り付け用スペース内に下記のコードをコピペして下さい。

※既に他のコードがある場合は、その下に少し間を空けて貼り付けて下さい。

 

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

 

ヘッド用コードにコピペ

 

③「変更をまとめて保存」をクリックして下さい。(一番上か下の方にあります)

 

 

WordPress:リンク末尾にアイコンを自動追加するCSS

パソコンで作業

★続いて、 FontAwesomeのアイコンをリンクの末尾に自動追加する設定を行います。

 

WordPress管理画面(ダッシュボード)⇒「外観」⇒「テーマエディター」で、「Cocoon Child: スタイルシート (style.css)」内に、下記の追加CSSコードをコピペして追加して下さい。

 

/*Font Awesome*/
/*リンクの最後にアイコン自動追加(blank用)*/
.entry-content a[target="_blank"]:after {
font-family: 'Font Awesome 5 Free';
content: '\f35d';
font-size: 0.9em;
margin: 0px 3px;
font-weight: 900;
}
/*リンクの最後にアイコン自動追加(new用)*/
.entry-content a[target="_new"]:after {
font-family: 'Font Awesome 5 Free';
content: '\f35d';
font-size: 0.9em;
margin: 0px 3px;
font-weight: 900;
}

 

外観のテーマエディター

 

②下にある「ファイルを更新」をクリックして下さい。「ファイルの編集に成功しました」と表示されます。

ファイルを更新

 

設定が完了したら、ブログ記事のリンクの末尾自動でアイコンが追加されます。

リンクテキスト ←このように追加されます

過去の記事に記載されているリンクにも適用されますので確認してみて下さい。

 

 

WordPress:アイコンを付けたくないリンクがある場合は

パソコン前で悩む男性

アイコンを付けたくないリンクがある場合は、追加CSSコードの【blank用】の部分だけを追加し、記事内のリンクをHTML表示で【target=”_blank”】の【blank】を【new】に書き換えます。

HTMLとして編集
HTMLとして編集

 

具体的には、

WordPress管理画面(ダッシュボード)⇒「外観」⇒「テーマエディター」で、「Cocoon Child: スタイルシート (style.css)」内に、下記の追加CSSコードをコピペ

/*Font Awesome*/
/*リンクの最後にアイコン自動追加(blank用)*/
.entry-content a[target="_blank"]:after {
font-family: 'Font Awesome 5 Free';
content: '\f35d';
font-size: 0.9em;
margin: 0px 3px;
font-weight: 900;
}

 

②リンクのHTMLが【 target=”_blank” 】になっているモノだけに自動追加が適用されるので、各記事の編集画面で、アイコンを付けたくないリンクはHTML表示にして【blank】を【new】に書き換える。

 

【変更例】
<a rel=”●●●●” href=”https://●●●” target=”_blank“>●●●</a>

 

↓↓↓

<a rel=”●●●●” href=”https://●●●” target=”_new“>●●●</a>

 

これで、【new】属性のリンクはアイコンの自動追加から除外されます。

 

まとめ:リンクアイコン追加でユーザーにも解りやすくなる

今回は、WordPressブログで、記事のリンクの末尾リンクマークのアイコン自動で追加する手順をご紹介しました。

リンクアイコンが末尾に付いていると、リンクであることが解りやすくなって、ユーザビリティも向上します。

ブログのレベルアップに活用してみてください。

>>>その他の【WordPress】記事はコチラ

コメント