太さ(幅)指定の蛍光マーカーで文字装飾【cssとhtmlのコピペ】はコレ

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

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

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

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

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

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

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

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

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

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

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

①WordPressの管理画面から「プラグインの新規追加」を選択
②プラグインの検索窓に「Simple Custom CSS」と入力してEnter
③表示されたページからプラグインを選択して「有効化」

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

では次に進みます～

「外観⇒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%);
}

.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>