テイコクザッシ

学生×フリー動画編集者のゆるゆる人生攻略

zeno-tealの蛍光マーカーを打ち消す方法

zeno-tealのカスタマイズ

 

こんにちは、デザイン沼はまりかけの生ハム帝国です。

テイコクザッシでは人気無料テーマ「zeno-teal」を使用させていただいているのですが、少しだけ気に入らないところがあります。(製作者さんすみません。いつもありがとうございます!)

zeno-tealでの蛍光マーカー表示

 

それは「太字」がこのように蛍光マーカーの黄色に変換されてしまうことです。

たしかに蛍光マーカーは文字を目立たせるのに有効だとは思うんですけど、この薄暗い黄色は好きではありません。

何より、太字機能は単体で欲しいじゃないですか。僕としては蛍光マーカーと太字の両方を使い分けられたらそれがベスト。

「斜め」は使わないからそっちを蛍光マーカーにするのもありですね。そういや「斜め」文字を使ってるブログってあんまり見たことないかも。

 

なぜこういう仕様になっているかというと、zeno-tealの大元テーマのCSSにこのような記述があるからです。

zeno-tealのCSS

多分これだと思うんですけど間違ってたらすまん。コードの全容はこちらからどうぞ。

ちなみに太字が黄色マーカーに変換されるのは一番上の行のコードが該当しています。試しにカラーコードを調べてみると、同じ色でした。

二行目と三行目は<strong class="teal">や<strong class="pink">という風に直接HTMLに書き足すことでマーカーが出る仕様みたいですね。これは普段の使い方では出てこないので今回は消しません。

 

てかこれ、見たまま編集だとかなりめんどくさい仕様ですね。

私は普段見たまま編集で執筆しているのですが、テーマの制作者ははてな記法を想定しているようなのではてな記法での執筆をオススメします。

この大元のコードを直接消せたら楽なのですがそうもいきません。

自作テーマを作る手順でzeno-tealのコードをコピペしていらないところだけ消すこともできそうですが、それはちょっとめんどくさい。

 

なので今回は要らないコードをデザインCSS内で上書きして打ち消してみましょう。

CSS

まずはデザイン→カスタマイズ設定→デザインCSSでこのコードを貼り付けてください。

/*蛍光マーカー打ち消し*/
.entry-content strong{background: initial;}

 

後から見るときのために分かりやすく説明文を入れていますが、気に入らなければ消してもらっても大丈夫です。

 

コードを貼り付けるとこうなります。↓

f:id:nhamuteikoku:20180909233441p:plain

ちゃんと蛍光マーカーが消えて太字になってますね~。皆さんのも消えましたか?

めでたしめでたし。

人気テーマなのに調べても同じことしてる記事が出てこなかったのが不思議でした。

太字って最近の人はもう使わないのでしょうか。

 

おまけ:マーカーの色だけ変える

蛍光マーカーの色だけを変えたいという方はこちらのコードを先ほどと同じ手順で貼り付けてください。

 .entry-content strong{
background: linear-gradient(transparent 60%,#764ba2 0%);}

このコードでは紫色を設定していますが、色の部分を自分で別の物に書き変えたらそのまま適用されるようになっています。なので各自好きな色コードを打ち込んでみてください。

マーカーの高さに関してはtransparentの後にある数字をいじると変わります。

 

LITE版の方がいいかも

私は元からzeno-tealに入ってた要素を消して上書きしてっていう作業を繰り返し、かなり手を加えたのですが、この作業はぶっちゃけめんどくさいです。

私みたいにこだりがある人はzeno-tealのレイアウト要素だけを残したLITE版に変えた方がいいかもしれないですね。

zeno-teal.hatenablog.com

計量版ZENO-LITEははzeno-teal無印版に入っていた色の設定や見出しの装飾などを一切なくしたものです。レイアウトや配置はそのまま。

あとからカスタマイズすることを前提に作られているので初心者が使うものではありません。

 

ちなみに、コードは上書きすればするほど無駄に読み込みが発生してしまいます。どれくらい遅くなってしまうかは分かりませんが読み込みは早いに越したことはないでしょう。

ページの表示速度を気にする方やオリジナリティを持たせたい方なんかはLITE版を使った方が後々楽になりそうですね。