WordPressのブログ記事などで重要な個所を強調したい場合は、太文字やテキスト色変更、マーカーやアンダーラインマーカーなどがありますが、もう少し強調したい場合やオリジナリティを求めたい場合などはCSSを使用してカスタマイズする必要があります。
今回の記事では、簡単な知識で作ることが出来るCSSを利用した文字の装飾についてまとめてみました。
簡単なCSSを利用した文字装飾
簡単なCSSの知識のみで使用することができる文字装飾です。
CSSを記載する場所や、CSSとHTMLの関係、ブログに反映させる方法については次の記事でまとめています。 本記事を読む前に一読いただけると、より分かりやすいです。
好きな色のアンダーラインマーカー
アンダーラインマーカーの基本色は「黄色」「赤色」「青色」ですが、それ以外のマーカーも簡単に作ることが出来ます。
CSSの記述と説明
例えば、このような感じで灰色のアンダーラインマーカーを使用するためのcssの記述方法です。
今回は灰色としましたが、カラーコードを変更することにより、好きな色に変更することが出来ます。
|
1 2 3 |
.marker-under-gray{ background:linear-gradient(transparent 60%, #a9a9a9 60%); } |
それぞれの記述についての解説を表にまとめました。
| 記述 | 解説 |
|---|---|
| .marker-under-gray | CSSのクラス名を指定します。任意の名称で良いですが、後で分からなくならないような名称とします。 |
| background | 背景のプロパティを指定する記述です。今回は、文字の背景にアンダーラインマーカーを配置するために使用します |
| linear-gradient | 2色以上の色を連続的に変化させる場合に使用します。（ ）内の記載方法により、いろいろな着色が可能です。 |
| transparent 60% | transparentは透明のことです。上から60%を透明として指定しています。この数字を80%にすると細いアンダーラインとなります。 |
| #a9a9a9 60% | カラーコードの灰色（#a9a9a9）を指定しています。このカラーコードを好きな色に変更することで、アンダーラインの色を変更することができます。また、60%から100%に変更するとアンダーラインにグラデーションがかかります。 |
グラデーションがかかったアンダーラインはこんな感じです。
HTML記述
下記の文字列・装飾を表示させるHTMLの記述です。
＊＊＊ アンダーラインはこんな感じです。 ＊＊＊
|
1 |
アンダーラインは<span class="marker-under-gray">こんな感じ</span>です。 |
２色以上のカラフルなアンダーラインマーカー
先ほどの説明では灰色単色としましたが、「linear-gradient」の記述方法によっては２色以上の色のマーカーを作ることが可能です。
CSSの記述と説明
例えば、このような感じで灰色のアンダーラインマーカーを使用するためのcssの記述方法です。
|
1 2 3 |
.marker-under-yellowred{ background:linear-gradient(transparent 60% , #ffca38 90% , #ff3838 100%); } |
文字囲み
文字の装飾はアンダーラインマーカーのような背景色の変更意外でも、周りの枠を利用した方法も使用できます。
CSSの記述と説明
例えば、このような感じで青の二重線で囲むことも可能です。
|
1 2 3 |
.marker-square-blue{ border:double blue; } |
それぞれの記述についての解説を表にまとめました。
| 記述 | 解説 |
|---|---|
| .marker-square-blue | CSSのクラス名を指定します。任意の名称で良いですが、後で分からなくならないような名称とします。 |
| border | 枠を記載するための記述です。 |
| double | 二重線を指定する記述です。１本線であれば「solid」点線であれば「dashed」と記載します。 |
| blue | 色の指定です。今回は「blue」と指定しましたがカラーコードでも大丈夫です。 |
文字の強調
枠を利用した装飾については、全周以外でも「上だけ」「右側だけ」など様々な応用ができます。
CSSの記述と説明
例えば、このような感じで左右に線を入れることも可能です。
|
1 2 3 4 |
.marker-square-lr{ border-left : 5px solid blue; border-right : 2px solid blue; } |
それぞれの記述についての解説を表にまとめました。
| 記述 | 解説 |
|---|---|
| .marker-square-lr | CSSのクラス名を指定します。任意の名称で良いですが、後で分からなくならないような名称とします。 |
| border-left（light） | 外枠のうち、左側（右側）だけに装飾する場合に使用します。上側や下側だけに線を引く場合は（top、bottom）です。 また、「border」は一括指定が可能なので、別の記述方法もありますが今回は分かりやすい記述としています。 |
| 5px solid blue |
5pxの太さの直線（solid）を青で記載する。 |
プラグインを使用して楽に記述
一度cssを作成してしまえば、あとはHTMLを記述するだけで何度も使用することが出来ます。AddQuicktagプラグインの使用
プラグイン「AddQuicktag」をWordPressに導入すると簡単に自作CSSに対応したHTML記述を読みだしてくれます。
使用方法につきましては、別の記事にまとめていますのでよろしければご覧ください。
まとめ
最後まで読んでいただき、ありがとうございました。最後に本記事のまとめです。
【cssを使用した文字の装飾】
- class名を指定して装飾用のcssを記述
- HTMLではclass名を使用してcssを呼び出し
- HTMLでの呼び出しはプラグイン「AddQuicktag」を使用することでボタンで可能になる。
