WordPressの記事に違う色のアンダーラインを表示させる方法を解説!CSS不要で簡単

 

こんにちはKuroです。

 

みなさん、自分のサイトがユーザーにとって読みやすものなのか考えた事ありますか

ブログやサイトの記事に様々な装飾などしてユーザーに対して読みやすくすることがは非常に大事で時には検索順位にも影響します。

私もトレンドブログや特化ブログでも実際記事を書くときはかなり気を付けています。

そこで今回は、WordPressでブログの記事の、文字の下線(アンダーライン)を引く際に、文字の色はそのままに、アンダーラインの色だけを変更する方法を解説していきたいともいます。

この方法で難しいCSSなど使わなくても簡単に好きな色に変えられますし、アンダーラインの太さまも変更できるし、簡単にカスタマイズできる方法なので、ぜひ試してみてください。

アンダーラインの色を指定するタグを使用する

ブログを書いていると記事本文に強調したい部分があることが多いです。

WordPressのエディターにも太字、下線、蛍光ペン、文字サイズや文字色の変更できる機能はありますが、蛍光ペンで塗りつぶすとかなり見にくく、かつ汚くなります。

それにアンダーラインに関してはWordPressのエディターでは文字色と同じになりますし、太さなど変更する事が出来ません。

実際の所よくCSSなどを利用したアンダーラインの情報はありますが、実際の慣れない人にしてみるとかなり難易度が高いです。

なのでシンプルで簡単に設定でき、且つアンダーラインの太さや色も変更出来たらいいと思い、探してみるとタグを使った方法が一番簡単に設定できる方法にたどり着きました。

 

アンダーラインのタグは

ではアンダーラインのタグになります。

<span style=”border-bottom: solid 3px #ff0000;”>アンダーライン</span>

※ コピペOKです

これを使うと、私のブログのようなアンダーラインが引けます。

なのでアンダーラインの文字を好きな文字に変えるだけで強調したい文章が付けれます。

文字とアンダーラインの距離は、使っているテーマによって変わります。

タグの「3px」の部分の数字を変更することで、アンダーラインの太さを指定できます。

また「#ff0000」の部分は色コードなので好きな色をコード表からコピペして張り替えれば好きな色に変えることが出来ます。

なので自分だけのアンダーラインを作成することが出来ます。

カラーコード表はこちらから

個人的には赤系と黄色系をお勧めしています。

ただし余り原色に近いと目がちかちかするかもしれませんので注意してください。

 

 

AddQuicktagを利用すれば簡単設置

さて便利なタグですがいちいち入力するのは面倒ですよね。

そこで簡単かつ便利な方法で設置できるものとして「AddQuicktag」というプラグインを利用します。

一度先ほどのタグを「AddQuicktag」にセットすれば、ワンクリックで利用できるようになりますよ~

 

AddQuicktagに設定

まず、WordPressの管理画面のサイドメニューから、

[プラグイン]⇒[新規追加]と進み、右上の検索窓に「AddQuicktag」と入力します。

次に表示された「AddQuicktag」を、インストールして有効化します。

先生
プラグインの入力方法はこちらでも紹介しています。

 

次にWordPressの管理画面のサイドメニューから、

[設定][AddQuicktag]をクリック

 

するとタグを設定する画面が教示されるのでそれぞれ①~④を入力します。

自分で分かりやすいタグの名前

先ほどのコードの前半部分を入力

<span style=”border-bottom: solid 3px #ff0000;”>

先ほどのコードの後半部分を入力

</span>

すべてにチェックを入れます。

 

最後に下にスクロールして左下の[変更を保存]をクリックすれば設定は完了となります。

 

「ビジュアル」モード見てみると

 

「テキスト」モードでは

 

使い方は、簡単でアンダーラインを引きたい場所をクリック&ドラッグで指定してからアンダーバーの名前をクリックするだけです。

アンダーラインは色や太さは好みで変えてブログを装飾してください。

それでは最後までご覧いただきありがとうございます。

 

■新規ブログで1か月半で10万円を達成後その後1年以上連続で10万円以上を稼ぎ続けるノウハウなどを詰め込んだレポートがやっと完成しました。
※(2020年11月40万円達成)

レポートはメルマガに登録してくれた人に先着順でプレゼントしています。

ただし、このノウハウが出回ってしまうとまずいので、限定20名様とさせてくださいね!

今回のレポートでは、それぞれのレベルに合わせ、5つの章に分かれています。

・1章:挨拶やブログで稼ぐ仕組み      

・2章:実際に自分のブログを構築する準備など

・3章:ブログで稼いで行くための基本的なノウハウなど

・4章:より稼いで行くための考え方やノウハウなど

・5章:稼ぐ為に絶対に必要な事やその先へ

またメルマガでは

楽天など使い複数の収入源構築で収益をUPさせる方法や外注さんとの上手な付き合い方、誰にも教えたくないネタ選定の仕方、これからの安定ネタやライバル0のネタの探し方などもお伝えしていく予定です。

など他では流せない、やばい有料級の情報をメルマガで配信していきますので楽しみにしてくださいね!

ぜひメルマガ登録してあなたの本当の『夢』を叶えましょう♪

あなたの夢を全力で応援するKuroのメルマガ登録は
▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽

 

 

コメントを残す

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