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

 

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

 

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

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

見比べてみましょう。

 

 

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

下線のみの黄色マーカー

 

 

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

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

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

 

マーチマーチ

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

フォロラーフォロラー

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

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

 

ではまず、デフォルトの黄色マーカーの付け方ですが、WordPressでは『TinyMCE Advanced』というプラグインを使用して、背景色を変える方法が一般的となっています。

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』に貼ったコードの以下の部分の英数字を変えるだけです。

 

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

 

色の変更については、こちらの⇒WEB色見本が参考になりますよ。

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

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

 

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

 

まとめ

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

あまりCSSに触りたくない僕でもできた方法なので、ぜひ参考にしてみてくださいね。

 

マーチマーチ

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

フォロラーフォロラー

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

 

お知らせ

当ブログでは、『WordPressブログの構築』や『アドセンス取得』や『ブログの収益化』などをまとめたノウハウ集・アフィリマーチを、ブログ読者限定でプレゼント中です。

アフィリマーチは、総再生時間1400分、200以上の動画で、初心者でもわかりやすいブログ・ノウハウ集となっています。

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