やっぱり基本はテキストリンクだと思うのです。
THE THORのテキストリンクを少しだけカスタマイズしてみました。
THE THOR テキストリンクをカスタマイズ
カスタマイズは追加CSSから行います。
追加する内容は「記事中の段落文字でリンク文字」を対象にしています。
固定ページには適用されませんので注意。
追加するコードは以下の通り
/* 記事中のpのaにボーダーライン */
.postContents p a {
padding: 0 0.3em;
border-bottom: solid 0.3em rgba(30,115,190,0.2);
}
.postContents p a記事中の段落文字のリンクを指定
padding:0 0.3emリンクの左右に0.3emの余白を設定。必要無ければ削除してください。０の部分に数値を入れると上下の余白ができ下線との隙間が調節できます。
border-bottom: solid 0.3em rgba(30,115,190,0.2)太さ0.3emの下線を指定のカラーで表示。カラーはお好みで。ここではリンク文字に使用しているカラーを20％の濃さで指定。
実際の出来上がりはこちら↓
以上です。
カスタマイズは自己責任でお願いします。
もっとシンプルにアンダーラインを適用
ずーっと以前はテキストリンクにはアンダーラインが当たり前だったような気がします。最近はあまり多く見かけません。もしかしたら昔の馴染みでアンダーラインのほうがリンクとわかりやすくユーザビリティが良いとい人が一定数いるのではないでしょうか？
その場合は以下のコードでどうぞ。
/* 記事中のpのaにアンダーライン */
.postContents p a {
padding: 0 0.3em;
text-decoration: underline;
}
実際の出来上がりはこちら↓
以上です。
カスタマイズは自己責任でお願いします。
THE THOR リンクカラー設定 ：おまけ
「投稿内テキストリンク色を設定」で変更が可能です。
設定がどこにあるのかすぐわからなくなってしまうので自分的メモ
あとがき
テキストリンクのちょっとしたカスタマイズでした。
記事中のPでAだったら全部下線がついてしまいます。思わぬ場所に下線が引かれてしまう可能性もあるのでご注意ください。もう少し何かしたいな〜と思っているので変更するときはこちらに追記をしたいと思います。
