どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ブログを書くときに文章中の重要な部分には太字を使ったり、赤字で強調したりするのが基本的な方法だと思います。
ですが他の方が運営しているブログ記事を拝見していると、蛍光ペンでマーカーを引いたようなデザインを使っているではありませんか！
そこで気になった私は、「自分のブログでも蛍光ペン風にカラフルでおしゃれにしたい！」と思ったので、早速こんな感じで取り入れてみました。
このマーカーを作るには「HTML」と「CSS」の編集が必要になりますが、初心者の方でも簡単に取り入れられるので、その方法をできるだけわかりやすくご紹介したいと思います。
HTMLとCSSでデザインを作る
蛍光ペン風のマーカーを作るためには、ブログの投稿画面でHTMLモードに「class(クラス)」を指定したコードを貼り付け、CSSで蛍光ペンのようなデザインに編集する必要があります。
ワードプレスの場合であれば、「テキストモード」がHTMLコードを入力する場所になり、classというのは簡単に言うと、CSSで決めたデザインを呼び出すためのものです。
「class」を指定する
まずはマーカーデザイン用のHTMLで使えるコードを用意するために、classを指定して以下のようなコードを作ります。
| <span class=”marker1″>テキストを入力</span> |
「marker1」の部分がclassになりますが、自分のわかりやすい名前に変更して使用することができます。
「テキストを入力」には、マーカーを引きたい文章を自由に入力します。
classの名前が指定できたら、次にCSSの方で蛍光ペン風にデザインをカスタマイズしていきます。
「CSS」でデザインを決める
ワードプレスの場合は子テーマの「style.css」に、その他のブログではCSSが編集できるページを開き、以下のコードを追加しましょう。
/*-- 蛍光ペン風のマーカー --*/
.marker1{/*イエロー*/
background: linear-gradient(transparent 45%, #adff2f 80%, transparent 90%);
}
/*-- 他の色で分けたい場合 --*/
.marker2{/*レッド*/
background: linear-gradient(transparent 45%, #ff7f50 80%, transparent 90%);
}
上記のコードはテキストの背景色をグラデーションで表示できるもので、「transparent」の数値を変更することで、上からや下からの背景色の太さや透明度を変更することが可能です。
「#adff2f」の部分がカラーコードになっているので、自分の好きな色に変更してお使い下さい。(色コードの参考：原色大辞典)
また、他の色を記事内で同時に使用したい方は、新たにもう１つclassを指定してCSSで別の色を作れば、このように使い分けることができます。
イエローバージョンの蛍光ペン風デザインです
レッドバージョンの蛍光ペン風デザインです
マーカー内の文章を太字にしたり文字色を変更したりするのは、それぞれのブログに合うかどうかで判断されるといいかと思います。
ワードプレス向け:マーカーボタンを利用する
ワードプレスでブログを運営されている方であれば、毎回HTMLコードを入力しなくてもマーカーボタン１つで、簡単にコードを挿入することができる方法があります。
それはワードプレスのエディタを拡張できる、「TinyMCE Advanced」プラグインを導入することです。
このプラグインにはすでに、「黄マーカー」と「赤マーカー」ボタンが用意されています。
あとはCSSで先程説明したようにデザインを変更しておくだけで、いつでもボタンクリックすればコードを呼び出すことができます。
エディタ拡張プラグインを導入する
TinyMCE Advancedプラグインは、ワードプレスのエディタ機能としてもかなり使いやすいので、導入しておくと非常に便利です。
プラグインはワードプレスの管理画面メニューの、「プラグイン」⇒「新規追加」から導入できますが、設定方法なども知っておくと活用しやすいので、詳細な設定などについて知りたい方は、こちらに記事を参考にされてみて下さい。
| 参考：使えるエディタ！TinyMCE Advancedの導入からカスタマイズする方法 |
指定されたclassをCSSでカスタム
プラグインの導入後にワードプレスで投稿画面を開くと、エディタ部分に様々なアイコンが追加されていると思いますが、ここではその説明は省略させて頂いて「テキストモード」に切り替えます。
そうするとテキストモードのボタンの中に、「/黄マーカー」と「/赤マーカー」があるはずです。
このボタンをクリックすることで、テキスト内に以下のHTMLコードが追加されるようになっています。
| <span class=”ymarker”> <span class=”rmarker”> |
ここで指定されているclassを使って、CSSで蛍光ペン風のデザインに編集すれば、今後はボタンをクリックしてデザインを呼び出したり、対象のテキストを選択した状態でマーカーボタンを押せば、簡単に挿入することができます。
また、投稿画面ではCSSで編集したデザインが反映されないので、プレビューを使って確認するようにして下さいね。
まとめ
蛍光ペン風のマーカーデザインを使うと、文章をおしゃれに目立たせることができるので、一度試してみて下さい。
私は今まで普通に太字にするか、赤色にするかのどちらかだったので、これからはマーカーも活用していこうと思います。
こうしたちょっとした変化や工夫を加えるだけでも、文章が読みやすくなったりユーザビリティの向上にも繋がることもありますし、まだ利用されていない場合はこの機会にマーカーを引いてみて下さいね。
