CSSで強調文字(太字)を蛍光ペンを引いたようにする方法

色々なホームページを読んでいると見かけるこんな文字。

これがやりたくてやりたくて仕方がなかったんです。で、思わずどんな書き方をしているのかな?とHTMLを見てみると。

「<strong>蛍光ペンでなぞったような表現</strong>」

あれ?強調文字? とくに背景を塗る表記は無かったんです。と、言うことはCSSで設定しているんですね。なるほど。

CSSを調べました

確かに文字を赤くして太くすれば目立ちますし、強調したい部分はそれで十分かもしれません。でもね。

これかっこよくないですか!?

目立つし。分かりやすい。ただ色を塗るよりも何倍も目立ちます!

はてなブログさん!ぜひ機能として追加してください!と、お願いしても追加されるのはいつになるのか分からないので、CSSを調べました。表記が分かれば応用も簡単。とは言えそのままコピーするわけにもいかないので、変更を加えています。

蛍光ペンのように見えるCSS

strong {
background: linear-gradient(transparent 40%, #FF7F50 60%);
}

()の中の表記ですが、transparenは透明と言う意味でbackground colorの初期値らしいです。つまりこの値を変えれば色を塗る範囲を変えられます。数値が大きくなるほど色を塗る範囲が狭くなります。

#ffafafは色の指定です。「CSS/HTML色見本」で好きな色を指定してください。

最後のパーセントはグラデーションの幅です。これは数値が大きくなるほど大きくなります。

コピーしてCSSに貼るだけ。サンプルをいくつか紹介

黄色のマーカー。仕事で良く使う色。

 strong {
background: linear-gradient(transparent 40%, #FFFF00 60%);
}

青のマーカー。色が濃かったのでグラデーション多め。

strong {
background: linear-gradient(transparent 40%, #4169E1 100%);
}

緑のマーカー。なんかきれいだな。

strong {
background: linear-gradient(transparent 40%, #00FF00 60%);
}

赤のマーカー。グラデーション多め。原色は濃いね。

strong {
background: linear-gradient(transparent 40%, #FF0000 100%);
}

オレンジのマーカー。この色は良く見るかも。

 strong {
background: linear-gradient(transparent 40%, #FF7F50 60%);
}

水色のマーカー。蛍光ペンぽい。

 strong {
background: linear-gradient(transparent 40%, #00FFFF 60%);
}

紫のマーカー。

strong {
background: linear-gradient(transparent 40%, #FF00FF 80%);
}

おまけ(はてなブログ向け)

はてなブログでマーカーの色を確認する場合、記事作成画面のHTML編集に直接CSSを書くと楽です。

こんな感じ。

<style><!–
strong {
background: linear-gradient(transparent 40%, #FF00FF 80%);
}
–></style>

<stale></stale>で囲んであげればちゃんと反映されます。<!– –>は書かなくても勝手に現れます 笑。

試してみましたが、反映されるのはCSSを書いた記事だけっぽいので、気分で色を変えたい人にはいいかも。(違ってたらごめんなさい)

気軽に使いたい方はカスタマイズの中にあるデザインCSSに追記しておけば、太字を選択するだけでマーカーが引けます。

ぜひおためしあれ。

※管理人はCSSの素人です。ご利用は自己責任でお願いします。

面倒な登録が不要の転職アプリ

※記事の中でも紹介しているかも。でも本当にお勧めできるアプリなんです。

次のような悩みを感じていませんか?

  • すぐ転職するわけじゃないが情報が欲しい
  • 転職を考えているが活動する時間がない
  • 仕事がつらくて、できれば辞めたいと思う
  • 転職エージェントに登録するのは抵抗がある

こういった悩みを抱えている方に紹介したいのが、ジョブクルの転職アプリ。
その理由は次の6つの特徴があるからです。

  • 面倒な登録が不要
  • 完全無料
  • チャットで転職コンシェルジュに相談できる
  • 電話や面談をする必要がない
  • 退職や転職に関する相談なら何でもOK
  • 転職エージェントと遜色のないサービスが受けられる

ぼくも転職エージェントを利用したことがありますが、電話で話したり面談で会うことが意外と億劫なんです。
「無理に勧められそう」とか「断られたらいやだな」と言う不安も感じます。
それにちょっと相談したいだけで、本当に登録していいのかどうかも悩みますよね。

そんな不安を全て取り除き、気軽に転職のプロに相談できるのがジョブクルの転職アプリです。

ぼくも実際に使ってみましたがかなり具合がいい。
なによりチャットで転職のプロに、気軽に相談できるところがすごく気に入っています。
しかもサービスの内容は転職エージェントと比べても大きな違いはありません。

気軽に相談できてしかも親切に対応してもらえる。
インターフェイスの使い勝手に少し不満はありますが、電話をする必要も、会いに行く必要もないのは大きなメリットです。
良かったら試してみてくださいね。

転職 ジョブクル:転職のプロが正社員求人を提案するチャット相談型 転職アプリ
ジョブクル
開発元:Smiloops
無料
posted with アプリーチ