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

どうも、こんにちはっ!アズノキ管理人のあずみ(@oyakocreate)です(゚∀三゚三∀゚)

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

有料ブログテーマの多くには、デフォルトでマーカーデザインが用意されていることがほとんど。

ですが、色が合わなかったり、線の太さが思っているのと違ったりする方もいるでしょう。

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

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

スポンサーリンク

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

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

あずみ

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

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

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

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…


最後までお付き合いありがとうございますっ!あずみ(@oyakocreate)でした(゚∀三゚三∀゚)

オトクな情報

Amazonで買い物をするなら、ギフト券チャージがおすすめです!

プライム会員なら最大2.5%、通常会員なら最大2%のポイントが返ってくるのでとってもお得。

関連記事&広告

この記事をシェア

>WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

当ブログで使用しているWordPressテーマは「THE THOR(ザ・トール)」です。

THE THOR(ザ・トール)」は機能が豊富で、記事を書く効率が格段にアップ。税込15,984円で何個のサイト・ブログで使用してもOK。

カスタマイズ知識がなくても、設定項目を1つずつ進めていくだけでおしゃれなブログ・サイトが作成できます。

無料・無期限・無制限でのアフターフォローが受けられるので、安心して使用できるイチオシの有料テーマです。

CTR IMG