シェアしていただけると嬉しいです

【CSS / HTML】コピペでOK!サイトの見栄えを良くする強調、蛍光ペン風、LINE会話風などの文字装飾一覧

シェアしていただけると嬉しいです

コピペでOK。蛍光ペン風などの文字装飾一覧

こんにちは、だちこです。ご覧いただきありがとうございます。

今回は、サイトの見栄えを良くするために、私が行っているゆるままサイトのカスタマイズについてご紹介したいと思います。

ゆるままサイトはWordPressを使って運営しています。WordPressは汎用性が高いブログツールなので自由にカスタマイズすることができちゃいます。

というわけで、主に文字装飾についてご紹介しますね。自分が今後使うことも考え、コピペでできるように書きましたので、是非参考にしてみてください。(一部、見栄えのカスタマイズも入ってます♪)

スポンサードリンク

文字強調や蛍光ペン風にする方法

文字を強調表示したい場合、太字にする、フォントカラーを変える、などが一般的ですよね。そして、それらはWordPressのプラグインを入れればマウスクリックだけで実現できちゃうのですが、それだけでは物足りないなぁと思うわけです。

ちなみにだちこが使っているビジュアルエディター用のプラグインは『TinyMCE Advanced』です。一般的な表示はこのプラグインだけで事足りると思うのですが、もう少しバリエーションを増やしたいなぁってことで、HTMLやCSSをちょこっと変えてだちこ流にしています(笑)

フォントサイズを一部だけ変える方法

記事を書いていると、一部だけフォントサイズを変えたいなぁと思うことがあります。

文字の大きさを 24px にしました。

文字の大きさを 10px にしました。

このように<span>タグを使用してフォントサイズを指定しています。任意の数字に変更して文字を大きく見せたり、小さく見せたりしています。

アンダーラインの色だけを変える方法

単純に文字に下線を表示するだけであればマウスクリックだけでできますよね。ですが、表示される下線の色は黒。

まあ、下線が表示されることで強調はされますが黒のみじゃ味気ないかなぁと思うのです。なので、下線の色だけを変えました。

赤色の下線を引きます。

緑色の下線を引きます。

こんな感じで色の指定部分を任意に変更することで、その指定した色の下線が表示されます。

また色の部分はRGBコードによる指定もできますので、淡い桜色の下線を引きたいなぁなんてこともできちゃいますよ。

淡い桜色のの下線を引きます。

まあ、CSSの方に定義を書いて、HTML側はそのクラスを記載するだけにしても良いのですが、その時の気分次第で下線の色を微妙に変えたいこともあるので、だちこはHTMLで色を指定するようにしています。

ちなみに、RGBコードは覚えきれないのでこのサイトをいつも見てます。

HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

文字を蛍光ペンで引いたように見せる方法

学生時代にだいぶお世話になった蛍光ペン。教科書や参考書に蛍光ペンで線を引いただけで満足しちゃってました(笑)なんて話は置いておいて。

ここではよく使いそうな6つの蛍光ペン風な書き方についてご紹介します。

黄色の蛍光ペン

学生時代一番使っていた色です。

黄色の蛍光ペン

ピンクの蛍光ペン

2番目に良く使っていた色です。

ピンクの蛍光ペン

黄緑色の蛍光ペン

この色も定番ですね。

黄緑色の蛍光ペン

水色の蛍光ペン

この色もありましたね。

水色の蛍光ペン

ブルーの蛍光ペン

あまり登場回数すくないけど。。

ブルーの蛍光ペン

紫色の蛍光ペン

もはや使った覚えないけど。。。

紫色の蛍光ペン

文字列の前にアイコンぽいラベルを付加する方法

文字列の直前にアイコンぽいラベルを表記することで見ていただいている方の注意を引く効果があります。

この記事でも既に登場していますが、 もそのひとつです。シンプルに(例)と表示するよりも目を引きますよね。乱用は禁物ですが。。。(苦笑)

上記の様にCSSに定義することで、HTML側にそのクラスを使えば簡単に表示できちゃいます。

「例」を他の文字に変えれば、いろいろなアイコンぽい表示ができますね。参考 とか、Q とか、A とか。

もちろん、オレンジを他の色に変えることもできます。その場合は、CSS側の background-color のRGBコードを目的の色のコードに変更してください。

読者の注意を促すCHECKラベルを付加する方法

これは、上に書いたアイコン風ラベルとは異なり、「見てね!」っていうメッセージを込めたCHECKラベルです。見て欲しいリンクとかの前後どちらかに表示するようにしています。

気になる方はこちらをクリック check

LINE風に表示する方法

会話などをLINEのやりとりっぽく表示する方法です。
この間、息子のゆるちゃんとした会話を例に書いてみます。

ゆるちゃん、大きくなったら何になりたいの?

ぼく、ヒーローになってお空を飛びたいんだよぉ

すてきな夢だね~

ちょっと複雑ですが、このままCSSに定義して、HTMLコードのように記載すればLINE会話風の表示ができちゃいます。面白いですね。

さいごに

いかがでしたか?

HTMLやCSSを少し勉強するだけで、ガラッと見栄えが変わりますよね。

最初、CSS定義とか少し面倒くさいきもしてしまいますが、一度定義してしまえば記事の見栄えが豊かになりますのでオススメです。

少し内容を変えて自分流にアレンジしてみても良いと思います。いくらでも応用が利きますので。

だちこ、まだまだ初心者で調べながらですがますます、ゆるままグレードアップさせていきたーーーい!!

見ていただいた方の参考になれば嬉しいです。

スポンサードリンク

シェアしていただけると嬉しいです

フォローしていただけると嬉しいです