【WordPress】HTMLを修正してリンクの下線を消す方法

WordPressで、投稿記事内のリンクの下にある線を消す方法を解説します。
下線の削除には、様々な方法がありますが、今回はHTMLを修正する方法の解説となります。

はじめに

今回は、記事における段落ブロックのHTMLを修正し、下記ように下線を消します。
HTMLを修正することで、記事内のリンクの下線を個々に削除することが可能となります。

このようにする→　秋拓技術学院

リンク

では、手順を追って説明していきます。

まず、段落ブロックに入力した文章にリンクを付けたものを用意します。
この時点では、リンクの下に下線が付いています。

次に下線を削除する（表示しない）設定を行いますが、HTMLを編集するので、段落ブロックをHTML編集モードに切り替えます。

画像のように、段落ブロックを選択すると表示されるメニューからオプション（縦に黒点が３つ並んでいるボタン）をクリックします。

下記のように表示されると、HTML編集モードに切り替わっています。

HTML編集モードで、記事を修正していきます。
今回は、リンクの下線を削除するので、下記の赤字の記述を追加します。
（style の前に半角スペースがあるので注意して下さい。）

<p class="has-watery-blue-background-color has-background"><a href="https://syutaku.blog/" style="text-decoration:none;">秋拓技術学院</a></p>

今回は、下線の削除に「text-decoration:none;」のように設定しましたが、この「text-decoration」には既定値が設定されており、下記のようになっています。

・下線あり（既定値）：text-decoration: underline;

・下線なし：text-decoration: none;

追記後、段落ブロックを選択し、オプション（縦に黒点が３つ並んでいるボタン）をクリックします。
そこから、「ビジュアル編集」をクリックし、段落ブロックの見た目を元に戻しておきます。

下記のように表示されれば、ビジュアル編集モードに戻っています。
また、リンクの下線が消えていれば作業は完了です。

リンク

ここでは、カスタムHTMLブロックを使用してリンクの下線が削除されたリンクを作成してみたいと思います。

まず、カスタムHTMLブロックを作成します。
画像のように「カスタムHTML」をクリックすることで使用できます。

カスタムHTMLブロックは、HTMLを直接記述することが可能です。
今回は、下記のように記述します。

<a href="https://syutaku.blog/" style="text-decoration:none;">秋拓技術学院</a>

実際に記述したものが下記の画像になります。

カスタムHTMLブロックでは、記述したHTMLがどのように表示されるかプレビュー機能を使用して確認することが可能なので、確認してみます。

ブロックのメニューより「プレビュー」をクリックします。

すると、下記のように表示されます。
＊プレビューでは、青い枠に囲われていますが、実際の記事では表示されません。

では、記事のプレビューを確認してみます。
下線の無いリンクが作成されました。

記事は以上です。リンクに標準で付いてくる下線ですが、付けたくないって方もいると思います。本記事を参考に消してみて下さい。