スポンサーリンク

【CSSの入口】ブログの文字を変わった装飾に(簡単な知識でOK)

文字装飾記事のアイキャッチ Customize
本記事は約5分で読めます。

WordPressのブログ記事などで重要な個所を強調したい場合は、太文字テキスト色変更マーカーアンダーラインマーカーなどがありますが、もう少し強調したい場合やオリジナリティを求めたい場合などはCSSを使用してカスタマイズする必要があります。

今回の記事では、簡単な知識で作ることが出来るCSSを利用した文字の装飾についてまとめてみました。

スポンサーリンク

簡単なCSSを利用した文字装飾

簡単なCSSの知識のみで使用することができる文字装飾です。

CSSを記載する場所や、CSSとHTMLの関係、ブログに反映させる方法については次の記事でまとめています。 本記事を読む前に一読いただけると、より分かりやすいです。

好きな色のアンダーラインマーカー

アンダーラインマーカーの基本色は「黄色」「赤色」「青色」ですが、それ以外のマーカーも簡単に作ることが出来ます。

CSSの記述と説明

例えば、このような感じで灰色のアンダーラインマーカーを使用するためのcssの記述方法です。

今回は灰色としましたが、カラーコードを変更することにより、好きな色に変更することが出来ます。

それぞれの記述についての解説を表にまとめました。

記述 解説
.marker-under-gray CSSのクラス名を指定します。任意の名称で良いですが、後で分からなくならないような名称とします。
background 背景のプロパティを指定する記述です。今回は、文字の背景にアンダーラインマーカーを配置するために使用します
linear-gradient 2色以上の色を連続的に変化させる場合に使用します。( )内の記載方法により、いろいろな着色が可能です。
transparent 60% transparentは透明のことです。上から60%を透明として指定しています。この数字を80%にすると細いアンダーラインとなります。
#a9a9a9 60% カラーコードの灰色(#a9a9a9)を指定しています。このカラーコードを好きな色に変更することで、アンダーラインの色を変更することができます。また、60%から100%に変更するとアンダーラインにグラデーションがかかります。

グラデーションがかかったアンダーラインはこんな感じです。

HTML記述

下記の文字列・装飾を表示させるHTMLの記述です。

*** アンダーラインはこんな感じです。 ***

 

2色以上のカラフルなアンダーラインマーカー

先ほどの説明では灰色単色としましたが、「linear-gradient」の記述方法によっては2色以上の色のマーカーを作ることが可能です。

CSSの記述と説明

例えば、このような感じで灰色のアンダーラインマーカーを使用するためのcssの記述方法です。

 

文字囲み

文字の装飾はアンダーラインマーカーのような背景色の変更意外でも、周りの枠を利用した方法も使用できます。

CSSの記述と説明

例えば、このような感じで青の二重線で囲むことも可能です。

それぞれの記述についての解説を表にまとめました。

記述 解説
.marker-square-blue CSSのクラス名を指定します。任意の名称で良いですが、後で分からなくならないような名称とします。
border 枠を記載するための記述です。
double 二重線を指定する記述です。1本線であれば「solid」点線であれば「dashed」と記載します。
blue 色の指定です。今回は「blue」と指定しましたがカラーコードでも大丈夫です。

 

文字の強調

枠を利用した装飾については、全周以外でも「上だけ」「右側だけ」など様々な応用ができます。

CSSの記述と説明

例えば、このような感じで左右に線を入れることも可能です。

それぞれの記述についての解説を表にまとめました。

記述 解説
.marker-square-lr CSSのクラス名を指定します。任意の名称で良いですが、後で分からなくならないような名称とします。
border-left(light) 外枠のうち、左側(右側)だけに装飾する場合に使用します。上側や下側だけに線を引く場合は(top、bottom)です。 また、「border」は一括指定が可能なので、別の記述方法もありますが今回は分かりやすい記述としています。
5px solid blue 5pxの太さの直線(solid)を青で記載する。

 

スポンサーリンク

プラグインを使用して楽に記述

 一度cssを作成してしまえば、あとはHTMLを記述するだけで何度も使用することが出来ます。
しかし、手書きでHTMLを修正するのは時間がかかりますし、誤記の元となってしまいますので、何度も使用する自作cssは、プラグインを使用してボタンを作ってしまうことをおすすめします。

AddQuicktagプラグインの使用

プラグイン「AddQuicktag」をWordPressに導入すると簡単に自作CSSに対応したHTML記述を読みだしてくれます。

使用方法につきましては、別の記事にまとめていますのでよろしければご覧ください。

【簡単】AddQuicktagで自作CSSを時短で呼び出す方法
自由にカスタマイズした色々な色のアンダーラインマーカーを、ボタン一つで使用することが出来るようになるプラグイン「AddQuicktag」のご紹介です。難しい知識を必要とせずに使用できるようにするため、簡単に解説しています。

 

スポンサーリンク

まとめ

最後まで読んでいただき、ありがとうございました。最後に本記事のまとめです。

【cssを使用した文字の装飾】

  • class名を指定して装飾用のcssを記述
  • HTMLではclass名を使用してcssを呼び出し
  • HTMLでの呼び出しはプラグイン「AddQuicktag」を使用することでボタンで可能になる。
タイトルとURLをコピーしました