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

  関連記事

Google XML Sitemaps 4の調子が悪いので3にダウングレードしました

Google XML Sitemaps 4以上(現在4.0.4)は、サイトマップ …

Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法
[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法

以前「WordPressのテーマ「Stinger3」のサイト名をテキストから画像 …

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

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

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …

WorePress
[WordPress]記事内の画像リンクを全部まとめて外す方法

WordPressにはデフォルトで、画像をリンクする設定になっています。スマホで …

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

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

Wordpressプラグイン
FacebookのOGPの設定はAll in one SEO Packが簡単!

今までOGPの設定をするとき、WordPressプラグイン「Open Graph …

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

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

失敗し泣き崩れる様子
[WordPress]functions.phpの編集時に、サイト画面を真っ白にしてしまった場合の直し方

WordPressでfunctions.phpを編集時に、画面を真っ白にしたこと …

WordPress
[WordPress]URLにカテゴリーを入れるパーマリンクと日本語を英語にするスラッグ設定

先日WordpressでURL内にカテゴリーを入れるディレクトリー型構造の設定を …