好きな色で、太さも選べます。
重要な部分にラインマーカーのような色付けして目立たせます。
CSSカスタムでラインマーカー風のデザイン
投稿内で、目立たせたい部分の文字は太字にしたりします。
この時使われるのがstrongタグ。
強調文字のstrongタグは、あまり多用しないようにしましょう。
スパムサイトだと認識されない為に。
そのstrongタグをカスタムして、
マーカーでラインを引くようにキレイに装飾できます。
太字と併用もできるし、太字にしない様に修正する事もできます。
まぁお好みですね。
ラインマーカーと言えば、学校の教科書を思い出しますね。
そんな感じの色付けをします。
よく私が使う
コレは、単に背景をつけただけです。
Bloggerのテキストエディタの、文字背景色で設定しただけです。
簡単にできるのでよく使います。
ちなみに、強調文字とは関係ないです。
今回ご説明するのはラインマーカー風。
こんな感じにしたいのです。
なかなかキレイですね。
ではCSSをお知らせします。
strong {
background: linear-gradient(transparent 50%, #ffff66 40%);
}
色は自由に変えて下さいね。
ピンクとか、水色とかに。
色選びは…私の過去記事も参考にどうぞ。
サイト制作に必要な条件分岐とカラーコードまとめ。WordPress他色んなブログでも使用。
強調文字にラインマーカーをつける以外にも、
他の場所でももちろん使えます。
.marker_pink {
background: linear-gradient(transparent 40%, #ff66ff 60%);
}
ピンクもキレイです。
classの名前「marker_pink」とつけて、
<span class="marker_pink">
～
</span>
でくくるだけです。
ちなみに、
transparent 40%…
数字を小さくする程、ライン幅は大きくなる。
上部の空白が狭くなるという感じです。
#ff66ff 60%…
数字を小さくする程、色の表示がくっきり。
数字を大きくすると、淡い表示になります。
あとは色々調整して下さい。
参考にしたサイト
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた
【CSS】コピペでOK！強調文字を蛍光ペン風にする方法
他にも文字CSSを色々カスタマイズ
文字をアレンジすると、強調されていい感じになります。
多用しないようにしましょう。
返って見にくくなるのと、
スパムサイトに間違われない為に。
文字のカスタマイズは、
サイト制作で非常に頻繁に使いますね。
是非おさえておきましょう。
- borderで下線を引く
- 点線を引く
- 二重線で囲む
- 背景色をつける
- 文字色を変える
- 文字を大きくする
- transformで文字を斜めにする
- 文字に影をつける
など。
色々カスタムできますよ。
これらのやり方は、以下のサイトを参考にしました。
参考にしたサイト
強調文字をちょっとおしゃれにするCSSデザインサンプル
Android端末でlinear-gradientは無視される？
仕様の問題だと思います。
Androidデバイスのうち、一部のスマホでは、
今回のカスタムは表示されないようです。
普通の文字のまま表示されます。
まぁ、別に困るわけでもないので、そのままにしています。
PCや、Androidタブレットではちゃんとlinear-gradientが適用されています。
理由は、わかりません。
仕様だと思います。
AndroidでCSS3のグラデーションが効かない
-webkit-gradientで指定する方法が上記サイトに載っています。
ご興味有る方はカスタムしてみると良いでしょう。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク