THE THOR ザ・トール テキストリンクをカスタマイズ

やっぱり基本はテキストリンクだと思うのです。

THE THORのテキストリンクを少しだけカスタマイズしてみました。




THE THOR テキストリンクをカスタマイズ

the thor テキストリンクをカスタマイズ

カスタマイズは追加CSSから行います。

外観 → カスタマイズ → 追加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の余白を設定。必要無ければ削除してください。0の部分に数値を入れると上下の余白ができ下線との隙間が調節できます。

border-bottom: solid 0.3em rgba(30,115,190,0.2)太さ0.3emの下線を指定のカラーで表示。カラーはお好みで。ここではリンク文字に使用しているカラーを20%の濃さで指定。

 

実際の出来上がりはこちら↓

THE THOR のカスタマイズなど記事一覧


以上です。

カスタマイズは自己責任でお願いします。

 

もっとシンプルにアンダーラインを適用

ずーっと以前はテキストリンクにはアンダーラインが当たり前だったような気がします。最近はあまり多く見かけません。もしかしたら昔の馴染みでアンダーラインのほうがリンクとわかりやすくユーザビリティが良いとい人が一定数いるのではないでしょうか?

 

その場合は以下のコードでどうぞ。

/* 記事中のpのaにアンダーライン */
.postContents p a {
padding: 0 0.3em;
text-decoration: underline;
}

 

実際の出来上がりはこちら↓

THE THOR のカスタマイズなど記事一覧


以上です。

カスタマイズは自己責任でお願いします。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Mana
2,441円(08/23 16:47時点)
発売日: 2019/03/16
Amazonの情報を掲載しています

THE THOR リンクカラー設定 :おまけ

外観 → カスタマイズ → 基本設定[THE] → 基本スタイル設定

「投稿内テキストリンク色を設定」で変更が可能です。

設定がどこにあるのかすぐわからなくなってしまうので自分的メモ



あとがき

テキストリンクのちょっとしたカスタマイズでした。

記事中のPでAだったら全部下線がついてしまいます。思わぬ場所に下線が引かれてしまう可能性もあるのでご注意ください。もう少し何かしたいな〜と思っているので変更するときはこちらに追記をしたいと思います。

THE THOR テキストリンクをカスタマイズ
呟くのよ・・・私の棒ストが