ワードプレスで蛍光ペンを引いたかのような線を表示する

ワードプレス内、文章に蛍光マーカーを引いたように表示するcss

蛍光ペンを引いたときのように線を表示したい

ワードプレス内、文章に蛍光マーカーを引いたように表示するcss
photo:「Kate Ter Haar

文章が下手な僕でも強く主張したい事柄があります。
でも、うまく文中で強調できない。

ウェブは便利なもので、strongやインデント・段落をつかって
なんどかつじつまを合わせているけれど、長文になるとどこが
強調したい部分か判別がつきにくい。

て、ことでマーカーを引くことにしました。
ワードプレスでするには特殊な手段を使うのかと
思いましたが、cssとhmlを編集するだけでした。
普通のサイト作成と変わりないです。

CSS(スタイルシート)記述

.marker_y {
background-color: #FFFF00;
margin-left: 0.0em;
margin-right: 0.2em;
}
.marker_g {
background-color: #7CFC00;
margin-left: 0.0em;
margin-right: 0.2em;
}

html記述

<span class="marker_y">黄色マーカー文字</span>
<span class="marker_g">緑色マーカー文字</span>

yはyellow(黄色) gはgreen(緑)です。

注意:編集モードは「ビジュアル」ではなく「テキスト」で記述してください。

表示結果

上記設定をすると下記のように表示されます。

黄色マーカー文字
緑色マーカー文字

参照画像

黄色マーカー

黄色マーカーで引いたように表示

緑色マーカー

緑マーカーで引いたように表示した画像サンプル

ワードプレスcss変更方法

ダッシュボード画面→外観→テーマ編集へ進みます。

css_1

編集したいテーマのCSS(スタイルシート)を表示します。

css_2

 

記述したいcssソースコードを記述。
marker_y~をコピー&ペースト。
僕はわかりやすいように一番下に記述しました。

css_3

最後に「更新」ボタンを押すだけ。
もし、更新ボタンが表示されていない場合はcssファイルの
パーミッションを変更すると表示されると思います。

2 件のコメント

  • 助かりました。
    私も、newpost邪魔だと思っていましたけど、同じようにカスタマイズしか見つかりません。

    早速、消しました。マーカーも真似しました!

  • コメントを残す

    メールアドレスが公開されることはありません。