テキストを蛍光マーカー風にするCSSとプラグイン「AddQuicktag」に設定する方法

WordPressでテキストを蛍光マーカー風にするCSSの設定方法と、プラグイン「AddQuicktag」に設定する方法をご紹介します。
今回はstrongタグには設定せず、クラス名で指定しています。黄色マーカーはよく見かけますがサイトの色に合わせて使用できるように6色見本を用意しました。

まずはCSSの蛍光ペンマーカーを設定

マーカー線の太さ

黄色(イエロー)蛍光マーカー[太]

.marker_yellow_all {
background: linear-gradient(transparent 0%, #ffff66 0%);
}

黄色(イエロー)蛍光マーカー[細]

.marker_yellow_half {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

マーカーの色

桃色(ピンク)蛍光マーカー[細]

.marker_pink {
background: linear-gradient(transparent 60%, #ffccdd 60%);
}

黄緑色(エメラルドグリーン)蛍光マーカー[細]

.marker_emerald {
background: linear-gradient(transparent 60%, #ccffcc 60%);
}

水色(ライトブルー)蛍光マーカー[細]

.marker_lightblue {
background: linear-gradient(transparent 60%, #cceeff 60%);
}

橙色(オレンジ)蛍光マーカー[細]

.marker_orange {
background: linear-gradient(transparent 60%, #ffee99 60%);
}

紫色(パープル)蛍光マーカー[細]

.marker_purple {
background: linear-gradient(transparent 60%, #eeccee 60%);
}

linear-gradientの要素で前者の数字が蛍光ペンが始まる位置、後者がその色の透明度です。色を変えたい場合は#の値を好きな色にしてください。

CSSの設定方法

WordPressの管理画面から「外観」→「テーマ編集」に進みます。
スタイルシート (style.css)の編集画面で上記の使用したいCSSをコピー&ペーストしてください。
※親テーマ・子テーマの記述に注意。

/*桃色マーカー細*/
.marker_pink {
background: linear-gradient(transparent 60%, #ffccdd 60%);
}

こんな感じです。色が分かりやすいように「/*桃色マーカー細*/」と表記しています。

htmlの表記の仕方

<span class="marker_pink">ピンクの蛍光ペン</span>

これでテキストがマーカーされます。

プラグイン「AddQuicktag」に設定する方法

「AddQuicktag」をインストール

WordPress管理画面右の「プラグイン」→「新規追加」→「検索」→検索窓に「addquicktag」と入力し検索ボタンをクリック。

「AddQuicktag」を確認し「今すぐインストール」をクリックして、プラグインを「有効化」してください。

蛍光マーカー風htmlをタグに設定

WordPress管理画面右の[設定]→[AddQuicktag]をクリックします。

addquicktag01


“桃色マーカー細”など任意の名称を設定。

<span class="marker_pink">

</span>


ここにチェックマークを入れないと表示されないので忘れずにチェック。

addquicktag02

これで「AddQuicktag」の設定は完了です。

実際に反映されるかチェック

addquicktag03

マーカーしたい文字をドラッグでなぞり、wordpressの投稿画面メニューにある「Quciktags」の中から設定したい項目を選んでください。

addquicktag04
投稿記事のビジュアル画面では確認することができないのでテキスト画面でhtmlを確認するか、プレビューもしくは記事を更新して反映されているか確認しましょう!

「AddQuicktag」に登録しなくても標準ツールバーで反映できるのですが、よく使用する項目は登録しておくと効率がよくなります。コピペOKなので是非試してくださいね!

Thanks for sharing :)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)