IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

      2016/08/01  あとで読む   はてブする

蛍光ペンでテキスト上をマーカー

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペンのようなマーカーで塗られたような強調サインです。例えば、こんな色。

ずっと気になっていたので、IT便利帳でも設定してみることにしました。

スポンサーリンク

蛍光ペンマーカーを設定(CSS)

蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。

linear-gradient(transparent 線の太さ, 線の色 0%)

このlinear-gradient属性、グラデーションを使って設定します。

 

線の太さ

黄色の蛍光ペン(太)

 

黄色の蛍光ペン(細)

蛍光ペン(太)と蛍光ペン(細)の違いは60%と0%で表示している箇所です。100%表示の場合は0%に,40%表示の場合は60%に表記します。

数値が高いほど細くなります

 

次は色の設定を変更します。

 

色の設定

色設定をしてみます。例として黄緑色、水色、ピンクで表記してみました。

黄緑色の蛍光ペン(細)

 

水色の蛍光ペン(細)

 

桃色の蛍光ペン(細)

色の「#66FFCC」の箇所を変更しているだけです。

上のCSSをスタイルシート(Style.css)や(smart.css)などに表記し更新。次に HTMLには

と表記すれば、蛍光ペンでマーカーされます。

 

スポンサーリンク

最後に

文字を強調したい時は、その文字を太くする方法もありますが、このように蛍光ペンでマーカーすると見やすいですね。マーカーされた箇所を見入ってしまいます。

CSSで太字とマーカーを両方とも作っておいて、使い分けしていこうと思います。

他にも色はたくさんあります。皆さんも気に入った蛍光ペン風マーカーを作ってみて下さい。

プラグイン「AddQuickTag」に登録しておくと、連携して便利に使えますよ▼

【関連】WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

【関連】ホームページHTML<p>と<br>の違いは応用例から理解しよう

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - WordPress

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

HTMLの使い方。とを両方使った例
ホームページHTML<p>と<br>の違いは応用例から理解しよう

僕がホームページを作り始めたのが1998年、丁度Windows 98 2nd e …

WordPress
[WordPress]fluctやnendの広告が表示されない時は、JavaScriptプラグインをチェック!

別サイトで何ヶ月も前にスマホ広告のnend(ネンド)の申込をしました。すぐに許可 …

アフィリエイト表示が切れている
【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

WordPress
WPプラグイン「Akismet」の設定方法、APIキーの取得

新しいサイトを立ち上げるたびに必要なのがWordPressのプラグイン「Akis …

WordPress「アップロードしたファイルをwp-content/uploads…に移動できませんでした」というメッセージ
WordPressで画像ファイルがアップロードエラーする場合の2つの解決法

最近Wordpressの「メディアを追加」で画像を選択するとエラーが出ることがあ …

WorePress
WordPressのビジュアルリッチエディタが表示されず入力や編集ができないときにする方法

cある日、WordPressを立ち上げいざ編集をしようとしたら、入力が全くできま …

サーバ移転
ロリポップからシックスコア(sixcore)へサーバー移転に成功!どこに躓いたか

サーバをロリポップからシックスコアに移転しました。理由は別のサイトのPVが増えて …

stinger3
[Stinger3]小見出しのデザインを変更する方法 - スタイルシート(CSS)

どうも、リョータ(@itbenricho)です。Stinger2からStinge …

GTmetrix
GTmetrixのSpecify image dimensions改善方法

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。こ …

stinger3
WordPressのテーマ「Stinger3」のサイト名をテキストから画像に変更する方法

本日Stinger2からStinger3に変更しました。その関係でStinger …