太さを変更した蛍光マーカーってどうすれば使えるの？？
あなた、こんな疑問でやっと僕のブログに辿り着きませんでしたか？
ヾ(*´∀｀*)ﾉｷｬｯｷｬ
なるほどです。でも安心してください！！
蛍光マーカーの太さ（幅）は簡単に変えることが出来るんです。
そこで今回は、CSSとHTMLを少し触って「簡単に蛍光マーカーの太さ」を変えてみたいと思います。
これであなたのブログもゴージャスになること間違いなし！！
便利なプラグイン【Simple Custom CSS】
まずは、CSSを触るのに抵抗がある人も多いと思います。
なので、便利なプラグインを使いますね^^
このプラグインを使えば、CSSの編集をミスってもすぐに元に戻せるので初心者さんには有り難いですよね。
また、テーマを変えてもプラグインがCSSを間接的に管理しているので引き続き変更した設定を引き継げます。
①WordPressの管理画面から「プラグインの新規追加」を選択
②プラグインの検索窓に「Simple Custom CSS」と入力してEnter
③表示されたページからプラグインを選択して「有効化」
②プラグインの検索窓に「Simple Custom CSS」と入力してEnter
③表示されたページからプラグインを選択して「有効化」
一般的な方法で使えるようになります。簡単！！
では次に進みます～
「外観⇒Custom css」
以下のコードをコピーして下のサンプルのように貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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」にタグを登録しておくといつでも使えて便利です。
※色の順番は上から
黄色マーカー
緑色マーカー
水色マーカー
オレンジ色マーカー
|
1 2 3 4 |
<span class="marker_lightyellow">黄色マーカー</span> <span class="marker_lightgreen">緑色マーカー</span> <span class="marker_lightskyblue">水色マーカー</span> <span class="marker_lightsalmon">オレンジ色マーカー</span> |
はい、これで完成です^^
CSSの設定が出来ていないと上のHTMLタグを打ち込んでも蛍光マーカーが文字装飾として反映されませんので注意。
終わりに…
CSSもプラグインを使えば簡単で安全ですので、ぜひぜひやってみてくださいね。
色や蛍光マーカーの太さ（幅）も変えられますので！
それでは、最後までありがとうございました。
※登録後につまらないと感じましたらメール内でいつでも配信停止ができます
※メールアドレスなどのプライバシー情報は責任をもって管理いたします
※メールアドレスなどのプライバシー情報は責任をもって管理いたします
こんなにわかりやく説明していただき
ありがとうございます。すごいですね！
実際にやってみます。
応援して帰ります。
HARUMINさん
こんばんは、花月です。
ご連絡いただき有難うございます。
また、蛍光マーカの記事がお役に立てて嬉しいです^^
応援もありがとうございます。
今後ともよろしくお願いします。
花月より
感謝の気持ちを込めて♪