【WordPress】蛍光ペン風下線マーカーのCSS簡単設定方法

 皆さんは色んなブログを見ている時にこのような下線マーカーを見たことはないでしょうか?

 私もこのマーカーを使用したいと思って色々見て設定方法を調べたので、皆さんに3色の通常(イエローピンクブルー)、太字(イエローピンクブルー)の2バージョンの簡単な設定方法を紹介します。

説明内容

・WordPressでの蛍光ペン風下線マーカーのコピペでのCSS設定方法
新エディタGutenbergにおいてプラグインのAddQuicktagで蛍光ペン風下線マーカーを簡単に使用する方法

WordPressでの蛍光ペン風下線マーカーの設定方法

 ブログを記載しているとブロック分けを行い、読者が見やすいように分割し表示を行うのですが、ブロック分けをどれだけ頑張っても文字が羅列されているだけだとどうやっても読むのが大変です。

 そのため文字だけのブログだと離脱率や平均セッション時間も短くなる傾向があります。そこで背景色文字色太字などを使うのですが、全体マーカーで文字の背景全体を色変えするより、下線マーカーで下部のみ色変えを行う方がおしゃれでまた見やすいため、活用をおすすめします。

 

 また上記の同じ内容をプレーンテキストで記載すると以下のようになります。


 ブログを記載しているとブロック分けを行い、読者が見やすいように分割し表示を行うのですが、ブロック分けをどれだけ頑張っても文字が羅列されているだけだとどうやっても読むのが大変です。

 そのため文字だけのブログだと離脱率や平均セッション時間も短くなる傾向があります。そこで背景色や文字色、太字などを使うのですが、全体マーカーで文字の背景全体を色変えするより、下線マーカーで下部のみ色変えを行う方がおしゃれでまた見やすいため、活用をおすすめします。


CSSでの蛍光ペン風下線マーカーの表示設定方法

 CSSというと拒否感を出すかもしれませんが、WordPressであればダッシュボードから、外観→カスタマイズ→追加CSSで簡単にCSSの追加設定が可能ですので、以下のコードを追加CSSの画面でコピペで追加して下線マーカーを皆さんも使用してみてください。

追加CSS設定方法
%MINIFYHTML45a73a50faae3841a4fc46eb2ff343c5132%
.pinkline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;} .yellowline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFF899 0%) repeat scroll 0 0;} .blueline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #B3E7FF 0%) repeat scroll 0 0;}

また色や蛍光ペンの太さを変えたい場合は以下の箇所を変更すると修正可能なので、試してみてください。カラーコードのリンクも以下に張っておきます。

