WordPressでテキストに下線を引いたり、両端を揃えたりする必要がありますか？
WordPressのビジュアルエディターには、以前は両端揃えと下線のテキストボタンがありました。しかし、これらは削除され、現在は利用できません。
この投稿では、WordPressでテキストボタンに下線と両端揃えを簡単に追加する方法を紹介します。
WordPressでテキストボタンに下線と両端揃えを追加する理由
WordPressサイトで投稿やページを編集する際に、消えてしまった下線ボタンや両端揃えボタンを復活させたいと思いませんか？これらのボタンはWordPress 4.7で投稿エディターから削除されましたが、幸運にも復活させる方法があります。
しかし、サイト上のテキストに下線を引いたり、正当化したりしないことを検討すべき理由がいくつかあります。
まず、下線付きのテキストはリンクのように見えることがあり、ユーザーはリンクだと思っていたものが機能しないことに不満を感じるかもしれません。また、両端揃えのテキストは、特に小さな画面ではコンテンツを読みにくくします。
ということで、WordPressでテキストボタンに下線と両端揃えをつける方法を見ていきましょう。ブロックエディターとクラシックエディターでの方法を紹介します。また、ボタンを使わなくても、キーボードショートカットを使ってテキストに下線と両端揃えを付ける方法も紹介します。
方法1：キーボードショートカットを使ってテキストに下線を引き、両端を揃える
WordPressでテキストに下線を引いたり、両端を揃えたりするのに、プラグインやツールバーアイコンは必要ありません。キーボードショートカットを使うだけです。
テキストに下線を引くには、WordPressで下線を引きたいテキストを選択し、WindowsではCtrl+U、MacではCommand+Uを押すだけです。これだけです。このキーボードショートカットは、ブロックエディターでもクラシックエディターでも使えます。
テキストの両端揃えにはもうひとつキーボードショートカットがあります。テキストを選択し、Windowsの場合はShift+Alt+J、Macの場合はCommand+Option+Jを押すだけで、テキストが両端揃えになります。
ただし、テキストをジャスティファイするためのキーボードの組み合わせは、クラシックエディターでのみ機能します。ブロックエディターを使用している場合は、キーボードショートカットでテキストの両端揃えを行うことはできませんので、以下のプラグインを使用する必要があります。
方法 2 ： ブ ロ ッ ク エディ タ に下線 と テ キ ス ト 両端揃えボ タ ン を追加す る 。
ブロックエディターで下線や両端揃えのテキストボタンを追加したい場合は、この方法が適している。
まず、Gutenberg Block Editor Toolkit – EditorsKitプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化すると、WordPressのブロックエディターを使用する際に、下線や両端揃えなどの書式機能が自動的に利用できるようになります。
これらの追加アイコンはブロックエディターのツールバーに直接追加することはできませんが、ツールバーの’Displays more block tools’の下向き矢印をクリックすると追加オプションが表示されます。
テキストに下線を引くには、まずマウスでテキストを選択します。次に「その他のブロックツールを表示」の下矢印をクリックし、ドロップダウンメニューから「下線」をクリックします。
段落の両端揃えをするには、まず、カーソルが段落内にあることを確認します。次に、「その他のブロックツールを表示」の下矢印をクリックし、ドロップダウンメニューから「両端揃え」を選択します。
方法3：クラシックエディターに下線ボタンと文字揃えボタンを追加する。
クラシックエディターを使っている場合は、この方法が適している。
ここで、Advanced Editor Toolsプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPressの管理サイドバーから「設定 ” 高度なエディターツール」ページに移動します。次に、ページ上部の「クラシックエディター（TinyMCE）」タブをクリックします。
WordPressクラシックエディターのプレビューが表示されます。プレビューの下には、未使用のボタンがすべて表示されます。
ここで、「未使用のボタン」ボックスから下線ボタンと両端揃えテキストボタンを投稿エディターにドラッグ＆ドロップする必要があります。
終了したら、画面上部の「変更を保存」ボタンをクリックして、新しい設定を保存してください。
WordPressのブログ投稿やページを作成・編集する際、クラシックエディターのツールバーに新しい投稿フォーマットボタンが表示されるようになりました。
ボーナス：WordPressでテキストをハイライトする
両端揃えや下線とは異なり、WordPressでは初期設定でテキストをハイライトすることができます。コンテンツの重要なポイントを強調し、ユーザーに見逃してほしくない細部に注意を向けさせる簡単な方法です。
テキストをハイライトするには、ブロックエディターを開き、ハイライトしたいテキストをマウスで選択する必要があります。次に、ブロックツールバーの「その他」アイコンをクリックしてドロップダウンメニューを開き、そこから「ハイライト」設定を選択します。
そうすると画面上にカラーピッカーが表示されるので、そこで「背景」タブに切り替える。次に、「カスタム」オプションをクリックして「スポイト」ツールを起動し、テキストをハイライトする色を選択できます。
次に、「更新」または「公開」ボタンをクリックして、設定を保存します。では、あなたのサイトにアクセスして、ハイライトされたテキストを実際に表示してみましょう。詳しくは、WordPressでテキストをハイライトする方法のチュートリアルをご覧ください。
このチュートリアルで、WordPressでテキストボタンに下線と両端揃えを追加する方法を学んでいただけたら幸いです。WordPressが無料である理由についての初心者向けガイドや、サイトを成長させるための必須プラグインリストもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Does text alignment using ‘justify’ have any impact on a website’s content ranking, for instance by Google? Or is it just that it might create unnatural gaps in the text for some people? I’m wondering if using ‘justify’ could affect content evaluation in any way. Personally, I don’t use justify, but sometimes website owners request it.
WPBeginner Support says
Using Justify should not affect your site’s rankings and it is used by some sites to prevent an unnatural look depending on the theme that the site uses.
管理者
The Venetian Box says
GREAT POST!!!! You helped me SO much, thank you!!!
WPBeginner Support says
You’re welcome, glad you like our content
管理者
Achraf NAJIH says
It worked. Thanks.
Crina Caba says
You answered my question… Thank you.
Darrin says
How to add justify without plugin ?
any idea ?
thanks
mourad says
Thank you so much for the help
Reinette says
Thank you so much! TinyMCE is a super little plugin and I love what it’s done for my text editor.
Again, thank you!
Robert Lindquist says
Thank you very much!!
Ajay says
Thank You So much
Darren says
Thanks for this! It has been driving me crazy!
Gibran Dimasagung says
Thanks bro
Sally Eilers says
….signalling the demise of WordPress.
James says
This doesn’t work on my blog. When I click plugins I go to ‘Jetpack by WordPress.com’ and there is nothing there similar to what you are talking about!!!!
Aayush Bhaskar says
You must be going to Site Dashboard instead of going to Network Admin Area. Click on the Home Icon and Select Network Admin>plugins. There will be Add new, Network Activate etc options available.
chandrashekhar says
Thank man ! it was of great help
Sampath S says
Alternately, you can just use keyboard shortcuts:
Justify alignment – Alt +Shift +J
Underline – Ctrl+U
David says
Thank you. This is a simple solution. I don’t need more plugins on my site.
Leslie says
Thank you so much for this simple solution! No need to mess with plugins!!!
Dipo Putra says
Question is, Why they remove it?
HARISH NEGI says
Thank You very much. Solved my Problem.
Joey Bangun says
Thanks so much!
from Indonesia
Praboda Madushan says
Thank you very much!
Sharyn Wise says
You are an amazing WONDERFUL stupendously great FANTASTIC person!
I have just discovered these had gone missing!
THANK YOU!
David says
A very handy and helpful little tip… Thank you!
Sarah says
Don’t really need a plugin for that. In Mac Ctrl+Alt+J and text justified,
But why wordpress decided to remove the icon from the menu ?
nadia says
Thank you so much! I added the Re-add Text Underline and Justify plugin and it worked perfectly.
WPBeginner Support says
Hi nadia,
Glad you found it helpful
Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
管理者
A says
For me, this helped:
Select the text you wish to justify (ctrl+A)
Press Shift+Alt+J
And wordpress then justifies the text!
Amrit Singh says
You’re the real mvp. thanks for the trick
Aldo Retana says
This was more useful, thanks!
Richmond says
Yes!, You are the real MVP. Awesome
Thomas says
Why did they remove the option to justify or underline text anyway? Was it causing issues somewhere along the line?
Harpreet Kumar says
Realy an awesome article
louis says
Good! It’s interesting.
Under certain conditions, this may be useful!
On the other hand, I think the underlining should be avoided in all web documents except for creating hyperlinks. This can sometimes cause confusion given the hyperlinks. As for the justification function of the text, this very often gives unexpected results.
It is not for nothing that these two options have been eliminated. Use with parsimony in VERY rare conditions.
Sorry about my poor english.