簡単なCSS設定で蛍光ペン風やオシャレなアンダーラインでブログの文字装飾をデザインしよう!

投稿者: | 2019年8月28日

今回は、簡単なCSS設定で強調文字を「蛍光ペン風」や「オシャレなアンダーライン」でブログの文字装飾をアレンジしたい方に必見です!

文字だけの単調なブログでは、メリハリがありません。

伝えたい部分を強調したり、色を変えたりすることがユーザに対して分かり易い情報を提供する基本スキルです。

ですが、いざ、初期設定のままワードプレスで文字を装飾しようとしても、どこにそんなツールあるの?

と思いませんか?

クマ吉も最初はそう思いました。

htmlタグやCSSをゴリゴリ変更追加しないとダメなのか・・・やっぱりワードプレスはハードルが高い・・・と思っていました。

でも、とても簡単な方法がありましたので、ご紹介します。

クマ吉ができたので、Webスキルが無くてもできますので安心してください。


 

今回は、下記のこんな感じの文字装飾の設定をボタン一つで呼び出せるように設定します。

 

文字にアンダーラインを付けたいです!

文字にアンダーラインを付けたいです!

文字にアンダーラインを付けたいです!

文字にアンダーラインを付けたいです!

文字にアンダーラインを付けたいです!

 

文字を蛍光ペンで塗りつぶして強調させたいのです!

文字を蛍光ペンで塗りつぶして強調させたいのです!

 

文字に★印を付けて強調させたいのです!

 

文字に影を付けたいのです!

 


 

AddQuicktagプラグインをインストール

 

まずは、AddQuicktagプラグインがインストールされていることが条件です。

まだプラグインをインストールされていない方は、下記の記事を参考にインストールしてくださいね。

⇒ ワードプレス(WordPress)の見出しデザインを装飾カスタマイズする方法!

 


 

AddQuicktagの設定

 

基本設定と、操作方法は下記の①~⑤をただ繰り返すだけです。

 

①【設定】⇒【AddQuicktag】を表示します。

下記の図のように設定し【設定を保存】します。

【ボタン名】:penlight-blue

【ラベル名】:penlight-blue

【開始タグ】:<strong class=”penlight-blue”>

【終了タグ】:</strong>

 

②【外観】⇒【カスタムCSS】を表示します。

下記のCSSコードをコピペし、【カスタム設定の更新】ボタンをクリックします。

/* 文字を蛍光ペンで塗りつぶし(色:blue) */
.penlight-blue {
background: linear-gradient(transparent 40%, #66ccff 40%);
}

 

③新規記事を作成します。

【テキスト】モードにします。

①で設定したボタン名が表示されていることを確認します。

装飾を付けたい文字を入力します。

例:AAAAAAAAAA

文字を反転させて、【①で設定したボタン名】をクリックします。

下記のようなコードが付きましたか?

<strong class=”penlight-blue”>AAAAAAAAAAA</strong>

 

④プレビューで確認します。

選択した文字に装飾が付きました。

 

⑤次回呼び出すときは、このボタンを押すだけで、文字を装飾できます。

簡単ですね。

 


 

アンダーラインの設定について

 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-wavy
【ラベル名】:underline-wavy
【開始タグ】:<p class=”underline-wavy”>
【終了タグ】:</p>

<カスタムCSS>
.underline-wavy {
-webkit-text-decoration: underline wavy red;
text-decoration: underline wavy red;
}

 


 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-solid
【ラベル名】:underline-solid
【開始タグ】:<p class=”underline-solid”>
【終了タグ】:</p>

<カスタムCSS>
.underline-solid {
-webkit-text-decoration: underline solid red;
text-decoration: underline solid red;
}

 


 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-double
【ラベル名】:underline-double
【開始タグ】:<p class=”underline-double”>
【終了タグ】:</p>

<カスタムCSS>
.underline-double {
-webkit-text-decoration: underline double red;
text-decoration: underline double red;
}

 


 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-dotted
【ラベル名】:underline-dotted
【開始タグ】:<p class=”underline-dotted”>
【終了タグ】:</p>

<カスタムCSS>
.underline-dotted {
-webkit-text-decoration: underline dotted red;
text-decoration: underline dotted red;
}

 


 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-dashed
【ラベル名】:underline-dashed
【開始タグ】:<p class=”underline-dashed”>
【終了タグ】:</p>

<カスタムCSS>
.underline-dashed {
-webkit-text-decoration: underline dashed red;
text-decoration: underline dashed red;
}

 

 


 

蛍光ペンの塗りつぶし設定について

 

文字を蛍光ペンで塗りつぶして強調させたいのです!

【ボタン名】:penlight-blue
【ラベル名】:penlight-blue
【開始タグ】:<strong class=”penlight-blue”>
【終了タグ】:</strong>

<カスタムCSS>
.penlight-blue {
background: linear-gradient(transparent 40%, #66ccff 40%);
}

 


 

文字を蛍光ペンで塗りつぶして強調させたいのです!

【ボタン名】:penlight-yellow
【ラベル名】:penlight-yellow
【開始タグ】:<strong class=”penlight-yellow”>
【終了タグ】:</strong>

<カスタムCSS>
.penlight-yellow {
background: linear-gradient(transparent 10%, #fff001 0%);
}

 


 

文字に★印を付けて強調させる設定

 

文字に★印を付けて強調させたいのです!

 

【ボタン名】:b*
【ラベル名】:b*
【開始タグ】:<b class=”star”>
【終了タグ】:</b>

<カスタムCSS>
.star{
-webkit-text-emphasis: ‘★’ red;
text-emphasis: ‘★’ red;
}

※設定後、文字の大きさを変えると上記のようになりますよ!

 

 


 

文字に影文字を付ける設定

 

 

文字に影を付けたいのです!

【ボタン名】:shadow
【ラベル名】:shadow
【開始タグ】:<b class=”shadow”>
【終了タグ】:</b>

<カスタムCSS>
.shadow{
text-shadow:10px 10px 5px #aaa;
}

 


 

まとめ

 

以上が、文字の装飾の設定方法でした。

1回設定してしまえば、いつでも簡単に呼び出すことができます。

是非、自身のブログデザインに合った装飾をデザインしてみてくださいね。

 

 

 

簡単なCSS設定で蛍光ペン風やオシャレなアンダーラインでブログの文字装飾をデザインしよう!」への6件のフィードバック

  1. nuts

    こんばんは。
    ブログランキングから来ました。
    参考にさせていただきます。
    ありがとうございました。

    返信
    1. kuma 投稿作成者

      是非、是非、参考にしてみてくださいね。

      返信
  2. takafumi

    おはようございます。
    うわ~これはスゴイですね。
    こちらの記事を見ながらCSSコードをコピペして設定しようと思います。
    こういう知識は知らないといつまで経ってもわからないままです。
    ありがとうございます。

    返信
    1. kuma 投稿作成者

      懲りだすと、記事作成よりも時間がかかってます。
      コピペで色々と色を変えてみると楽しいですよ!

      返信
  3. chaseourdreams

    こんにちは。ランキングから来ました。すごい修飾技術ですね。びっくりしました。普通のワードでもなかなか実現できないことをWordPressでやっちゃうとはホントすごいです。早速マネさせていただきます。ありがとうございました。

    返信
    1. kuma吉

      こんにちは。
      この記事がお役に立てて、とても嬉しいです。
      頑張って作った甲斐がありました(^.^)

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です