テキスト内に記述した<a>タグのデザイン性を高め、リンクであると視認しやすくするためにアイコンを付与してきます。WordPressに対応した簡単アレンジです。
アイコンをaタグに追加する手順
style.cssに下記コードを追記
p.inside a {
color: #006EB0;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
padding-left: 3px;
padding-right: 3px;
}
p.inside a:hover {
color: #006EB0;
text-decoration: underline;
text-underline-offset: 0.2em;
}
p.inside a::before {
content: "";
background-image: url(../icon/arrow-right.svg);
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin-right: 3px;
}段落ブロックにクラスを付与
アイコンを付与したいリンクの親要素にスタイルで定義したクラスを付与する。方法は、リンク設定後、WordPressの右パネル＞ブロック＞高度な設定の追加CSSクラスにinsideと記述する。
完成形がこちら
ポイント
下線の位置を調節するために、1のコードの15行目に、
text-underline-offset: 0.2em;
を指定している。これにより文字と線の間に距離を空けている。