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>の違いは応用例から理解しよう

スポンサーリンク

 - WordPress

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

Twitter でIT便利帳を

  関連記事

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

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

WordPress
「All in one SEO pack」でTwitterカードを簡単に設定する方法

WordPress(ワードプレス)のプラグイン「All in one SEO p …

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

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

WPプラグイン「VA Social Buzz」を表示した様子
バイラルメディア風のSNSボタンはWPプラグイン「VA Social Buzz」で簡単設定

バイラルメディア風のSNSボタンというのがあります。上の写真がそれで、個別記事の …

有料アドオンVA Social Buzz + SWで好きな場所にバイラルメディア風SNSボタンを表示

バイアルメディア風のSNSボタン(Facebookいいね)を簡単に設置できるWo …

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

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

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

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

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

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

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

GTmetrix
GTmetrixのSpecify image dimensions改善方法

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