カラーユニバーサルデザインに配慮しています

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

読了時間: 約5

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

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

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

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

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

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

ラインマーカー4色
変更前
ラインマーカー4色
変更後

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

蛍光ペンの場所
ここをチェック!
  • スタイル
  • 文字のスタイル
  • 各「蛍光ペン」を選択

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

クラシックモードの選択
ここをチェック!
  • 「ブロックエディタ」を選択
  • フォーマット
  • クラシック

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

コードの追加方法

css編集
追加CSS
手順
  1. 外観をクリック
  2. CSS編集をクリック
  3. 貼り付け
  4. 公開ボタンをクリックで完了

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

注意
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%,#F44336 30%);
}


以上です。

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

ここをチェック!
  • #FEFDA8 :黄色
  • #C4EDBE :緑色
  • #E0EDFD :青色
  • #FADAD9 :赤色

このように指定します。
ラインマーカー4色
変更前
ラインマーカー4色
変更後

MEMO
太さの調整ですが、「transparent」の%(パーセント)の値の合計が100%になるよう値を調整してください。

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

「例」70% ➡️80%(細くなる)

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

参考サイト
12436288584_94d6bc46d2_b.jpg
メインカラーには「500番」の色を使うことが推奨されています。この500という数字は「色の明るさ」を表すものです…続きを読む
12436288584_94d6bc46d2_b.jpg
The Material Design color system can help you create a color theme that reflects your brand or style.

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

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

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

「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%,#F44336 30%);
font-weight: bold;
}

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

Gutenberg(グーテンベルク)で使用するには?

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

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

サルワカサイト

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

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

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

3つの選択肢
  1. プラグインを使う
  2. クラシックの選択
  3. カスタムHTMLを使う

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

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

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

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

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

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

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

クラシックを選択

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

カスタム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」が登場してから約半年が過ぎました。今ではすっかり馴染み、元のクラシックモードには戻れません。

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

あわせて読みたい

SANGOカスタマイズ編アイキャッチ画像【WordPress】テーマ「SANGO」をカスタマイズしてみました(11箇所)アイキャッチ画像SANGOで「Gutenberg」を約2週間使って感じたメリット・デメリット