初心者でも簡単!WordPress 蛍光ライン(下線マーカー)を実装するプラグイン『AddQuicktag』の使い方

僕はブログには見た目より前に情報量、そして文章力を重視されると思ってたんだけど、最近では

 

うわぁ、文字が多すぎるぞぉ!
こんなもん読めるか!もっと綺麗で読みやすいブログに行こう!!

 

というような読者もいるらしいそうだ。嘆かわしい。ネットの世界でくらい見た目より中身をとれ。

そりゃNEVERまとめが検索に引っ掛かるわけだよ。中身カッスカスでも見栄えが良い方が優遇される時代になっているんだもの。

 

 

 

すまん、個人的鬱憤を書き殴りすぎた。

 

とはいえ、蛍光マーカー等を使って読者にとって『読みやすい』記事にすることは大事だとは思うので、今回 プラグイン『AddQuicktag』を使って蛍光アンダーライン(下線マーカー)を実装した。

 

 

そういうわけで、今回はWordpressで簡単に蛍光アンダーライン(下線マーカー)実装できるAddQuicktagの活用方法についてまとめる。

 

 

 

 

スポンサーリンク

WordPressで下線マーカー(蛍光)を実装する方法

それではまず最初に手順について説明させていただくね。

 

 

今回は『AddQuicktag』というプラグインを使っていく。

CSS、HTMLに疎い初心者の僕でも10分ほどで実装できたことから、手順通りに行えば作業時間は大体 5~15分ほどを見積もっていただければ大丈夫だろう。

 

 

設定する箇所『追加CSS』とインストールする『AddQuicktag』の詳細設定の2カ所だけ。

 

 

そもそも『AddQuicktag』って何よ?ワケわからないプラグインなんて怖くてダウンロードできないんだけど?

 

 

という方もいらっしゃることなので簡単に『AddQuicktag』を説明すると、

文章装飾などで使いたいHTMLタグを登録して、記事編集時にパパっと使えるするようにするプラグインのことだ。確実に記事の執筆時間の短縮につながるので、迷っている方は是非 この際インストールしてみてほしい。

 

 

今回紹介する蛍光下線(アンダーライン)以外にも、特定のアイコンを表示したい場合にも使えたりする。要は『お手軽ツール』的なものだと思ってほしい。

 

 

おおまかな手順としては

こんな感じ。

3ステップで誰でも簡単、だと思う。

 

 

 

 

それでは紹介していくぞ。

 

 

 

①:追加CSS

ダッシュボードから外観>カスタマイズを開こう。

 

 

 

 

開いたら追加CSSに実装したいHTMLを追加していこう。

 

 

 

 

 

今回実装するのは蛍光アンダーライン(下線マーカー)のHTML。

追加するコートについては見本があるので最初はそちらを使用すると良いだろう。

 

 

 

追加するコード(CSS見本)

普通の蛍光マーカー(アンダーライン)のCSS見本は下の通り

