「WordPress」テーマ『SANGO』蛍光ペン風のアンダーラインをカスタマイズしてみました

おしゃれで多機能な「SANGO」。多くのブロガーに支持されているテーマです。そしてカスタマイズすればさらに魅力的になります。

今回蛍光ペン風のアンダーラインを少しカスタマイズしてみました。アンダーラインを多用する方にとって役に立つ（かもしれない）記事を書いてみました。

蛍光ペン風のアンダーラインをカスタマイズ

「SANGO」で毎度おなじみのアンダーラインですが、ラインの太さと色が少しぼやけて見えるのが気になります。（私だけ？）

おそらくパステルカラーだと思いますが…（赤緑色弱なので自信なし笑）

これを少しだけ変えてみます。

蛍光ペンの場所はおそらくご存知だと思いますが…「クラシックエディタ」なら

後述しますが、もちろん「Gutenberg」でも使えます。

出来ることなら中の人に「ブロックエディタ」で「クラシック」を使わなくて良いように対応していただけると助かります。^^;

コードの追加方法

「追加CSS」に次のようにコードを追加してください。

/* 蛍光ペンを細く色も少し変える */
.keiko_yellow {
    background: linear-gradient(transparent 70%,#FFEB3B 30%);
}

.keiko_green {
    background: linear-gradient(transparent 70%,#4CAF50 30%);
}

.keiko_blue {
    background: linear-gradient(transparent 70%,#2196F3 30%);
}

.keiko_red {
    background: linear-gradient(transparent 70%,#E57373 30%);
}

もし色は元のままで太さだけ変えたい場合は、

『％』の数値が大きいほどマーカーは細くなります。

「例」70% ➡️80%（細くなる）

色の調整はサルワかさんのホームページを参考にしました。

マテリアルデザインでの「色」の使い方とガイドラインの要点

メインカラーには「500番」の色を使うことが推奨されています。この500という数字は「色の明るさ」を表すものです…続きを読む

The color system – Material Design

The Material Design color system can help you create a color theme that reflects your brand or style.

メインカラーには「500番」の色を使うことが推奨されています。この500という数字は「色の明るさ」を表すものです。100だと明るい色、900だと暗い色となります。500はやや明るめですね。マテリアルデザインには明るめの大胆な色づかいがよく合うのです。

引用：マテリアルデザインでの「色」の使い方とガイドラインの要点

というわけで、色は500番（赤だけ300番）で選択しています。お好きな色で調整していただけたらと思います。

「SANGO」以外のテーマで使うには？

「SANGO」以外のテーマでも蛍光ペン風のアンダーラインを使いたい

こちらの記事を参考にしてください

【WordPress】テーマ「スワロー」をカスタマイズしてみた（ラインマーカー他）

蛍光ペンを引いた箇所を自動的に太くする

蛍光ペンを引くと同時に、太字にしたい方もいるでしょう。追加のコードを入れることで、蛍光ペンを引いた箇所が自動的に太字になります。

下のコードを追加します。

font-weight: bold;

/* 蛍光ペンを細く色も少し変える */
.keiko_yellow {
background: linear-gradient(transparent 70%,#FFEB3B 30%);
font-weight: bold;
}

.keiko_green {
background: linear-gradient(transparent 70%,#4CAF50 30%);
font-weight: bold;
}

.keiko_blue {
background: linear-gradient(transparent 70%,#2196F3 30%);
font-weight: bold;
}

.keiko_red {
background: linear-gradient(transparent 70%,#E57373 30%);
font-weight: bold;
}

ラインマーカーで緑色を引きました
ラインマーカーで青色を引きました
ラインマーカーで黄色を引きました
ラインマーカーで赤色を引きました

Gutenberg（グーテンベルク）で使用するには？

現状「SANGO」では未対応です。しかし「蛍光ペン」に関しては…

ここに関わるregisterFormatTypeのWordPressの公式APIリファレンスがまだ出てない。実装はできるが後から変えたくないので一旦保留。

サルワカサイト

公式アナウンスではこう述べているので、今しばらくの辛抱かな…と　

開発ロードマップはこちら

グーテンベルクで蛍光ペンを使う方法は、現状選択肢として３つですね。

❶についてはこういうプラグインがあります。

Add RichText Toolbar Button – WordPress プラグイン | WordPress.org

設定のページではテーマの style.css が自動で読み込まれるので、プレビューで確認しながら設定することができます。…続きを読む

私は極力プラグインを使いたくないので、興味のある方はどうぞ。

て言うか、プラグインを使うぐらいなら最初からクラシックモードで良いのではないかと…（笑）

まぁそういう訳にも行かないか？グーテンベルク１本で記事を書くなら、今の所インストールも止む終えないでしょうね。

❷先程も書きましたが、クラシックを選択装飾します。その後通常のブロックに変換します。（少し面倒ですが）

「Gutenberg」で文字装飾をするなら、現状これが最適でしょうね。

❸カスタムHTMLを使います。蛍光ペンを引きたい箇所の前後を例えば赤色で引きたい場合、

単語登録をして、装飾したい文字をはさめばOKです。

拡大します。

<span class="keiko_red">★</span>
<span class="keiko_blue">★</span>
<span class="keiko_green">★</span>
<span class="keiko_yellow">★</span>

私は現在この方法を取り入れてます。どうしても無理な時は❷の方法で。（蛍光ペン以外の装飾が必要な時）

ある程度使うものが決まっている場合、有名なプラグイン（AddQuicktags）も単語登録やスニペットで代用出来ます。

プラグインは一つでも減らすようにしましょう。もし何かトラブルが起きても、原因を究明しやすいです。プラグイン同士の干渉も避けることが出来ます。

WordPressでテーマに関係なく最低限必要なプラグインは7個です

まとめ

蛍光ペンに限らず「SANGO」の文字装飾が1日も早く「Gutenberg」に対応するようになれば良いですね。

「Gutenberg」が登場してから約半年が過ぎました。今ではすっかり馴染み、元のクラシックモードには戻れません。

以上、お読みいただきありがとうございました。

【WordPress】テーマ「SANGO」をカスタマイズしてみました

SANGOで「Gutenberg」を約2週間使って感じたメリット・デメリット

にほんブログ村に登録しています