iPadでイラストを描いてます♡
WPカスタマイズ

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

<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のカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

あわせて読みたい
コピペで簡単にできるSANGOのカスタマイズ方法まとめ WPテーマをSANGOに変えたのをきっかけに、カスタマイズにめちゃくちゃ力を入れています。 SANGOを使っている人のお役に立...

あず(yuuki_azusa ) でした
おしまーい。

有料テーマを1つだけ買うなら

20万円以上を有料テーマ購入に使った私が、「1つだけ」有料テーマを購入したいあなたにおすすめ!

Diver」なら、WordPress初心者でもブログもアフィリエイトサイトも思いのままに作れます。

詳細ページ公式ページ

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

COMMENT

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