WordPress 蛍光ペン風テキスト装飾をCSSに設定
- 2015.04.10
- WORDPRESS

こんにちは。@dmgadget_ディーエムガジェットです。ブログを書いていて太字を使ったりする時もあると思うのですが、こんな風に蛍光ペンで強調したくなるような場合も多々あると思います。ディーエムガジェットではあまり使わないのですが、一度設定しておくと便利なので導入方法を備忘録としてここに残したいと思います。
ディーエムガジェットではStinger5に子テーマを導入して運用しています。説明は子テーマを利用した説明になりますので、お間違えの無いようお願いいたします。ちなみにStinger5の子テーマ導入方法はこちら。
子テーマのstyle.cssを開きます
TransmitなどのFTPアプリを使ってサーバーにあるstingerの子テーマフォルダのstyle.cssを開き一番下などに以下の記述をコピペします。
/* 黄色の蛍光ペン効果 */ .keikou { background: linear-gradient(transparent 40%, rgba(255, 255, 0, 0.5) 40%); padding-bottom: .2em; }
色の指定はコードの中の rgba(255, 255, 0, 0.5)の最初の3っつ「255,255,0」が黄色を示しています。ちなみに4つ目の「0.5」と云う数字は色の透過度の値で0.5より上の数字にすれば濃くなります。
そして蛍光ペンの使い方は本文中に装飾したい文字を以下のコードで囲みます。
<span class="keikou">ここはかなり重要なんです。</span>
ここはかなり重要なんです。
みたいな感じです。
蛍光ペンの色を変更したい場合
好きな色に変更したい方はこちらのサイトで、
好きな色を作ってから、R G B それぞれの数字を先程のrgbaに書き込みます。
この場合、rgba(219,156,181,0.5)となります。
頭の「.keikou」を「.murasakikeikou」のように好きな名前に変えて先程と同じようにstyle.cssの一番下にコピペして保存すれば使えるようになります。
<span class="murasakikeikou">紫バージョンの蛍光ペンです。</span>
紫バージョンの蛍光ペンです。
こんな感じで5色ぐらい登録しておけば完璧です。
以上「蛍光ペン風テキスト装飾をCSSに設定」でした。読んで頂いてありがとうございました。
-
前の記事
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示 2015.04.07
-
次の記事
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる 2015.04.12