WordPress記事の書き方

WordPress文字の下に黄色マーカーでアンダーラインを引く方法

人生好転マーチ無料メール講座バナー
 
 

※プレゼントは登録されたメールアドレス宛にご案内します。
※『@icloud.com』や携帯キャリアでのご登録はメールが届きにくくなっております。
※新規アドレスは『Gmail』『Yahooメール』がおすすめです。
※お預かりした個人情報は厳重に管理し、プライバシーを遵守いたします。

WordPressで文字の下に黄色マーカーで下線を引くイメージ、イラスト

 

今回は、WordPressで文字の下に
黄色マーカーでアンダーライン(下線)を引く
方法について解説していきます。

 

WordPressでは、
文字の下地(背景色)を黄色くして、
その部分を強調することができます。

しかし、他の人のブログを見てみると、
時々、文字の下部分にだけ
ラインを引いたものを見かけることがありませんか?

 

その2つを見比べたのが以下の通り。

 

 

デフォルトの黄色マーカー

 

下線のみの黄色マーカー

 

 

このように、『文字の下部分のみ』に
マーカーで線を引いたような感じにするのは、
WordPressでは
ちょっとした設定をしなくてはいけません。

 

ただ、一度設定してしまえば後は楽ちんです。

 

なのでこれから、
初心者でもすぐに
黄色いアンダーライン装飾が使える
設定方法について、
できるだけわかりやすく
解説していきたいと思います!

 

マーチ
マーチ
下線のみの黄色マーカーだと文字色を変えても遜色ないので、文字装飾のバリエーションが広がるよ

ねこくん
ねこくん
下線マーカーだと上品な感じがして良いですよね!

デフォルトの黄色マーカー

 

ではまず、
デフォルトの黄色マーカーの付け方ですが、
WordPressでは

『TinyMCE Advanced』

というプラグインを使用して、
背景色を変える方法が一般的となっています。

 

TinyMCE Advancedは、
WordPress(ビジュアルモード)での
記事作成時の文字装飾が
カンタンに行えるようになるプラグインです。

 

TinyMCE Advancedで記事作成時の文字装飾をカンタン設定! 今回は、WordPressの記事作成時に 欠かせない超便利なプラグイン 『TinyMCE Advanced』を紹介したいと思...

 

TinyMCE Advancedを有効化すると、
記事作成画面(ビジュアルモード)の上部に
文字装飾がボタン一つで行えるアイコンが
『ズラーッ』と一覧で並ぶようになります。

 

TinyMCE Advancedの文字装飾ボタン

 

 

背景色を変更して
薄い黄色のマーカーを引く時は、
文字を選択して背景色ボタンから
『Light Yellow』に変更するだけでOK
です。

 

 

TinyMCE Advancedで背景色を黄色マーカーっぽくする方法

 

 

文字の下に黄色マーカーでアンダーラインを引く方法

 

ではこれから、
文字の下に黄色マーカーで
アンダーライン(下線)を引く方法について、
ひとつずつ解説していきましょう。

 

①まずはWordPress管理画面・左のメニュー欄から、『固定ページ』⇒『新規作成』を開きます。

 

WordPressの『固定ページ』から『新規作成』を開く画面

 

 

 

②新規作成画面が開いたら、『テキストモード』にして以下のように入力しましょう。

 

固定ページ、テキストモード、黄色下線

 

以下コードを、本文に入力して下さい。
<em class=”yellow-under”>黄色</em>

 

ポイント!
  • タイトルはわかりやすい名前をつける。
  • コードがうまくコピペできない時は、コードを貼り付けた時に半角記号が全角記号に誤変換されていないかチェックしましょう。
  • 特にダブルクォーテーション『”』が全角になってしまうことがあるので要注意!

 

 

 

③コピペできたら『公開』をクリックしましょう。

 

黄色下線、固定ページ、公開

 

 

 

④次はWordPress管理画面・左のメニュー欄から、『外観』⇒『カスタマイズ』を開きます。

 

WordPress管理画面、外観、カスタマイズを開く

 

 

 

⑤カスタマイズメニュー欄にある『追加CSS』を選択し、以下のように入力しましょう。

 

カスタマイズ、追加CSS、黄色下線

 

以下コードを、本文に入力して下さい。

