Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでテキストボタンに下線と両端揃えを追加する方法

WordPressでテキストに下線を引いたり、両端を揃えたりする必要がありますか?

WordPressのビジュアルエディターには、以前は両端揃えと下線のテキストボタンがありました。しかし、これらは削除され、現在は利用できません。

この投稿では、WordPressでテキストボタンに下線と両端揃えを簡単に追加する方法を紹介します。

How to Add Underline and Justify Text Buttons in 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’の下向き矢印をクリックすると追加オプションが表示されます。

Access Underline and Justify from the 'Displays More Block Tools' Icon

テキストに下線を引くには、まずマウスでテキストを選択します。次に「その他のブロックツールを表示」の下矢印をクリックし、ドロップダウンメニューから「下線」をクリックします。

段落の両端揃えをするには、まず、カーソルが段落内にあることを確認します。次に、「その他のブロックツールを表示」の下矢印をクリックし、ドロップダウンメニューから「両端揃え」を選択します。

方法3:クラシックエディターに下線ボタンと文字揃えボタンを追加する。

クラシックエディターを使っている場合は、この方法が適している。

ここで、Advanced Editor Toolsプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、WordPressの管理サイドバーから「設定 ” 高度なエディターツール」ページに移動します。次に、ページ上部の「クラシックエディター(TinyMCE)」タブをクリックします。

WordPressクラシックエディターのプレビューが表示されます。プレビューの下には、未使用のボタンがすべて表示されます。

ここで、「未使用のボタン」ボックスから下線ボタンと両端揃えテキストボタンを投稿エディターにドラッグ&ドロップする必要があります。

Drag the Unused Buttons You Need to the Classic Editor's Toolbar

終了したら、画面上部の「変更を保存」ボタンをクリックして、新しい設定を保存してください。

WordPressのブログ投稿やページを作成・編集する際、クラシックエディターのツールバーに新しい投稿フォーマットボタンが表示されるようになりました。

Underline and Justify Buttons Are Now Available on the Classic Editor's Toolbar

ボーナス:WordPressでテキストをハイライトする

両端揃えや下線とは異なり、WordPressでは初期設定でテキストをハイライトすることができます。コンテンツの重要なポイントを強調し、ユーザーに見逃してほしくない細部に注意を向けさせる簡単な方法です。

テキストをハイライトするには、ブロックエディターを開き、ハイライトしたいテキストをマウスで選択する必要があります。次に、ブロックツールバーの「その他」アイコンをクリックしてドロップダウンメニューを開き、そこから「ハイライト」設定を選択します。

Expand the More dropdown menu from the block toolbar and select the Highlight option

そうすると画面上にカラーピッカーが表示されるので、そこで「背景」タブに切り替える。次に、「カスタム」オプションをクリックして「スポイト」ツールを起動し、テキストをハイライトする色を選択できます。

次に、「更新」または「公開」ボタンをクリックして、設定を保存します。では、あなたのサイトにアクセスして、ハイライトされたテキストを実際に表示してみましょう。詳しくは、WordPressでテキストをハイライトする方法のチュートリアルをご覧ください。

Choose a highlight color from the color picker tool

このチュートリアルで、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

37件のコメント返信を残す

  1. Syed Balkhi

    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!

  2. 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.

      管理者

  3. The Venetian Box

    GREAT POST!!!! You helped me SO much, thank you!!!

    • WPBeginner Support

      You’re welcome, glad you like our content :)

      管理者

  4. Achraf NAJIH

    It worked. Thanks.

  5. Crina Caba

    You answered my question… Thank you.

  6. Darrin

    How to add justify without plugin ?
    any idea ?
    thanks

  7. mourad

    Thank you so much for the help

  8. 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!

  9. Robert Lindquist

    Thank you very much!!

  10. Ajay

    Thank You So much

  11. Darren

    Thanks for this! It has been driving me crazy!

  12. Gibran Dimasagung

    Thanks bro

  13. Sally Eilers

    ….signalling the demise of WordPress.

  14. 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.

  15. chandrashekhar

    Thank man ! it was of great help

  16. 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!!!

  17. Dipo Putra

    Question is, Why they remove it?

  18. HARISH NEGI

    Thank You very much. Solved my Problem.

  19. Joey Bangun

    Thanks so much!

    from Indonesia

  20. Praboda Madushan

    Thank you very much!

  21. Sharyn Wise

    You are an amazing WONDERFUL stupendously great FANTASTIC person!
    I have just discovered these had gone missing!
    THANK YOU!

  22. David

    A very handy and helpful little tip… Thank you!

  23. 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 ?

  24. nadia

    Thank you so much! I added the Re-add Text Underline and Justify plugin and it worked perfectly.

  25. 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

  26. Thomas

    Why did they remove the option to justify or underline text anyway? Was it causing issues somewhere along the line?

  27. Harpreet Kumar

    Realy an awesome article

  28. 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.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。