WordPressサイトで下線と両端揃えテキストボタンを使用すると、コンテンツの書式設定と読みやすさを向上させることができます。重要なポイントを強調したり、テキストをきれいに整列させることができます。
WordPressの以前のバージョンでは、下線ボタンと両端揃えボタンはデフォルトでビジュアルエディタに含まれていました。しかし、後にエディターを効率化するためのアップデートの一部として削除されました。
これらのオプションが削除されたにもかかわらず、多くのユーザーが特定の使用ケースでこれらの書式オプションを好んで使用しています。幸いなことに、プラグインやカスタムCSSを使ってこれらの機能を復活させることができます。
この投稿では、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エディタで特定のユーザーからブロックを非表示にする方法についての初心者向けガイドや、Gutenbergのよくある質問に回答したリストもご覧ください。
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.
Jiří Vaněk
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
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
GREAT POST!!!! You helped me SO much, thank you!!!
WPBeginner Support
You’re welcome, glad you like our content
管理者
Achraf NAJIH
It worked. Thanks.
Crina Caba
You answered my question… Thank you.
Darrin
How to add justify without plugin ?
any idea ?
thanks
mourad
Thank you so much for the help
Reinette
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
Thank you very much!!
Ajay
Thank You So much
Darren
Thanks for this! It has been driving me crazy!
Gibran Dimasagung
Thanks bro
Sally Eilers
….signalling the demise of WordPress.
James
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
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
Thank man ! it was of great help
Sampath S
Alternately, you can just use keyboard shortcuts:
Justify alignment – Alt +Shift +J
Underline – Ctrl+U
David
Thank you. This is a simple solution. I don’t need more plugins on my site.
Leslie
Thank you so much for this simple solution! No need to mess with plugins!!!
Dipo Putra
Question is, Why they remove it?
HARISH NEGI
Thank You very much. Solved my Problem.
Joey Bangun
Thanks so much!
from Indonesia
Praboda Madushan
Thank you very much!
Sharyn Wise
You are an amazing WONDERFUL stupendously great FANTASTIC person!
I have just discovered these had gone missing!
THANK YOU!
David
A very handy and helpful little tip… Thank you!
Sarah
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
Thank you so much! I added the Re-add Text Underline and Justify plugin and it worked perfectly.
WPBeginner Support
Hi nadia,
Glad you found it helpful
Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
管理者
A
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
You’re the real mvp. thanks for the trick
Aldo Retana
This was more useful, thanks!
Richmond
Yes!, You are the real MVP. Awesome
Thomas
Why did they remove the option to justify or underline text anyway? Was it causing issues somewhere along the line?
Harpreet Kumar
Realy an awesome article
louis
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.