【WordPress】強調文字を蛍光ペンでラインを引いたようなCSSカスタマイズ

【WordPress】強調文字を蛍光ペンでラインを引いたようなCSSカスタマイズ

WordPressでブログを書いていて、文字を強調したいことはありませんか?文字を強調する時にちょっと蛍光ペン目立つようにCSSをカスタマイズしてみたいと思います。

<b>~</b>で囲まれた文字に対して蛍光ペンで飾り付けを行う場合の、WordPressとCSSの記述の仕方を解説します。

ここで紹介するWordPressのテーマは「LION MEDIA」です。

スタイルシートの編集

WordPressの管理者ページから「ダッシュボード」→「外観」→「テーマの編集」からCSSの編集画面に行きます。

「CSS▼」→「content.css」を開きます。

 

CSSの記述

 

 

content.css」のどこでもいいので、上記のタグを記述します。

ちなみにMutakkoは、以下のように「content.css」の上の方に書いて、何のことか分かるようにコメントを記述しています。

 

 

タグの説明

タグ 説明
transparent 60% 60%の意味はグラデーションの割合
#ffff66 カラー色
カラー色の後の60% 下線の幅(数値が小さいと太くなり、数値が小さいと細くなる)

蛍光ペンの色を追加する場合

クラス名を変えて登録すると、蛍光ペンの色を複数用意することができます。

それでは、実際に複数の蛍光ペンを作ってみます。

 

 

黄色のラインを表示してみる

ピンクのラインを表示してみる

ブルーのラインを表示してみる

グリーンのラインを表示してみる

HTMLへの記述は以下のようになります。

 

このHTMLタグを毎回入力するのは大変です。そこで登場するのが「AddQuicktag」プラグインです。

 

AddQuicktag」プラグインを使ってボタン化してみましょう。

まとめ

出来ましたでしょうか?

ブログでは流行っている蛍光ペン風のラインですが、どうやって実現しているのだろう?と思っていた方もおられるかもしれませんが、意外と簡単にできたでしょ?

折角、複数のラインを作成しましたが、毎回HTMLでタグを入力するのは大変で面倒なので、次回は、タグを登録する方法を記事にしたいと思います。

 

WordPressのプラグインAddQuicktagのインストールと使いかたを以下に作りました。

 

今後共、Mutakkoのブログを宜しくお願いいたしますm(_ _)m

 

この記事が気に入ったら
いいね ! しよう

WordPressカテゴリの最新記事