本記事のキャプチャ画像は2018年6月9日時点のものです。
いろんなブロガーさんのサイト見ていて気付いたんですが、文字に蛍光ペンみたいな線引くのいいなーと。
↑コレですね。
- 何か学生時代を思い出す
- 文書にメリハリがついて大事なポイントが分かる
- 色んな色にすることができてサイトが鮮やかになる
どうやったらできるのかと思い、調べてみると、どうやらスタイルシート(CSS)を使えばできるとのことでした。
WordPressにはスタイルシートファイルがあり、そのファイルを直接変更すればできそうとのこと。
ただ、WordPressを構成するスタイルシートを直接変更すると表示が変になるのではないかな？と思ってみたりしました。
・WordPress初心者の人
・ブログに蛍光ペンみたいな線を引きたい人
目次
「Simple Custom CSS and JS」プラグインで実装したら簡単で楽チン
WordPressを構成するスタイルシートに手を加えてしまうとサイト表示がゴチャゴチャになりそうな気がしたため、プラグインでできないかなと思い探してみました。
プラグインは「機能拡張」という意味でWordPressに無い機能を追加することができます。
調べてみた結果、「Simple Custom CSS and JS」というプラグインが使えそうだったため、早速インストールしてみました。
インストール後は「有効化」するのをお忘れなく。
プラグインインストール後にWordPress管理画面へログインしてから左メニューを確認すると、「Simple Custom CSS and JS」のメニューが追加されていることを確認できます。
蛍光ペン用のスタイルシートを追加する手順
では早速、蛍光ペン用のスタイルシートを追加してみることにします。
「Add Custom CSS」を押下して以下のように追記します。
1 2 3 | .y_under { background: linear-gradient(transparent 50%, yellow 50%); } |
そして、ブログを書くHTMLタグで以下のようなタグを使って「蛍光ペン表示したい文字列」を囲むと
1 | <span class="y_under">蛍光ペン表示したい文字列</span> |
こんな感じで黄色蛍光ペンみたいな表示にすることができます。
スタイルシートの色部分の記述を変えると使い分けることが出来るため、汎用性は十分あると思います。
スタイルシートの色を変更するだけでいろんな色の蛍光ペンが作れます
例えば、以下のようなスタイルシートにすると・・・
1 2 3 | .a_under { background: linear-gradient(transparent 50%, aqua 50%); } |
水色蛍光ペンみたいな表示になります。
1 2 3 | .l_under { background: linear-gradient(transparent 50%, lime 50%); } |
スタイルシートの中身で色部分をRGBの16進数に置き換えることができるため、「#ffccff」に置き換えてみると・・・
1 2 3 | .p_under { background: linear-gradient(transparent 50%, <strong>#ffccff</strong> 50%); } |
ピンク蛍光ペンみたいな表示になります。
どうでしたか？こういうちょっとしたことでも、見栄えが一気に良くなるため、知っていて損はない内容だと思います。
