読者です 読者をやめる 読者になる 読者になる

North-Geek

North-Geek(ノース・ギーク) 北海道札幌市在住のWebプログラマー・エンジニア

北海道札幌在住のWebプログラマーのブログです。

コピぺでOK!CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】

Webデザイン-css blog-はてなブログ blog blog-カスタマイズ

f:id:northgeek:20160223233044j:plain

前回に続き「コピペでブログをカスタマイズ」できる方法を紹介します。今回は「蛍光ペン」です。




前提として

f:id:northgeek:20160223231649j:plain

<b>タグで囲われた箇所をマーカーになります。

ソースコードを貼り付ける場所

f:id:northgeek:20160215211628j:plain

  1. デザイン
  2. カスタマイズ
  3. デザインCSS

上記の順番で「デザインCSS」を開きます。


バックアップ

元に戻せるように、バックアップは必ず取るようにしてください。ブログをカスタマイズする際は基本ですね。


蛍光ペン10色


蛍光緑

マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #00ff00 60%)!important;
	background: -o-linear-gradient(transparent 60%, #00ff00 60%)!important;
	background: linear-gradient(transparent 60%, #00ff00 60%)!important;
}


グリーン

マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #90ee90 60%)!important;
	background: -o-linear-gradient(transparent 60%, #90ee90 60%)!important;
	background: linear-gradient(transparent 60%, #90ee90 60%)!important;
}


ピンク

マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: -o-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: linear-gradient(transparent 60%, #ff1493 60%)!important;
}


マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #ff66ff 60%)!important;
	background: -o-linear-gradient(transparent 60%, #ff66ff 60%)!important;
	background: linear-gradient(transparent 60%, #ff66ff 60%)!important;
}


黄緑

マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #7cfc00 60%)!important;
	background: -o-linear-gradient(transparent 60%, #7cfc00 60%)!important;
	background: linear-gradient(transparent 60%, #7cfc00 60%)!important;
}


黄色

マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #ffff00 60%)!important;
	background: -o-linear-gradient(transparent 60%, #ffff00 60%)!important;
	background: linear-gradient(transparent 60%, #ffff00 60%)!important;
}


水色

マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #1e90ff 60%)!important;
	background: -o-linear-gradient(transparent 60%, #1e90ff 60%)!important;
	background: linear-gradient(transparent 60%, #1e90ff 60%)!important;
}


マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #4169e1 60%)!important;
	background: -o-linear-gradient(transparent 60%, #4169e1 60%)!important;
	background: linear-gradient(transparent 60%, #4169e1 60%)!important;
}


灰色

マーカー蛍光ペンです

.entry-content b{
	background: -webkit-linear-gradient(transparent 60%, #d3d3d3 60%)!important;
	background: -o-linear-gradient(transparent 60%, #d3d3d3 60%)!important;
	background: linear-gradient(transparent 60%, #d3d3d3 60%)!important;
}


アクアマリン

マーカー蛍光ペンです

.entry-content b {
	  background: -webkit-linear-gradient(transparent 60%, #66ffcc 60%)!important;
	  background: -o-linear-gradient(transparent 60%, #66ffcc 60%)!important;
	  background: linear-gradient(transparent 60%, #66ffcc 60%)!important;
}

さいごに

いかがでしたでしょうか。コピペのみでOKなので簡単に蛍光マーカーを使えることができますね。以上、コピペシリーズ第三弾でした。コピペシリーズは人気なのでこれからも続けていきたいと思います。

何か気になるカスタマイズ方法があれば、コメントかツイッターのメッセージでお願いします。


コピペシリーズオススメ記事

www.north-geek.com

Copyright© North-Geek All Rights Reserved.