THE THOR(ザ・トール)のマーカーの色を濃くしたい!

WordPressテーマのTHE THOR(ザ・トール)は、プラグイン不要でテキストにマーカーを引く機能が付いています。

・・・が、しかしその色合いが非常に薄いのが気になっておりました。

なんとかしてもっと濃い色に変更できないものかと試行錯誤を繰り返した結果、ある方法を用いることによって濃いマーカーを引くことが出来るようになりました。

というわけで、THE THOR(ザ・トール)のマーカー色について不満を感じていたという方は本記事を参考にしていただければと思います。

THE THOR(ザ・トール)のマーカー機能とは?

強調したいテキストにマーカーが施されているブログってよく見ますよね?

僕は強調したいテキストについては太字に黄色マーカーという文字装飾を多様しております。

これまでは「TinyMCE Advanced」というプラグインを導入してマーカーを引いていたのですが、THE THOR(ザ・トール)ではこのマーカー機能がデフォルトで付いているんです。

使い方は至って簡単!

ビジュアルエディタ上の「スタイル」→「マーカー」と進むと定番の「太イエローマーカー」の他に、大・中・小の大きさ、さらに色は6色から選んでマーカーを引くことが出来るのです。

実際に太マーカーを引いてみたらこんな感じです。

レッド

ブルー

イエロー

ピンク

グリーン

グレー

あれれ、なんか色が薄くね?

まあ、これで問題ないという人も多いとは思うのですが、僕的には「もっと濃ゆ~くしたい!」という思いから情報を求めてネット上を徘徊していたら同じような不満を抱えてマーカー色のカスタマイズをしている方のブログにたどり着くことが出来ました。

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

おいしいものばっかり食べて幸せ | グレアスログ

「ザ・トール」を購入したのは、ブログを書くにあたってどんなテーマを入れようかと考 […]…

というわけでこちらの記事を参考に僕もカスタマイズに挑戦!

「style.min.css」を書き換えて実際にマーカーを引いてみたら色を濃くすることに成功しました。

これで問題解決!・・・と思いきや、カスタマイズ後に自分のブログを見ていたら一部文字化けしている箇所を発見!

「ん~、なんだこれは・・・?」

THE THOR(ザ・トール)で表示の不具合が起こる原因は大体がプラグインによるものですので、まずは全てのプラグインを停止してキャッシュを削除した後に再度ブログを確認します。

「・・・直っとらん・・・。」

文字化けの原因がプラグインではないとすると思いつくのは、「style.min.css」に施したカスタマイズのみです。

というわけで「style.min.css」をデフォルトに戻してみたら見事に文字化けは解消いたしました。

ん~、やっぱり素人がむやみにコードをいじったりするのは良くないですね。

というわけで別の方法を模索した結果、ある手段を使って濃いマーカーを引くことに成功いたしましたので次項でご紹介いたします。

THE THOR(ザ・トール)で濃いマーカーを引く方法

THE THOR(ザ・トール)で濃いマーカーを引くためにはあるプラグインを使います。

もちろん「TinyMCE Advanced」ではありませんよ。

僕が導入したのは「AddQuickTag」というプラグインです。

そもそも手っ取り早くテキストにマーカーを引くためにはテキストエディタで以下のように記述してやればよいわけです。

<span style="background-color: #ffff00;">マーカーを引きたいテキスト</span>

とはいえ毎回コードを入力するのは面倒ですので、AddQuickTagであらかじめタグを登録しておけばビジュアルエディタからでも簡単にマーカーを引くことが可能となるわけですよ。

AddQuickTagの設定画面で上図のように入力、ボタン名は「黄色マーカー」として「変更を保存」します。

投稿画面上部に「Quicktags」というセレクトボックスが追加されていますので選択すると登録したボタンが出てきます。

マーカーを引きたいテキストを選択してボタンをクリックすると・・・、見事にマーカーが引かれます!

あとがき

今回の件でパソコン素人の僕は「あまり安易にファイルをいじるもんじゃないな・・・」と反省しております。

まあ、THE THOR(ザ・トール)は僕のようなパソコン音痴でも簡単にデザインをカスタマイズ出来る機能が最初から豊富に備わっているので問題はないんですけどね。

ちょっとした装飾であればHTMLの記述で対応出来ますので、頻繁につかうタグであればAddQuickTagに登録しておけば記事編集が捗りますね!