WordPress ブログ

ブログでよく見る 蛍光ペン表現方法(CSSコード)

蛍光ペン風のマーカー表現

本サイトはAffingerを利用しているのですが、デフォルトで以下のような表現ができます。

蛍光ペン風表現①

黄色の蛍光ペン(全幅)
ピンクの蛍光ペン(全幅)
ネコたろう
イメージと少し違う、、、

調査してみたところ以下のようなお洒落な表現ができることがわかりました。

蛍光ペン風表現②


黄色の蛍光ペン(半幅)
ピンクの蛍光ペン(半幅)
ネコたろう
これこれー!
やり方はどうやるの?

修正箇所はstyle.php

style.phpファイルを修正することで、蛍光ペン風表現を簡単にできます。

手順
①ダッシュボードの[外観]>[テーマの編集]
②編集するテーマを選択[WING-AFFINGER5]に変更
③style.phpを選択
④以下を追加する
.ymarker2(任意の名前) {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}
④最後に上記で作ったクラスで囲えばOK(※例はさらにstrongタグで囲んでます)
< span class="rmarker2"> 黄色の蛍光ペン(半幅)< /span>

まとめ

蛍光ペン風 表現は

テーマの「style.php」を編集することで簡単に表現できる

何かの参考になれたら幸いです。

---- 当サイトのPRをさせてください ----

当サイトは「社会人に役立つ仕事術、生活術、スキルアップ術」を発信しております。また来ていただけたらたいへん嬉しいです。

ぜひブックマークをお願いします。

iPhoneの方:
ブラウザ下部の[↑]ボタン > [ホーム画面に追加]もしくは[ブックマーク追加]

Androidの方:
ブラウザ右上の [︙]ボタン > [ホーム画面に追加(アプリをインストール)] もしくは[☆タップ]

PCの方:
ブラウザ 右上の[☆]ボタン、もしくはキーボード[Ctrl]+[D]

またのお越しをお待ちしております。

\面白かったらシェアお願いします/

-WordPress, ブログ
-,