ホームワードプレスで自作テーマ作成-L17 蛍光ペン風下線マーカーを作る-
2021年2月15日
ワードプレスで自作テーマ作成シリーズ
今回は「L17 蛍光ペン風下線マーカーを作る」方法をご紹介します。
蛍光ペン風マーカーを適用することによって文章にメリハリができ、大事な部分を目立たせることができます。
以下のような蛍光ペン風下線マーカーができます。
黄色い蛍光ペン風下線マーカー
黄色い蛍光ペン風下線マーカー（細）
ピンクの蛍光ペン風下線マーカー
ピンクの蛍光ペン風下線マーカー（細）
青い蛍光ペン風下線マーカー
青い蛍光ペン風下線マーカー（細）
黄色い蛍光ペン風下線マーカー
黄色い蛍光ペン風下線マーカー（細）
ピンクの蛍光ペン風下線マーカー
ピンクの蛍光ペン風下線マーカー（細）
青い蛍光ペン風下線マーカー
青い蛍光ペン風下線マーカー（細）
やり方はとても簡単で、CSSにコピペしAddQuicktagというプラグインに登録するだけ。
今回はこちらの記事を参考にさせていただきました。
①style.cssの編集
「style.css」に以下を記入してください。
黄色い蛍光ペンマーカー
黄色い蛍光ペンマーカー（細いライン）
ピンクの蛍光ペンマーカー
ピンクの蛍光ペンマーカー（細いライン）
ブルーの蛍光ペンマーカー
ブルーの蛍光ペンマーカー（細いライン）
②AddQuicktagに登録
「AddQuicktag」というプラグインを使うことで投稿画面からわずか2クリックで簡単に蛍光ペン風マーカーを適用できるようになります。
「AddQuicktag」のインストール方法、使用方法については以下の記事で解説しています。
https://realinfojpn.xsrv.jp/addquicktag-673.html
「AddQuicktag」の設定画面で以下のように入力し「変更を保存」をクリックしてください。
ボタン名：黄色蛍光ペン（任意）
ラベル名：黄色蛍光ペン（任意）
開始タグ：<strong class=”yellowline”>
終了タグ：</strong>
順番：任意の数字
ボタン名：黄色蛍光ペン細（任意）
ラベル名：黄色蛍光ペン細（任意）
開始タグ：<strong class=”yellowline-s”>
終了タグ：</strong>
順番：任意の数字
ボタン名：ピンク蛍光ペン（任意）
ラベル名：ピンク蛍光ペン（任意）
開始タグ：<strong class=”pinkline”>
終了タグ：</strong>
順番：任意の数字
ボタン名：ピンク蛍光ペン細（任意）
ラベル名：ピンク蛍光ペン細（任意）
開始タグ：<strong class=”pinkline-s”>
終了タグ：</strong>
順番：任意の数字
ボタン名：ブルー蛍光ペン（任意）
ラベル名：ブルー蛍光ペン（任意）
開始タグ：<strong class=”blueline”>
終了タグ：</strong>
順番：任意の数字
ボタン名：ブルー蛍光ペン細（任意）
ラベル名：ブルー蛍光ペン細（任意）
開始タグ：<strong class=”blueline-s”>
終了タグ：</strong>
順番：任意の数字
また、ビジュアルエディタ－、post、page、attachment、comment、edit-comments、widgetsにチェックを入れてください。（一番右のチェックマークにチェックを入れると全てにチェックを入れることができます。）
上記は蛍光ペン風下線マーカーを適用すると同時に文字も太文字になります。文字は通常の太さで指定したい場合は以下のように登録してください。
開始タグ：<span class=”pinkline”>
終了タグ：</span>
記事の投稿画面で蛍光ペン風下線マーカーを適用したい文章を選択し任意の下線マーカー名をクリックすると適用されます。投稿画面では適用されていないように見える場合、プレビューで確認してみてください。
コメント