em.yellow-under {
font-style:normal;
font-weight:normal; 
background:linear-gradient(transparent 60%, #ffff66); }

 

 

 

⑥コピペできたら『公開』をクリックしましょう。

 

追加CSS、黄色下線コード、公開

 

 

これで黄色下線のマーカーを引けるようになりました。

先ほどの固定ページでプレビューを確認し、
文字に色が付いていたら成功です。

 

 

今後、黄色下線を引く時は、
テキストモードで以下のコード

『<em class=”yellow-under”>黄色</em>』

を入力するだけでOKです。

 

 

ただ、毎回このコードを入力するのは面倒なので、
プラグインを使って簡単に
黄色下線を引けるように設定
していきたいと思います。

 

AddQuicktagで黄色下線を設定しよう

 

『AddQuicktag』は、
よく使うタグを登録し、
ワンクリックで呼び出すことのできる
WordPressプラグインです。

 

今回は、このAddQuicktagを使って、
先ほどの『黄色下線タグ』を
すぐに使えるように設定してみましょう。

 

 

①まずはWordPress管理画面・左のメニュー欄から、『プラグイン』⇒『新規作成』を開きます。

 

WordPress管理画面、プラグイン、新規作成

 

 

 

②検索窓に『AddQuicktag』と入力し、AddQuicktagが表示されたら、プラグインをインストールしましょう。

 

AddQuicktagを検索窓に入力

 

 

 

③インストールができたら、『有効化』をクリックしましょう。

 

AddQuicktag、有効化

 

 

 

④有効化ができたら、次はAddQuicktagの設定画面へと進みます。

 

AddQuicktag、設定画面への進み方

 

 

 

ちなみに、管理画面から設定画面へと進む場合は、
『プラグイン』⇒『インストール済みプラグイン』へと進み、
そこからAddQuicktagの設定をクリックしましょう。

 

AddQuicktag、管理画面から設定画面への進み方

 

 

 

⑤AddQuicktagの設定画面は以下のようになります。

 

AddQuicktag、設定画面、デフォルト

 

 

 

⑥以下のように入力し、黄色下線用のタグを作っていきます。

 

AddQuicktag、黄色下線、タグ設定

 

  • ボタンのラベル
    ⇒ 固定ページと同じ名前を付けましょう
  • 開始タグと終了タグ
    上段⇒ <em class=”yellow-under”>
    下段⇒ </em>
  • アクセスキーと順番
    ⇒ 空欄でOK
  • ビジュアルエディター
    ⇒ すべてにチェック

 

 

ポイント!
  • 開始タグと集力タグは、先ほど固定ページに入力した<em class=”yellow-under”>黄色</em>を、<em class=”yellow-under”>と</em>に分けるということですね。
  • コードがうまくコピペできない時は、コードを貼り付けた時に半角記号が全角記号に誤変換されていないかチェックしましょう。

 

入力ができたら
『変更を保存』をクリックして、設定が完了となります。

次は、AddQuicktagで
作成したボタンが反映されているか確認してみましょう。

 

 

 

⑦左のメニュー欄から、『投稿』⇒『新規作成』へと進み、テキストモードにして『黄色下線』のボタンが出ていればOKです。

 

AddQuicktag、無事に反映、テキストモード

 

 

 

ちなみに、ビジュアルモードの場合は、
AddQuicktagのボタン内に登録されています。

 

AddQuicktag、無事反映、ビジュアルモード

 

 

適当に文章を入力して、
プレビューで確認してみましょう。

 

AddQuicktagで文字に黄色下線を引いた画面

 

うまくAddQuicktagで
『黄色下線』の設定ができました♪

 

 

 

*色の変更について*

ここでは、アンダーラインの
色の変更について解説しています。

 

色の変更は、
『追加CSS』に貼ったコードの
以下の部分の英数字を変えるだけでOKです。

 

下線マーカー、色の変更、追加CSS

 

色の変更については、
以下のリンク先が参考になりますよ!

 

▶WEB色見本

 

 

ちなみに、
文字を太くする場合は、
3行目の『normal』を消して『bold』
にすればOKです。

 

下線の太さは、
4行目の『60%』の部分で調整
することができますよ。

 

後は同じ要領で、
様々な色のラインを登録してみてくださいね。

 

まとめ

ということで今回は、
WordPressで文章に下線マーカーを
引く方法について紹介してみました。

あまりCSSに触りたくない人でも、
手順通りにすれば設定できるはずなので、
ぜひ、参考にしていただければと思います。

 

マーチ
マーチ
文字装飾については、▶WordPressで文章に囲み枠をつける方法をわかりやすく解説の記事もオススメだよ

ねこくん
ねこくん
この2つを使えるようになるだけで、読みやすさだけじゃなくオリジナリティも増しますね!

 

お知らせ

当ブログでは、
『WordPressブログの構築』や
『ブログの収益化』などをまとめたノウハウ集を、
ブログ読者限定でプレゼント中です。

このノウハウ集は、
総再生時間1400分、
200以上の動画で、
初心者でもわかりやすい内容となっています。

 

興味のある方は、ぜひこの機会に、
下記フォームより手に入れてくださいね!

人生好転マーチ無料メール講座バナー
 
 

※プレゼントは登録されたメールアドレス宛にご案内します。
※『@icloud.com』や携帯キャリアでのご登録はメールが届きにくくなっております。
※新規アドレスは『Gmail』『Yahooメール』がおすすめです。
※お預かりした個人情報は厳重に管理し、プライバシーを遵守いたします。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です