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

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

最近はテンプレートに標準装備されているものも多いですが、そうでなければスタイルシートにcssを書き込んで使う形になります。

正直cssはちょっと苦手・・という方も多いかもですが、スタイルシートの一番下にコピペするだけなので簡単です。

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

蛍光ペン風のアンダーラインを使えるようにするには

蛍光ペン風のアンダーラインを記事内で使えるようにするには、使っているテンプレートのスタイルシートに予め「わたしが記事内で『marker_mizuiro 』って書いたらこの色のアンダーラインをこの太さで引いてね」という意味のcssを書き込みます。

そして記事の中で『marker_mizuiro 』と書き込むことで、スタイルシートに書いた色と太さでアンダーラインを引くことができます。

 

ということで、cssをコピーしていきましょう。

コピペOK!アンダーラインの

色のサンプルを4つ用意しました。

水色のライン

黄色のライン

緑のライン

赤のライン

.marker_blue {
background: linear-gradient(transparent 70%, #a4c6ff 70%);
}
.marker_yellow {
background: linear-gradient(transparent 70%, #ffff66 70%);
}
.marker_green {
background: linear-gradient(transparent 70%, #5bff7f 70%);
}
.marker_pink {
background: linear-gradient(transparent 70%, #ffbedaf 70%);
}

これをお使いのテンプレートのcssが書き込める場所(”style.css” など。賢威なら “base.css” )の一番下にコピペすればOKです。

記事内での蛍光ペンの使い方

記事の中ではこのように↓書くと反映されます。

<span class=”marker_blue”>水色のライン</span>

水色のライン

書くときはHTMLが反映されるテキストモードで書くようにしてください。

 

ただ、、アンダーライン引くだけでいちいちHTML書くの面倒くさいですよね。

プラグインAddQuickTagにタグを登録して使うとすぐにHTMLが呼び出せるので便利です。

プラグインAddQuickTagを設定して面倒なHTMLタグの入力を効率化!

 

AddQuickTagにコピペで登録できるようにHTML全部書いておきますね。

<span class=”marker_blue”>水色のライン</span>

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

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

<span class=”marker_pink”>赤色のライン</span>

アンダーラインの色や太さを変えるには

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

例えば marker_blue を、line_sorairo などに変えたりも出来ます。その場合、HTMLも<span class=”line_sorairo”>にしますカラーを複数に増やす場合はそれに合わせて名称も変えてください。

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

大きくなれば細くなる・・と、紛らわしいので間違えないようにです。

もうちょっと色を濃くしたいなど好みがあると思うので、色の選択はこちらのカラーコードを参考にしてください。

カラーコード一覧表

蛍光ペン風アンダーライン:まとめ

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

もしかしたら記事作成画面では反映されないかもしれないので、アンダーラインを引いたらプレビューで確認してください。

もしプレビュー画面でも反映されていなかったら、画面の更新をしたり、cssに間違いがないか半角スペースや英数字の打ち間違いなどチェックしてみてくださいね。

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

次の記事 >> プラグインAddQuickTagで面倒なHTMLタグの入力を効率化!

10 Comments

さゆこ

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

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

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

snow

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

さゆこ

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

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

パソッキー

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

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

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

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

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

さゆこ

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

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

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

ヨッシー

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

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

さゆこ

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

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

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

トシカズ

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

さゆこ

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

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

現在コメントは受け付けておりません。