ブログ

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

▼ 楽しくブログを運営したいあなたに

いらっしゃいませ✨三姉妹育児に奮闘中のオタママ、あず(azusanchi )です。

今回は、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で文字を囲みます。

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

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

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

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

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

[getpost id=”458″]

あず(azusanchi ) でした

もしお時間があれば、ぜひ他の記事も読んでいってくださいね✨

ABOUT ME
あずさん
あずさん
7歳・2歳・1歳の娘がいる主婦ブロガーです。「あずさんち」では自分の経験を元に、今後同じ悩みを持った主婦やママの助けになるようなブログを書いていきます。在宅ワークという働き方の選択肢を広めたい!
\ Twitterやってます /

私のイラスト用Twitterアカウントでは、おやこクリエイトの最新記事の更新情報などもツイートしています。

よければフォローしてみてくださいね♡

あずさんのTwitterを見る