情報商材 初心者 アフィリエイト ノウハウ 

さゆこの”ウシノアユミ”

css苦手だけどブログに蛍光ペン風のアンダーラインを引いてみたい!

読了までの目安時間:約 6分

 

 

太くて蛍光ペンで引いたようなアンダーライン←コレ

 

最近よく見かけるので「私も使ってみた~い!」 と、思ったんですけど、どうやらCSSを使うらしく・・正直cssはちょっと苦手なんですが、やってみたら意外と簡単に出来ました。

 

蛍光ペン風のアンダーラインはカラフルなので適度に使うことで記事も明るくなってグッと読みやすくなると思いますよ^^

 

 

 

蛍光ペン風のアンダーラインはどうやって引く?

この記述をコピペしてスタイルシートに貼り付けて↓

.marker_mizuiro {
background: linear-gradient(transparent 70%, #66ccff 70%);
}

HTMLでこうやって記述すれば↓

<span class="marker_mizuiro">太くて蛍光ペンで引いたようなアンダーライン</span>

 

こうなります↓

太くて蛍光ペンで引いたようなアンダーライン

 

スタイルシートのどこに書き込めばいいの?

cssを書き込む場所ですが、"style.css" 賢威なら "base.css" です。

取り敢えずそこの一番下に貼り付けて試してみて、反映されているかプレビューで確認してください。反映されてない場合はパソコンの F5 を押すなどして最新の状態に更新してみてくださいね。

 

 

わたしはここに書き込んでます↓

 

cssの貼り付け場所

 

 

蛍光ペンの色や太さを変えるには?

cssのカラーコードや数値を変えることで蛍光ペンの色や太さを変えることが出来ます。

 

 

 

例えば marker_mizuiro を、line_sorairo などに変えたりも出来ます。その場合、HTMLも<span class="line_sorairo">にします。「marker_mizuiro って言ったら水色の線を引いてね」といった具合にcssで書いて指定しているので、カラーを複数に増やす場合はそれに合わせて名称も変えてください。

 

 

太さの数値は大きくすれば細くなり、小さくすれば太くなります。

カラーコードはこちらを参考にしてください

カラーコード一覧表

 

 

コピペOK! cssのサンプル

スタイルシートにはこれをコピペ↓

水色のライン用

.marker_water {
background: linear-gradient(transparent 70%, #66ccff 70%);
}

 

黄色のライン用

.marker_yellow {
background: linear-gradient(transparent 70%, #ffff66 70%);
}

 

ピンクのライン用
.marker_pink {
background: linear-gradient(transparent 70%, #ff66ff 70%);
}

 

緑のライン用
.marker_green {
background: linear-gradient(transparent 70%, #66ffcc 70%);
}

 

 

で、HTMLはこうやって書く↓

 

<span class="marker_green">緑のライン</span>

緑のライン

 

<span class="marker_pink">ピンクのライン</span>

ピンクのライン

 

<span class="marker_water">水色のライン</span>

水色のライン

 

<span class="marker_yellow">黄色のライン</span>

黄色のライン

 

 

 

 

でもライン引くたびにHTMLを手打ちとか面倒くさすぎる・・

 

ので!私はプラグインAddQuickTagを使っています。

 

→ プラグインAddQuickTagって何?

 

まとめ

今流行り(?)の蛍光ペン風アンダーライン。

スタイルシートに書き込む必要があるのでちょっと敬遠してしまうかもですが、コピペして一番下に貼り付ければいいだけなので簡単にできます。HTMLもプラグインAddQuickTagを使えばビジュアルモードからの操作もできます!

 

cssは苦手な人は見ただけで拒絶するかもですが、少しづつこういったコピペなどの簡単な作業から慣れていくといいのかなと思います。

 

 

少しでもご参考になれば幸いです^^

 



 

タグ : 

ワードプレス関連   コメント:10

この記事に関連する記事一覧

コメントは10件です

  1. はじめまして☆
    ランキングからお邪魔しました^^

    蛍光ペン、いいですよね~♡
    すごく分かりやすくて、とっても参考になりました^^

    またお邪魔させてください☆
    応援ポチしていきまーす^^

    • さゆこ より:

      裕美さん はじめまして^^

      蛍光ペンは最近覚えました( ・´ー・`)
      けっこう見やすくなるので気に入ってます。

      応援ありがとうございました!

  2. snow より:

    こんにちは。
    snowと申します。
    ランキングから来ました。
    パソコンが苦手なので蛍光マーカーのようなオシャレなことはできないと思いましたが
    とても分かりやすくて参考になりました。
    また伺わせてください。
    応援していきます!

    • さゆこ より:

      snowさん こんにちは
      応援ありがとうございます!

      パソコン苦手でもポチポチいじってるとなんとなく出来たりします。
      わたしもまだ苦手意識ありますけどどうにかやれてますので^^

  3. パソッキー より:

    さゆこ さん
     
    パソッキーです、こんばんは。

    私もCSSは苦手ですが、
    アンダーラインは見た目がよくて
    目立つので試してみようと思いました。

    今回は画面のハードコピーつきで
    説明されていてとてもわかりやすいと
    思いました。

    いつも本当にわかりやすく記事にして、
    まとめて頂いているので
    とても参考になります。

    今後ともよろしくお願いします。
    応援完了です。

    • さゆこ より:

      パソッキーさん こんばんは!
      応援ありがとうございます。

      色付きのアンダーラインは最近覚えました
      人がやっていることを真似してみたくなる体質なんです(^_^;)

      少しでもご参考になれば嬉しいです^^

  4. ヨッシー より:

    ランキングより来ました。

    サイトを作りたくて勉強中です。
    蛍光色を使えるなんて、知りませんでした。
    使えるように、サイトの構築頑張ります。
    情報ありがとうございます。

    • さゆこ より:

      ヨッシーさん こんにちは!

      蛍光色だけじゃなくて他にもいろいろ出来ますよ~
      ボタンとか、見出しのデザインを変えたりも出来ますしね^^

      検索で「css 見出し」とかで検索するといろいろ出てきます。
      サイトづくりがんばってくださいね!

  5. トシカズ より:

    さゆこさん、こんばんは。
    前回のプラグイン、まだ入れてないのですが、
    なんかわからなくなってしまいました。
    プラグインを入れないとならないのでしょうか?
    応援していきますね。

    • さゆこ より:

      トシカズさん、こんばんは!
      あまり使わなければ入れなくても大丈夫じゃないですか?
      入力を楽にするためのプラグインなので。

      もし他にわからないことがあればいつでもメールしてくださって大丈夫ですよ^^

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
TOPへ戻る