太さ(幅)指定の蛍光マーカーで文字装飾「 css html」をコピペしよう

太さを変更した蛍光マーカーってどうすれば使えるの？？


あなた、こんな疑問でやっと僕のブログに辿り着きませんでしたか？


ヾ(*´∀｀*)ﾉｷｬｯｷｬ


なるほどです。でも安心してください！！
蛍光マーカーの太さ（幅）は簡単に変えることが出来るんです。



そこで今回は、CSSとHTMLを少し触って「簡単に蛍光マーカーの太さ」を変えてみたいと思います。


これであなたのブログもゴージャスになること間違いなし！！

便利なプラグイン【Simple Custom CSS】

まずは、CSSを触るのに抵抗がある人も多いと思います。


なので、便利なプラグインを使いますね^^


このプラグインを使えば、CSSの編集をミスってもすぐに元に戻せるので初心者さんには有り難いですよね。

また、テーマを変えてもプラグインがCSSを間接的に管理しているので引き続き変更した設定を引き継げます。


一般的な方法で使えるようになります。簡単！！



では次に進みます～


「外観⇒Custom css」




以下のコードをコピーして下のサンプルのように貼り付けます。

.marker_lightyellow {

background: linear-gradient(transparent 70%, #ffff66 70%);

}



.marker_lightgreen {

background: linear-gradient(transparent 70%, #90EE90 70%);

}



.marker_lightskyblue {

background: linear-gradient(transparent 70%, #87CEFA 70%);

}



.marker_lightsalmon {

background: linear-gradient(transparent 70%, #FFA07A 70%);

}

蛍光マーカーの線を細くしたい場合には『70%⇒80%』などにしてみてくださいね。

色の変更はカラーコード『#ffff66』などを他の色に！




◆最後は↓↓

プラグインの「AddQuicktag」にタグを登録しておくといつでも使えて便利です。

※色の順番は上から
黄色マーカー 緑色マーカー 水色マーカー オレンジ色マーカー

<span class="marker_lightyellow">黄色マーカー</span>

<span class="marker_lightgreen">緑色マーカー</span>

<span class="marker_lightskyblue">水色マーカー</span>

<span class="marker_lightsalmon">オレンジ色マーカー</span>

はい、これで完成です^^

CSSの設定が出来ていないと上のHTMLタグを打ち込んでも蛍光マーカーが文字装飾として反映されませんので注意。

終わりに…

CSSもプラグインを使えば簡単で安全ですので、ぜひぜひやってみてくださいね。

色や蛍光マーカーの太さ（幅）も変えられますので！



それでは、最後までありがとうございました。