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

Cocoon
広告

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

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

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

広告

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

  1. CSSでCLASS指定でスタイルを設定する
  2. WPプラグイン「AddQuicktag」で簡単に装飾できるようにする

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

CSSでCLASS指定でスタイルを設定する

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

CSSなどを編集・カスタマイズするときは子テーマを使うといいですよ!
CSSの任意の場所にコードを追加します。
当ブログの場合は以下のようなものです。
/*蛍光ペン風下線*/
.marker-green {
background: linear-gradient(transparent 60%, #98fb98 50%);
}

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

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

WPプラグイン「AddQuicktag」で簡単に装飾できるようにする

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

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

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

AddQuicktag

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

どうしてもこの色が使いたい!というときに試す価値あり!

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

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

Cocoon
広告
広告
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
フォローしてブログ更新情報を見逃すな!
広告
小夏日和

コメント

タイトルとURLをコピーしました