【CSS】ブログの文章を下線だけ蛍光ペンを引いたように装飾する方法

こんにちは、グッチです。

この記事では、HTMLやCSSを使ってブログの文章に蛍光ペンでマーカーを引いたような装飾をするやり方について説明します。

例1.文章の全体に蛍光ペンを引く
例2.文章の下線だけに蛍光ペンを引く

上の例1と例2であれば、例2のほうがおしゃれ風ではないでしょうか?

蛍光ペンでマーカーを引いたように、色や太さなども自由に簡単に変えることができますので、自分のブログに合わせてCSSを設定してみましょう。

 

CSSにコードを追加

ブログの文章を下線だけに蛍光ペンで線を引いたように装飾するために、まずはCSSにコードを追加していきます。

wordpressであれば、管理画面(ダッシュボード)内にある外観からテーマの編集を選択。

style.css(スタイルシート)に下記のコードを追加します。

カスタマイズからでも可能な場合がある

テンプレートによっては外観内のカスタマイズに追加CSSがある場合があります。そちらに追加しても反映されます。

.keikou {
  background: linear-gradient(transparent 60%, #ffff99 40%);
}

こちらは当ブログに入れているコードになります。

蛍光ペンコードの簡単な説明

CSSに追加したコードを簡単に説明しますが、まずは下記の画像を見てください。

先ほど紹介したコードは言葉にすると

文字全体の上から60%は透明の背景、下から40%は黄色にする

という風にしています。(CSSでのtransparentの意味は透明、透過

そして文字全体を100%とするので、“上から”と“下から”をあわせて100%で設定します。
(グラデーションっぽくもできるのですが、話がそれるので省きます)

なので・・・

“上から”の数字を増やし、“下から”の数字を減らせばこのように蛍光ペンが細くなり
“上から”の数字を減らし、“下から”の数字を増やせばこのように蛍光ペンが太くなる

もちろん、色を変えれば青にも緑にもオレンジにもすることができます。

僕は基本的に黄色の蛍光ペンで引いたような装飾しか文章には使いませんが、もしいろんな色を設定するのであれば先程のコードで『keikou』としている部分を変えればOKです。

green-line
blue-line
orange-line

みたいにわかりやすく設定するといいですね。

続いて、CSSに追加したコード蛍光ペン装飾を実際に文章で使う方法についてです。

 

蛍光ペン装飾の使い方

僕は文章で蛍光ペン装飾を使う部分は太字にするので、下記のようなコードで囲います。


<b class="keikou">指定の文章を黄色の蛍光ペンで下線部分に線を引く</b>

結果
指定の文章を黄色の蛍光ペンで下線部分に線を引く

classタグでコードを読み込んでいるだけで、もし太字にしなくてもいいという場合は下記のようにspanタグでclass指定しても線を引くことができます。


<span class="keikou">指定の文章を黄色の蛍光ペンで下線部分に線を引く</span>

結果
指定の文章を黄色の蛍光ペンで下線部分に線を引く

以上で、蛍光ペン装飾のやり方説明はおわりです。

 

おわりに

頻繁に今回設定した蛍光ペン装飾を使う場合はwordpressのプラグイン『Add Quicktag』に設定しておくと便利なのでおすすめです。

AddQuicktagの設定方法と使い方を紹介!効率よく記事が書くのに必須

2014.06.22

CSSのいじり方を覚えればブログを自分色にすることができます。

以前、記事で紹介したように画像を加工せずに影をつけることができたり、もしくはテンプレートを自由にカスタマイズすることができたり。

CSSで画像に影をつける方法について!ブログの見た目を綺麗に

2014.06.20

CSSは必須スキルではないですが、知れば遊べたりするので時間があるときに少しずつ覚えてみるといいですね。

メルマガでもたまにお話していますが、ブログのアクセスを伸ばすために装飾は直接的には関係ありません。

けど、読みやすい文章、読みやすい見た目のブログを作れば、1日5万PV、10万PVが当たり前になるほど1人あたりの閲覧ページ数は変わってきます

なのでぜひごちゃごちゃしすぎない程度にいじってみるといいですね。

それでは、最後までお読みいただきありがとうございました。

【プレゼント&PASS】ブログメール講座

※Gmailなど普段使っているメールアドレスを入力してください。

4 件のコメント

  • はじめまして airisuといいます。

    CSSをいじれると幅が広がり良いですよね。

    私も簡単なCSSは出来ますが・・・
    複雑になるとお手上げです!! 

    今回の蛍光ペンのやり方とてもわかりやすく簡単にできそうなので
    チャレンジしてみます。

    ありがとうございます。

    • コメント、ありがとうございます!

      僕もはじめは全然できなかったのですが、いろいろと触っていく中で何となくわかるようになって、今では自分の好きなようにカスタマイズするぐらいはできるようになりましたね。

      なんでもチャレンジしてみるのが一番だと思います!

  • こんにちは
    たしかに全部蛍光色でぬっちゃうよりは
    下線のようにすると文字がみやすいですね
    これはよいですね

  • コメントを残す

    メールアドレスが公開されることはありません。