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の余白を設定。必要無ければ削除してください。０の部分に数値を入れると上下の余白ができ下線との隙間が調節できます。
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;
}
実際の出来上がりはこちら↓
以上です。
カスタマイズは自己責任でお願いします。
[wpap service=”with” type=”detail” id=”4797398892″ title=”1冊ですべて身につくHTML & CSSとWebデザイン入門講座”]
THE THOR リンクカラー設定 ：おまけ
外観 → カスタマイズ → 基本設定[THE] → 基本スタイル設定
「投稿内テキストリンク色を設定」で変更が可能です。
設定がどこにあるのかすぐわからなくなってしまうので自分的メモ
あとがき
テキストリンクのちょっとしたカスタマイズでした。
記事中のPでAだったら全部下線がついてしまいます。思わぬ場所に下線が引かれてしまう可能性もあるのでご注意ください。もう少し何かしたいな〜と思っているので変更するときはこちらに追記をしたいと思います。
この記事が気に入ったら
フォローしてね！
ブログテーマ選びについて
この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。
- THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る - THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る - 自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト
コメント
コメント一覧 （2件）
[…] ぜひ、一度視野を広げて「OEM・ODM」にも注目してみてくださいね。 […]
[…] からあげ棒、ありったけ THE THOR ザ・トール テキストリンクをカスタマイズ […]