WordPress

【WordPress】記事内の文章にアンダーラインを引く方法




WordPress の記事エディタや、無料ブログのエディタの多くには、シンプルなアンダーラインがありません。アンダーラインは一見リンクと見間違う場合がありますので、WEB ページでは装飾のための利用は推奨されていないのかとも思いますが、アンダーラインを引きたい場合はあります。


簡単にアンダーラインを引く方法を紹介します。


アンダーライン例


アンダーラインを引いた例です。


ポイント


  • アンダーラインを引いています。
  • アンダーラインを引いていません。


商品紹介の記事などでは蛍光アンダーライン(蛍光マーカー)のほうが見栄えが良いですが、学術論文などで特定の文章を特筆する場合などにはシンプルなアンダーラインが良い時もありますね。


アンダーラインを引く方法


アンダーラインを引きたい単語(または文章)の前後に、HTML タグ <span style="text-decoration: underline;"> ~ </span> (または、<u> ~ </u>)を入力します。


<span style="text-decoration: underline;"> アンダーラインを引きたい単語(または文章) </span>


Step.1 文章を書く、HTMLモードにする



通常のブロックで文章を入力した後、「縦に3個点が並んでいるボタン」を押して、「HTML として編集」をクリックします。


Step.2 アンダーラインのHTMLタグを入力する



アンダーラインを引きたい単語(または文章)の前後に、HTML タグ <span style="text-decoration: underline;"> ~ </span> (または、<u> ~ </u>)を入力します。


Step.3 ビジュアルモードに戻す



「縦に3個点が並んでいるボタン」を押して、「ビジュアル編集」をクリックします。


Step.4 完成



アンダーラインを引くことができました。完成です。


アンダーラインサンプル

「アンダーラインを引きたい場合のサンプルです。ここからアンダーラインを引きます。 ここから解除します。」


まとめ


WordPress の記事にアンダーラインを引きたい場合、単語(または文章)の前後に、HTML タグ <span style="text-decoration: underline;"> ~ </span> (または、<u> ~ </u>)を入力することで実現できます。


ポイント


  • アンダーラインを引いています。
  • アンダーラインを引いていません。


蛍光アンダーライン(蛍光マーカー)を使いたい場合は以下の記事を参考にしてください。

【AFFINGER6】下線蛍光マーカーの使い方(CSS記載不要)@WordPress

WordPress の優良テーマ「AFFINGER6」では、通常は CSS を利用しなければ実現できない下線蛍光マーカーを(AFFINGER6の)標準機能で実装しています。記事作成時の画面操作だけで下線蛍光マーカーを実現できます。その簡単な使い方をご紹介します。

続きを見る





WordPress の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