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

WordPressテーマのTHE THOR(ザ・トール)では、リンクは多彩なリンクボタンを使用することが多いのですが、単純に記事内にリンクテキストを挿入したい場合もありますよね。

その際に困るのがTHE THOR(ザ・トール)ではリンクテキストについては文字色の変化のみなのです。

僕のように昔ながらのネット使いからしてみれば、リンクテキストは色は青、さらに下線(アンダーライン)と相場が決まっているものと思っているのでなんとなく違和感を感じてしまいます。

THE THOR(ザ・トール)でリンクテキストを昔ながらの青色+下線(アンダーライン)とする方法はないものかと調べてみたら意外と簡単に設定することが出来たのでそのやり方をご紹介しておきます。

まずはリンクテキストの文字色を変更

まずはリンクテキストの色についてですが、これについては管理画面の「外観」→「カスタマイズ」→「基本設定【THE】」→「基本スタイル設定」→「投稿内テキストリンク色を指定」で青色に変更することが出来ます。

実際に変更した文字色がこれ → リンクテキスト

うん、昔ながらのリンクテキストという感じですね。

とはいえ、これだけでは物足りない。

そう、下線(アンダーライン)がないのです。

というわけで次はリンクテキストに下線(アンダーライン)を引く方法です。

リンクテキストに下線(アンダーライン)を引く

WordPressで文字装飾を施す場合に鉄板とも言える方法は「TinyMCE Advanced」というプラグインを利用する方法ですよね。

このプラグインを導入すれば文字列に下線(アンダーライン)を引くなんてことはお茶の子さいさいなわけです。

・・・が、しかしTHE THOR(ザ・トール)では「TinyMCE Advanced」は相性悪しということで導入については非推奨となっております。

必ずしも不具合が起きるというわけではないようですが、公式にアナウンスされている非推奨プラグインをわざわざ入れるわけにもいかないので他の方法を模索してみました。

情報を求めてネット上を徘徊していると、僕と同様に昔ながらの青色+下線(アンダーライン)のリンクテキストへのカスタマイズをTHE THOR(ザ・トール)で施している方のブログを見つけちゃいました!

カスタマイズの手順は以下の通りとなります。

「外観」→「カスタマイズ」→「追加CSS」と進み、以下のコードを記述します。

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

というわけで完成したリンクテキストがこちら → リンクテキスト

エディタ上では下線(アンダーライン)はないのですがプレビューで記事を確認するとしっかり下線(アンダーライン)が入っています!

参考にさせていただいた記事はこちら ↓

からあげ棒、ありったけ

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

しかし、このカスタマイズが適用されるのは投稿ページのみなのです。

固定ページのリンクテキストも同様にしたい場合にはどうしたら良いのか・・・。

というわけでいまのところ固定ページのリンクテキストについては、テキストエディタで直接、HTMLコードを記述して下線(アンダーライン)を引く方法をとっています。

記述するコードはこちら ↓

<span style="text-decoration: underline;">下線を引きたい文字</span>

うん、とりあえず満足。

固定ページのテキストについてももっと簡単に下線(アンダーライン)を引くやり方を知っている方がいらっしゃいましたらご教示願えますと幸いでございます!

あとがき

プラグイン(ほぼ)不要、CSS知識なしでもデザインカスタマイズを容易に施すことができるTHE THOR(ザ・トール)ですが、僕のように素人のくせに機能外のデザインカスタマイズを欲する者については諸先輩方のブログ記事というのはホントに役に立ちます。

関連した記事が容易に見つかるということはそれだけTHE THOR(ザ・トール)のユーザーが多いということでもあるとは思うのですが、これもWordPressテーマを選択する際のひとつの要素と言えますよね。

無料、有料に関わらず使用するテーマに関連した記事が豊富なものを選んだほうが何か困ったことが生じた際に解決策を容易く見つけることができちゃうのが人気テーマの強みと言えますからね。

そういう意味でもTHE THOR(ザ・トール)はおすすめのWordPressテーマですね。