/*黄色マーカー*/
.yellowline {
background:linear-gradient(transparent 60%, #ffff89 0%) ;
}

/*ピンクマーカー*/
.pinkline {
background:linear-gradient(transparent 60%, ffa8ff 0%) ;
}

/*青マーカー*/
.blueline {
background:linear-gradient(transparent 60%, #8ec6ff 0%) ;
}

上が蛍光アンダーライン(下線マーカー)のCSS例。

初心者の方は、上のヤツをコピーして貼り付けると良いだろう。

 

 

コード内容について解説していくと、

 

コード内容
.blueline(☜名前、分かりやすい名称に設定しよう

{background:linear-gradient(transparent 80%(☜1:線の太さ),

#8ec6ff(☜2:色) 0%(☜3:透明度)) ;}

 

という具合。

それぞれ簡単に解説するぞ。

 

 

1:線の太さ

線の太さ、はパーセンテージを高くすると細くなる。下のような感じ。

 

0%

20%

40%

60%

80%

100%(もはや無)

 

 

 

細いラインを作りたい場合はパーセンテージを高めよう。

 

ちなみに細い蛍光マーカー(アンダーライン)のCSS見本は下の通り

/*黄色マーカー(細)*/
.yellowline_narrow {
background:linear-gradient(transparent 80%, #ffff89 0%) ;
}

/*ピンクマーカー(細)*/
.pinkline_narrow {
background:linear-gradient(transparent 80%, ffa8ff 0%) ;
}

/*青マーカー(細)*/
.blueline_narrow {
background:linear-gradient(transparent 80%, #8ec6ff 0%) ;
}

 

 

 

 

2:色

#から始まってるのは色、カラーコードだ。

HTMLカラーコードで各種、色のコードが分かるのでそちらを参考にしてほしい。色、というのはオリジナリティを出しやすいと思うので、各自 好みの色を設定するように!

 

 

3;透明度

透明度、はパーセンテージを高くすると透明度が高くなっていく。下のような感じ。

0%

20%

40%

60%

80%

100%

 

 

 

 

 

無事、コードを入れ終わったら『更新』ボタンをクリックして手順② 終了

 

追加できたら次。『AddQuicktag』をインストールしていく。

 

 

 

②:『AddQuicktag』をインストールする

まずはWirdpress管理画面(ダッシュボード)。

上のように『プラグイン』から『新規追加』

 

 

 

検索欄に『AddQuicktag』と入力。

 

 

上の画像のように若葉のようなデザインのアイコンで『AddQuicktag』が出るので、そちらをインストールしよう。『今すぐインストール』をクリックしてインストールが完了したら『有効化』

 

 

有効化をクリックしたらプラグイン一覧に

というように『AddQuicktag』が追加されていることを確認できたら無事 インストールが完了。

 

設定、をクリックして最終手順に進もう。

 

 

 

 

③:AddQuicktagの設定

それでは『AddQuicktag』の設定をしていこう。

 

 

マーカー1つにつき

  1. ボタンの名称
  2. 開始タグ・終了タグ
  3. チェック欄

の設定が必要。

 

 

 

ボタンの名称は名前の通り、分かりやすい名前をつけよう。

上の赤丸で囲んだ部分のように、順番がめちゃくちゃだと僕のように若干 使い勝手が悪くなるので設定時、順番についても注意したほうが良いと思われる。

 

 

 

開始タグ、は

<span class=”①でつけた名前(例:)yellowline”>

終了タグは

</span>

 

でOK。

 

よくある間違いとしては、①で『.yellowline』と設定したと思うんだけど、『 . 』は名前に含まれないからね。注意してくださいまし。

 

 

そして右端の追加タグを全ページで使えるようにチェックをすれば完了。

一番右の✓ですべての項目にチェックが入るので、そちらも活用してくれ。

 

 

 

最後に『変更を保存する』をクリックしたら手順③終了。

 

設定は以上。それでは最後、実際に蛍光下線(アンダーライン)を使ってみよう。

 

 

 

 

蛍光下線(アンダーライン)の使い方

使い方は超簡単。

 

まず、下線を引きたい文を選択。

 

 

『AddQuicktag』の選択項目から引きたい色、タイプの蛍光下線(アンダーライン)を選択。

 

 

で、作業終了。

記事編集画面からは下線が引かれているか確認できないので、レビューを確認。

 

 

完了!!!!

 

 

引きたい文を選択

 

 

 

 

 

テキスト入力画面では

こんな感じでタグが追加されているので、手順としては

 

1:引きたい蛍光下線(アンダーライン)タグを一度クリック

2:文章を入力

3:蛍光下線(アンダーライン)タグをクリック

 

で、完了ね。

 

 

 

 

 

 

 

 

まとめ

以上、AddQuicktagの活用方法だった。

 

個人的に忘れやすいポイント、次回設定するときに注意すべきポイントだと感じたところはピンク(細)マーカーを引いておいた。

 

 

今回紹介した『AddQuicktag』ではご覧のように蛍光下線(アンダーライン)やアイコン、囲み線なんかも手っ取り早くTag付けできるので、執筆時間の大幅短縮に繋がる。是非 この機会にインストールしてみてはいかだだろうか。

 

 

 

 

活字離れが顕著な世の中らしく、YoutubeだのTiktokだの動画アプリが凄まじい人気だけど、なにか未知の分野を学ぶ、知るには活字が一番 手っ取り早いと思う僕だ。自分のペースで情報に触れられるから動画のように何度も巻き戻したりすることも少ないので混乱しづらいというメリットもある。

一時期 

 

あっ、でも動画を2倍速にすれば情報量も格段に上がるぞぅ!

 

と思って実践したことがあったが、超おススメしない。聞き取れないことはないけど、やっぱり混乱するし、僕の場合 日常生活では『こいつ話遅いなぁ…』と無駄にイライラすることになった。やっぱり活字、文字による勉強が一番 コスパが良いと思うのだ(もちろんジャンルによるが)。

 

 

人に講釈垂れるほどではないが、良い文章力鍛錬本をいくつか知っているので、この際そちらも是非。

 

 

 

 

何度も言うけど 見栄えの良いブログというのは一見 一目を引きやすいけど、中身がスッカスカだと分かった途端に信頼度がストンと落ちるぞ。

 

 

一見 美人な化粧の上手い女と、あまり目立たないけどよく見ると可愛い女、諸君はどっちと付き合う? ざわちんと多部未華子、どっちがいい?

 

 

 

 

 

最後 イマイチ分からん例を出してワケわからなくなっただろうが、とにかくブログには見栄え、文章力が大事なのだ。これ以上NEVERまとめみたいなサイトが乱立しないためにブロガー初心者の方はその点 留意するように!頼む、両目が¥になってるアフィリエイターばっかりに検索結果占領されるようなことにしないでくれ!

 

 

それでは

 

 

 

 

 

 

スポンサーリンク
おすすめの記事