【WordPress】Cocoonに緑色蛍光ペン風文字装飾を導入しました【AddQuicktag】

こんにちは、小夏(@572nacchan)です！

痒いところどころか痒くないところまで手が届くWordPressテーマ「Cocoon」なのですが、個人的にどうしても緑色のアンダーラインマーカーが使いたい！

ということで蛍光ペン風の文字装飾を導入したので、やり方をご紹介します！

WordPressで蛍光ペン風文字装飾を導入する手順

わからなかったらコピペでOK!

WPのダッシュボードから「外観」→「テーマエディター」へ進み、「style.css」を編集します。

CSSなどを編集・カスタマイズするときは子テーマを使うといいですよ！

CSSの任意の場所にコードを追加します。
当ブログの場合は以下のようなものです。

/*蛍光ペン風下線*/
.marker-green {
background: linear-gradient(transparent 60%, #98fb98 50%);
}

transparentでマーカーの太さ(%の数値が大きいほど細くなる)とカラーコードで色を指定します。カラーコードの後ろの%は透過度です。

これによってCLASS属性へスタイルを指定することができます。
~~詳しくは調べてみてね。~~

とはいえいちいち<span class=”marker-green”>〇〇</span>なんて入力するのは面倒なのでWPプラグインの「AddQuicktag」を利用します。

WPのダッシュボードから「プラグイン」→「新規追加」で「AddQuicktag」を追加・有効化します。

「設定」→「AddQuicktag」で以下の画像のように設定すればOK!

あとは投稿画面で蛍光ペンを引きたい文字を指定してQuicktagsのプルダウンメニューから「マーカー緑」を選択すれば引けます！簡単！

「Cocoon」は余計なカスタマイズ不要で初心者にも優しいWPテーマなんですが、ちょっと物足りないところはこうして簡単に弄れるのもいいですよね！

皆さんもぜひ参考にしてオリジナリティ溢れるブログ作りをしていきましょう！