HTMLにCSSを埋め込み、リンクの下線を消す

今回は、HTMLにCSSを埋め込みます。

CSSのコードは、テーマファイルエディターなどからstyle.cssに書き込みますが、ブログを運営し続けていくとどんどんstyle.cssが長くなります。長過ぎるstyle.cssは、読み込むのに時間がかかりSEO的に良くないとも聞きます。

頻繁に他に流用することのない、部分的な修正のための短いコードならば、HTMLに埋め込んだ方がいいかもしれないと思いました。

HTMLにCSSを埋め込み、文字サイズを指定する

今回は、画像やテーブルなどにキャプションを付けるときに使われる、figcaptionタグにCSSコードを埋め込みます。アンカータグにCSSコードを埋め込むことができたので、ブログの他の部分でも同様のことができるのではないかと思いました。

アンカータグにCSSのコードを埋める
HTMLにCSSを埋め込もう

アンカータグにCSSのコードを埋める

リンクの下線を消したい

通常、リンクを設定すると、下の画像のように下線が表示されます。
その下線を表示したくないので、アンカータグの中にCSSのコードを埋めます。

アンカータグを修正する

【修正前】

<a href="https://www.hibitsoft.ir/Uninstaller.html" target="_blank" rel="noopener">

【修正後】

<a href="https://www.hibitsoft.ir/Uninstaller.html" target="_blank" rel="noopener" style="text-decoration: none;">

下線が表示されなくなった

アンカータグにコードを埋め込んだ結果、リンクの下線が表示されなくなりました。

HTMLにCSSを埋め込もう

記事編集画面の一番下にあるカスタムCSS欄で、その記事用のCSSを追加することもできるようなのですが、調べても使い方がよく分からなかったので他に方法はないかと調べました。

そして、HTMLにCSSを埋め込む方法にたどり着きました。

ブログ全体に頻繁に流用しないのであれば、今回のやり方でいいかなと思いました。

今回の投稿は、下記のサイトを参考に検証しました。

https://tec-obs.com/web/how-to-html-a-tag-css