【ブログがキレイ!!】コピペで｢蛍光ペン｣を引いたように表示させる

記事を読みやすくする方法の1つとして、文字絵を太くしたり・赤文字にしたりしますよね。
でも本物のノートみたいに蛍光ペンで書いたような線を表示させたいと思ったことはありませんか？

このブログでも蛍光ペン風のマーカー表示をさせていますが、設定は5分もあれば誰でも出来てしまいます。

今回はボタン1つで、蛍光ペン風マーカー表示をできるようにする方法を紹介します！

蛍光ペン風マーカーのCSSとHTMLを紹介

ミドリマーカー

【CSS】

ラインの太さや色は自由に変更することができます。

そしてボタン1つで表示させるには、「AddQuicktag」というプラグインが必要なのでインストールをしていきましょう。

AddQuicktagの設定

1. インストールをしたら、有効化して｢設定｣→「AddQuicktag」で設定画面を開きます。
2. 各項目にメニュー欄で表示させる名前とHTMLコードと番号を入力します。
   
   <strong class=“MIDORImarker”></strong>

3. 最後に1番右の□にチェックを入れましょう。

AddQuicktagの設定はこれで完了です。

style.cssへ記入

この先テーマ編集をしますが、style.cssの記入に不安がある場合は1度バックアップを取る事をオススメします。

｢外観｣→｢テーマ編集｣→｢style.css｣を開いてCSSコードを入力していきます。

1番下にcssコードを入力しますが、直上に別のコードがある場合は１行改行して見分けがつくよう間に空白を作りましょう。

以上で設定は完了です！

記事のビジュアル画面へ行くとAddQuicktagで先ほど作ったタグの名前が追加されているので、１クリックで記事に蛍光ペン風マーカーが表示されます。

テーマでアフィンガー４/５を使用している場合

｢外観｣→｢カスタマイズ｣→｢追加CSS｣を開き、コードを入力すればOK。

子テーマにstyle.cssがない場合

子テーマにstyle.cssがない場合は、FileZillaなどを使って親テーマから子テーマへstyle.cssをコピーして行う必要があります。
直接親テーマに記入すると、テーマのバージョンアップをした時に今日入力したCSSが消えてしまいます。

蛍光ペン風マーカーCSSサンプル

蛍光ペン風マーカー

蛍光ペン風マーカー

蛍光ペン風マーカー

CSS・HTML追加で保存ができないときの対処法

保存ができずエラーが発生する場合は、サーバー側のセキュリティー設定を変更すれば解決できます。

主な原因はWAF設定が有効化されており、CSSの変更やHTMLの追加記入をサイトの改ざんと勘違いしてブロックしてしまうのです。

20分ほどで反映されるので、時間が経ったら保存ができるよになります。

ユキタケ

設定が終わったら、忘れずにWAF設定を有効化しておきましょう。