CSSとHTMLで文字に蛍光ペンで線を引いたようなデザインを作る

こんにちは
主婦ブロガーのあず(yuuki_azusa )です。

今回は、Twitterで質問のあった「蛍光ペンデザイン」の作り方を紹介します。

このブログでも使用しているWordPressテーマ「SANGO」には、デフォルトで以下のような3色の蛍光ペンデザインが用意されています。

  • 緑の蛍光ペン
  • 青い蛍光ペン
  • 黄色の蛍光ペン

自作のデザインを用意して色の種類を増やしたり、線の幅を変えたりしてみましょう!

もちろん他のテーマでも使用可能ですので、蛍光ペンデザインを使ってみたい方は参考にしてみてください。

蛍光ペンを引いたようなデザインを自作する

今回はstyle.cssでデザインを指定して、実際に使用する際にはHTMLを使う方法を紹介します。

作ったHTMLは「AddQuicktag」というプラグインに登録しておくことで、簡単に使用できます。

style.cssに追記する内容

追記するのは子テーマのstyle.cssです。

今回は、当ブログでよく使っているこのようなオレンジの蛍光ペンデザインを元に説明します。

.orange_pen {
background: linear-gradient(transparent 65%, #fff7e6 10%);
padding-bottom: .2em;
font-weight:bold;
}

.orange_penというclassを作っています。ここは自分でわかりやすいように決めてください(.は消さないでね)。

background: linear-gradient(transparent 65%, #fff7e6 10%);で蛍光ペンの色や幅を指定しています。

padding-bottom: .2em;は線の位置を指定しています。

font-weight:bold;はおまけのようなもので、私は強調部分を必ず太字にする癖があるので、蛍光ペンの部分が必ず太字になるように指定しています。

あず
これを応用すると、このように青い蛍光ペンデザインを作ることもできます。

変更したのは1行目のclass名と、2行目のカラーコード部分です。

複数のclassを用意して、使い分けることによって様々な蛍光ペンデザインを表現することができます。

実際に使用するためのHTML

実際に自作したclassのコードを使うには、以下のようなHTMLで文字を囲みます。

HTML
<span class="orange_pen">蛍光ペンを引きたい文字</span>

赤文字の部分は、自分で作ったclass名(.を除く)を入れてください。

これで簡単に文字に蛍光ペンで線を引いたようなデザインが使えます。

上級編:ショートコード化する

HTMLを使うのが面倒な場合は、ショートコード化してしまうのも一つです。

ただし、PHPファイルをいじりますので必ずバックアップをとった上で行ってください。

また、コードの意味がわからない場合は書き換えをしないでください。

function.phpに記載する内容

function keikoupen( $atts, $content = null ) {
 return '<span class="orange_pen">' . $content . '</span>';
}
add_shortcode('orange', 'keikoupen');

このコードをfunction.phpに記述することで、このショートコードが使用できます。

ショートコード
[orange]ショートコードで呼び出し[/orange]

2行目のreturn部分にHTMLを登録し、囲みで呼び出しができるように指定しています。

また、4行目のadd_shortcodeの1つ目の指定でショートコードで使用する文字(orange)を指定しています。

色の使いすぎには注意が必要

classを自作することで、無限に蛍光ペンの種類を増やすことができますが、記事では色の使いすぎに注意しましょう。

あず
どこが重要なのかわからなくなりますからね。

また、蛍光ペン風のデザインはおしゃれで見やすくすることもできますが、色が奇抜だと逆に読みにくくなる原因にもなります。

何度も調整しながら、読みやすい色を見つけましょう。

参考リンク WEB色見本|原色大辞典

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

コピペで簡単にできるSANGOのカスタマイズ方法まとめ
最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。

コメントを残す

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