WordPressの記事タイトルを改行したい人へ解説!HTMLタグbrを使う

※記事内にプロモーションが含まれています。

悩める人
悩める人

ワードプレスの記事ページのタイトルを改行したいです。

きつねコード
きつねコード

記事タイトルを改行するのは、とあるコードですぐ実現できるよ!

こんにちは、きつねコードです。

当サイトでは、wordpressやブログ運営のノウハウなどについて解説しています。

この記事では、ワードプレス記事のタイトルに「改行」を入れる方法をご紹介します。

参考情報

ブログで収益化を目指したり、本気でやりたい人には「wordpress&有料テーマ」がおすすめです。こちらの記事で詳しく解説しています。
関連記事:ゼロからワードプレスを開設する方はこちら【最短30分】
関連記事:おすすめのwordpressテーマはこちら

WordPressの記事タイトルに改行を入れる方法・HTMLタグbrを使う

簡単ですので、初心者でもすぐに可能です。

やり方は

<br>タグを挿入する

だけです。

<br>タグとは、改行を意味する基本的なHTMLタグです。使えるシーンも多いので、覚えておくと良いでしょう。
(ちなみに、"break"の略。)

こんな感じで記事ページのタイトルに入れてみます↓

wordpressの記事ページタイトルにbrタグを入れて改行する

HTMLタグを入れる時は必ず「半角」を使うのがお作法です。かっこが外れたり、不必要なスペースを入れたり、全角を使ったりしないように注意しましょう。

ページタイトルを確認してみると、きちんと改行されていますね↓

wordpressの記事ページタイトルにbrタグを入れて改行された状態

ちなみに、タイトルに改行を入れると、下の画像の通りトップページでも同じように改行されますので、その辺りは認識しておきましょう。

wordpressトップページでも、タイトルが改行されている

<br>タグは、htmlが正常に機能する場所であればワードプレス内の他の場所でも使うことは可能です。

どこでも使えるわけではありませんが、もし「改行したい!」というシチュエーションがあり、テキストを編集できるのであれば<br>タグを試してみる価値はあります。覚えておくとよいでしょう。

WordPressの記事ページ見出しを改行するのにbrタグは使えますか

記事ページの「見出し」でもbrタグで改行することはできるのでしょうか?

結論から言うと、見出しではbrは使えません。
(wordpressテーマにもよるかもしれませんが、多分無理)

wordpress記事編集ページの見出しにbrタグを入れてみる

確認してみると、<br>がそのままテキストとして表示されているだけですね↓

wordpress記事ページの見出しにbrタグを入れても改行されない

もし見出しで改行したい人は、(望みは薄いけど)「HTMLタグで編集」を選んでから、もう一度<br>タグを入れてみてください。それで保存して上手くいかなければ、諦める方が良いかなと私は思います(笑)。

wordpressに搭載されている自動整形機能で、<br>タグが"不要なタグ"とみなされて勝手に消されていることが原因かと思います。手段がないこともないですが、影響範囲を考えるとあまりいじりたくはない設定かなと思うので私ならやらないです。


ちなみに余談ですが、私が利用しているAffinger6テーマでは、

affinger6で見出しを改行する

このように改行したい場所で、Shift + Enter をクリックすると見出しにおいても段落内改行が効きます。

ページを確認してみても、普通に改行が効いています。

affinger6で見出しの改行

そのため、使っているwordpressテーマによっても挙動は異なるということですね。

ご自身のテーマでも、一応確認してみるとよいかもしれません。

brタグで改行する時の注意点

記事タイトルや見出しで改行するときに気をつけておきたいことがあります。

<br>タグを覚えると便利なのでつい多用したくなりますが、

あなたが見ている画面と、ユーザーが見ている画面の、画面幅は異なるということを忘れずに認識しておきましょう!

つまり、「良きところで改行を入れた」と思っていても、実は異なる画面幅で見てみると余計におかしくなっていることも多々あります。(特にスマホとかね。)

そのため、改行を入れる際にはパソコンのブラウザの画面幅を伸び縮みさせながらチェックしてみるのが良いです。

そもそも改行なしの方が最適という可能性もあるので、十分気をつけてくださいね。

  • この記事を書いた人

きつねコード

Webディレクター兼プログラマー|2児の父 現在はWeb制作・プログラミング講師・サイト運営を手がけるフリーランスとして活動中。これまでにWebサービスの立ち上げや大規模サイトの運用、コンテンツ制作など、10年以上web業界に携わってきました。20代の頃にはスタートアップに参画し、栄枯盛衰も経験。 「パソコンが苦手だけど、Webを活用したい」という方からの相談も多く、そうした声に応えるためにこのブログを開設。専門知識をやさしく、実践的に伝えていきたいと思います。

人気記事

wordpressテーマおすすめ【ブログ編】 1

この記事を書いた人「きつねコード」 webディレクター・プログラミング講師・個人ブロガー。wordpressには10年以上触れており、自身でブログ運営もしていま ...

cocoonからswellに移行する全手順 2

cocoon以外のテーマからswellへ移行する場合でも、確認することとしては大体同じ手順となります。ご参考にしてみてください。 結論:cocoonとswell ...

おすすめのASP 3

こんにちは、きつねコードです。 当サイトでは、Wordpressやブログ運営のノウハウなどを解説しています。 この記事では、登録必須のASP会社について、ご紹介 ...

cocoonからaffinger6への移行手順 4

cocoon以外のテーマからaffinger6へ移行する場合もチェック項目は大体同じですので、参考にしてみてください。 関連記事:cocoonからswellへの ...

ラッコキーワードの使い方を徹底解説! 5

この記事でわかること ラッコキーワードを使うと何ができるのか? 他のツールと比べたときのラッコの優位性 ラッコキーワードの超具体的な使い方 (初心者向け)SEO ...

エックスサーバーのクーポンコード 6

この記事でわかること エックスサーバーのお友達紹介クーポンコード エックスサーバーの公式キャンペーン情報 最安で契約する方法 この記事の情報は、2025年6月4 ...

-ブログ・wordpress運営, 使い方・初期設定
-, ,