[blogcard url=”https://www.colordic.org/”]

新エディタGutenbergでのHTMLタグ使用方法

 CSSの設定ができたらHTMLタグを使用して、蛍光ペン風下線マーカーを使用したい箇所に追記するのですが、HTMLタグを毎回追加していると面倒です。

 HTMLタグはどのようなものかというと以下の6つのコード(通常3つ、太字3つ)であり、HTMLエディタで使いたい部分で追加していくだけでも使用可能なのですが、今回は新エディタGutenbergにおいて簡単にワンクリックで使用するためのAddQuicktagプラグインの設定方法と使用方法について説明します。

<span class="pinkline">ピンク蛍光ペン風下線マーカー</span> <strong class="pinkline">ピンク蛍光ペン風下線マーカー太字</strong> <span class="yellowline">イエロー蛍光ペン風下線マーカー</span> <strong class="yellowline">イエロー蛍光ペン風下線マーカー太字</strong> <span class="blueline">ブルー蛍光ペン風下線マーカー</span> <strong class="blueline">ブルー蛍光ペン風下線マーカー太字</strong>

AddQuicktagプラグインでの設定方法

 AddQuicktagのプラグインのインストールから設定まで説明します。

 AddQuicktagはHTMLタグを簡単に貼り付けできる便利なプラグインです。今回の下線マーカー以外でも活躍でき、ブログ記事作成の時間短縮が可能なプラグインですので、入れて損はないかと思います。

1.プラグイン → 新規追加 →「AddQuicktag」を検索 → 今すぐインストール を行う。

プラグイン → 新規追加 →「AddQuicktag」を検索

2.AddQuicktagの「有効化」をクリック

AddQuicktagの「有効化」

3.AddQuicktagの「設定」をクリック

AddQuicktagの「設定」

4.赤枠に以下の内容を入力し、右端のチェックボックスにチェックを入れます。
右端のチェックは全ページに追加タグの機能を適用するチェックボックスとなります。

ボタン名:分かりやすい名称
開始タグ:<span class=”yellowline”>、<strong class=”yellowline”>等の設定したいHTMLタグ
終了タグ:</span> or </strong> の開始タグに対応した終了タグ

AddQuicktagプラグインでの設定方法

5.最後に「変更を保存」をクリックします。

上記で設定は完了となります。

AddQuicktagプラグインでの使用方法

 では実際に使用する方法について説明します。新エディタのGutenbergの場合はクラシックブロックでのみAddQuickタグが使用可能なため、「+」ボタンからクラシックブロックを検索し、選択します。

AddQuicktagプラグインでの使用方法

 そしてクラシックブロックにて下線を引きたい範囲を選択し、「Quicktags」→使用したいHTMLタグを選択します。この操作だけで下線を引くことが可能となります。

「Quicktags」→使用したいHTMLタグを選択

最後に

  今回は「【WordPress・CSS】蛍光ペン風下線マーカーの簡単設定方法」ということで、蛍光ペン風下線マーカーの設定方法からAddQuicktagの使い方までを初心者の方でも簡単に設定できるように解説しました。

 ただの背景色や色変え、ブロック分けを使うよりも、蛍光ペン風下線マーカーを使うことでおしゃれに読みやすくすることが可能です。

 ブログ記事を書くことに慣れてきたようであれば、文字装飾やブロック構成を取り入れていってみてください。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
今、一番売れているHTML本! 大反響! 8刷突破の大ヒット! Web制作に必要な知識がすべて身につく!
UMilCLhttps://umilcl.com
兼業ブロガー。メインは大手製造業システム企画・設計・プロジェクト管理。工場のプロセス制御が主な業務。 得意分野: プロセス制御と統計、機械学習、画像処理、システム技術 保有資格: プロジェクトマネージャー、情報処理安全確保支援士、ネットワークスペシャリスト、応用情報処理、第一種衛生管理者

Similar Articles

Comments

返事を書く

コメントを入力してください!
ここに名前を入力してください

Follow US

0ファンいいね
3フォロワーフォロー
89フォロワーフォロー
4,103フォロワーフォロー
0SubscribersSubscribe

Archive

Most Popular

EWWW Image Optimizerの設定方法と使い方【Webp対応】

画像のサイズが大きいことによる速度インデックスの低下に対して画像のサイズを圧縮する「EWWW Image Optimizer」での対策を説明します。

【ブログ運営報告】雑記ブログ5ヶ月目のPV数・収益【WordPress】

雑記ブログ UMilCL を開始して5か月が経過しました。 ただの技術系の会社員が雑記ブログを始めると、5か月でアクセス数・収益がどのようになるか、初心者ブロガーが参考にするために見ていただければと思います。定期報告4回目となります。

【7月1日営業再開】ディズニーシー休止対象と営業予定一覧

私もぜひ行きたいのですが、休止対象設備だけ紹介されており、私みたいなディズニー初級者は何が営業しているのか全然わからなかったので、東京ディズニーシーの営業中と休止予定のアトラクション、ショップ、レストラン、ショーを纏めてみました。

WordPressでブログを100記事書くとPV・収益はどの程度になるか?

私も実際にWordPressで雑記ブログを始めて、本記事を合わせて100記事となりました。陸の孤島と呼ばれるWordPressで独自ドメインを新規で取得し、4か月半で100記事を書くとPV・収益はどの程度になるかについて解説していきたいと思います。

OPPO IDの登録方法と登録した際にできること

OPPO IDとは、テーマストア、オンラインストレージ拡張、データ復元などOPPO端末にプリインストールされているOPPO独自のアプリ・機能を利用する際に必要になります。本記事ではOPPO Reno A等のOPPOスマートフォンの設定を行う際に「OPPO ID」の登録・設定について、どのような情報を要求されており、手順はどのようになっているかについて説明します。