賢威8のマーカーのカスタマイズ方法|中級者向けカスタマイズ
賢威8 には、下記のようにテキストに蛍光ペン風のマーカーを引けるショートコードが実装されています。

マーカーを引く

賢威8のショートコードについては、下記の記事もご参照ください。

今回は、このマーカーの見た目をカスタマイズする方法を解説します。
どれもコピペで簡単にできるので、気になった方はぜひ試してみてください。

賢威8をカスタマイズするときの注意点

賢威8をカスタマイズする時は、必ず子テーマを使いましょう。

親テーマをカスタマイズしても、テーマをバージョンアップすると、カスタマイズした内容が全て消えてしまいます。

しかし、子テーマを使えば、テーマをバージョンアップしてもカスタマイズした内容がそのまま保持されるので、安心してサイトをカスタマイズすることができます。

賢威8の子テーマの使い方

カスタマイズしたい箇所のコードを、子テーマの「base.css」に追加しましょう。

カスタマイズしたい箇所のコードを、子テーマの「base.css」に追加

カスタマイズしたい箇所のコードを、子テーマの「base.css」に追加

マーカーのCSSを確認する

まず、デフォルトのマーカー用のCSSを確認しておきましょう。
下記が、マーカー用のCSSになります。

上記のコードをカスタマイズしたものを子テーマの「base.css」に追加していきます。

賢威8のマーカーのカスタマイズ一覧

マーカーの太さを変える

デフォルトで実装されているマーカーはテキストの半分程の太さで着色されます。
この太さを変更します。

青色のマーカーを例に解説します。
下記の〇〇の部分に任意の数値を入力し、子テーマの「base.css」に追加します。

例えばデフォルトの50%よりも大きな数値にすると、マーカーは細くなり、

細いマーカー

50%よりも小さな数値にすると、マーカーは太くなります。

太いマーカー

マーカーの色を変える

青色のマーカーを例に解説します。
下記の△△の部分に任意のカラーコードを入力し、子テーマの「base.css」に追加します。

例えばオレンジのカラーコード(#fbb03b)を入力すると、

下記のように、マーカーの色がオレンジになります。

オレンジのマーカー

文字の色を変える

青色のマーカーを例に解説します。
下記の□□の部分に任意のカラーコードを入力し、子テーマの「base.css」に追加します。

例えば赤のカラーコード(#c1272d)を入力すると、

下記のように、文字の色が赤になります。

赤文字の青マーカー

まとめ

今回は、賢威8のマーカーのカスタマイズ方法を解説しました。

細かい部分にはなりますが、マーカーをカスタマイズして少しでも他の賢威ユーザーのサイトとの違いを見せたいという方は、ぜひ試してみてください。

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事