WordPressタイトルをきれいに改行する7つのコツ【必読】

WordPressでブログを書いていると、タイトルを2行に分けて見せたいのに、編集画面ではどうしても1行のままで困ることはありませんか。

この記事では、そんなモヤモヤを解消するために、WordPressのタイトルまわりの仕組みと、安全に改行するための考え方を整理していきます。

一言でまとめると「タイトルの中身は1行のテキストとして保存しつつ、表示のときだけきれいに改行させる」のが一番安全です。ここから順番に見ていきましょう。

WordPressのタイトルが改行できない理由を先に理解しよう

投稿タイトルと表示場所の関係を整理しよう

投稿画面で入力する記事タイトルは、実はサイトのいろいろな場所で使い回されています。どこにどう表示されるかをまとめると、次のようなイメージです。

場所	どのように表示されるか	改行を入れたときの影響イメージ
記事ページの見出し	画面上部の大きなタイトル	一番目立つ部分で、デザイン優先で改行させたくなる場所
ブラウザのタブタイトル	タブの上に出る細い文字	改行は無視されるが、記号や文字数が多いと読みにくくなる
記事一覧や関連記事のタイトル	カードやリストの見出し	ここまで2行になると縦に伸びてしまい、一覧性が下がりやすい
パンくずリスト	階層ナビのいちばん右側	長すぎるタイトルだと途中で折り返されたり、省略されたりする
OGPのタイトル	SNSでシェアしたときのタイトル	改行コードがそのまま文字として出てしまうこともある

同じタイトルがこれだけの場所で再利用されるので、「見出しでは2行にしたいけれど、検索結果やOGPでは1行でスッキリ見せたい」といった、少しややこしい要望が出てきます。だからこそ、タイトルそのものを書き換えるのではなく、「どこで」「どう改行して見せるか」を分けて考えるのが大事です。

タイトル欄でEnterしても改行されないのはなぜか

投稿画面のタイトル欄は、ぱっと見は普通の入力欄ですが、中身としては「1行のテキスト」を入力する前提で設計されています。Enterキーを押しても改行が保存されないのは、この仕様のためです。

さらに、多くのテーマでは、タイトルを表示する前にタグや特殊な文字を安全な形に整える処理が入っています。このとき、<br> のようなタグを許可しない設定になっていると、そのまま文字列として出たり、消えてしまったりします。

こうした事情があるので、「タイトル欄に直接改行を入れてどうにかしよう」と頑張るより、「保存されるデータはシンプルな1行テキストのままにしておき、画面に出すときだけ演出する」方が、結果的にトラブルが少なくなります。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

無理なタイトル改行で起こりやすいトラブル

タイトルを強引に改行すると、見た目以外の部分で思わぬ影響が出ることがあります。よくあるパターンを挙げておきます。

こうしたトラブルを避けるには、「見出しとしての見た目」と「検索やSNSで使われるテキスト」を分けて考えることがポイントです。つまり、テキストとしては1本のタイトルを保ちつつ、表示の段階でだけ2行に見せる形が理想に近いと考えておくとよいです。

WordPressタイトルを改行する基本パターン3つ

パターン1：区切り文字を使ってCSSで改行する方法

最初に紹介するのは、私がいちばんよく使っている「区切り文字＋CSS」で改行する方法です。タイトルの中に目印となる記号を入れておき、その記号の位置で行を分けて見せるやり方です。

パターン	難易度	SEOへの影響	カスタマイズの自由度	向いている人
区切り文字＋CSS	低め	ほとんど影響なし	高い。PCとスマホで出し分けもしやすい	コードがあまり得意でないブロガーやデザイナー
functions.phpで変換	中	実装次第で問題は小さい	非常に高い。条件分岐や例外処理がしやすい	子テーマを使ってカスタマイズしている人
タイトルを2つに分ける	中〜高	構成次第でより柔軟にコントロール可能	自由度は高いが設定項目も増える	オリジナルテーマを作っている制作者

区切り文字＋CSSの基本的な流れは次のとおりです。

• タイトルの中で改行したい位置に「｜」などの記号を入れておく
• テーマ側で、その記号を <span class=”br”> に置き換えて出力する
• CSSで .br を display:block にして、見た目として2行にする

テキストとしては1つのタイトルのままなので、検索結果やOGPにはシンプルな1行のタイトルが渡されます。見た目だけ2行にできるので、タイトルの改行方法としてはかなり安全な部類に入ります。

パターン2：functions.phpで記号を<br>に自動変換する方法

次は、少し踏み込んだ方法として、テーマの functions.php に処理を書き足し、タイトルの中の記号を <br> に自動変換するやり方です。一度仕組みを作ってしまえば、以後はタイトルに記号を入れるだけで勝手に改行されるので、運用が楽になります。

入力するタイトル	画面での表示イメージ	使い方のイメージ
WordPressのタイトル改行｜3つの基本	WordPressのタイトル改行<br>3つの基本	メインとサブの情報を分けて見せたいとき
失敗しないタイトル改行|WordPressサイト	失敗しないタイトル改行<br>WordPressサイト	2行目に媒体名を入れておきたいとき
ブログのタイトル改行のコツ-初心者向け	ブログのタイトル改行のコツ<br>初心者向け	ターゲットを2行目に置きたいとき

実装のイメージとしては、the_title フィルターに関数を追加し、その中で str_replace などを使って「｜」や「|」を <br> に置き換える流れになります。

気をつけたいのは、「どこでも改行していいわけではない」という点です。例えば、一覧ページやウィジェットのタイトルまで改行されると読みにくくなります。必要に応じて「単一記事ページのメインタイトルだけ変換する」といった条件分岐を入れておくと安心です。

さらに、テーマによってはタイトルを出力する前に特殊文字をエスケープしていて、<br> がそのまま文字として表示される場合もあります。そのときは、タイトルの出力テンプレートを少し調整する必要が出てくるので、必ず子テーマを用意し、バックアップを取ってから作業するようにしてください。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

 

パターン3：タイトルを2つに分けてデザインする方法

三つ目のパターンは、「1つのタイトルを無理に折り曲げる」のではなく、「メインタイトル」と「サブタイトル」に分けて管理する方法です。カスタムフィールドやテーマのオプションでサブタイトル用の入力欄を作り、それぞれ別のタグとして出力します。

この方法は設定の手間は増えますが、そのぶん次のようなメリットがあります。

• メインタイトルはSEOを意識してキーワード中心で組み立てられる
• サブタイトルはキャッチコピー感覚で、もう少し自由に書ける
• サブタイトルだけ色や大きさを変えるなど、デザイン調整がしやすい

項目	メインタイトル	サブタイトル
役割	検索キーワードを含めた、記事の軸になる部分	キャッチコピーや補足説明
表示場所	記事ページの見出し、タイトルタグなど	記事ページ内の装飾文字、サムネイル画像の上など
文字数の目安	読みやすさを意識して短めに	少し長くなっても、意味が分かればOK
編集の頻度	あまり頻繁には変えない	テスト感覚で変更してもよい

「タイトルがどうしても長くなりがち」「キャッチコピーも入れたい」といったサイトでは、思い切ってこの構造を取り入れてしまった方が、結果的に運用しやすくなることも多いです。

コピペで使えるWordPressタイトル改行の実装アイデア

フィルターフックで「表示のときだけ」タイトルを改行する

私がよく選ぶのは、「保存されるタイトルのテキストは一切いじらず、画面に出すときだけ改行させる」というやり方です。この考え方だと、検索結果やOGP、RSSなどに渡すタイトルは常に同じ1行のテキストになるので、予想しやすくなります。

流れとしては次のようなイメージです。

• 投稿タイトルの中で改行したい位置に区切り文字を入れておく
• the_title にフックし、単一記事ページの見出しを出すときだけ区切り文字をタグに変換する
• CSSでそのタグを block 要素にして、2行に見せる

一覧ページでは区切り文字がそのまま残りますが、デザインとして許容できる場合も多いです。もし気になる場合は、「一覧用のタイトルは区切り文字をスペースに置き換える」といった別処理を用意してもよいでしょう。

スマホだけWordPressタイトルを改行するCSSアイデア

「パソコンでは1行で見せたいけれど、スマホでは2行に分けたい」というニーズもよくあります。この場合は、CSSのメディアクエリを使って、画面幅ごとに改行の見せ方を変えるのがシンプルです。

例えば、タイトル内の区切り文字を <span class=”br-sp”> に置き換えておき、スクリーンの幅が狭いときだけ .br-sp を display:block にする、という形です。画面が広いときは inline のままなので、そのまま1行で表示されます。

チェックポイント	見る場所	意識したいこと
タイトルの行数	記事ページのメイン見出し	スマホで2〜3行以内に収まっているか
折り返し位置	1行目と2行目の区切り	意味の切れ目で折れているか
一覧での見え方	記事一覧やカードレイアウト	重要なキーワードが途中で切れていないか
ボタンとの距離	目次やCTAボタン付近	タイトルが長すぎて、下の要素を押し下げていないか

スマホ表示は、ブラウザのデベロッパーツールで画面幅を変えながら確認するとイメージしやすいです。実機でも何パターンか見ておくと、読者の目線を意識しやすくなります。

固定ページや一覧だけタイトル改行を変えたい場合

ブログ記事と固定ページでタイトルの見せ方を変えたい、あるいは一覧では改行させたくない、というケースもあります。その場合は、テンプレート側でページの種類を判別し、表示方法を切り分けるとスッキリします。

ページ種別	改行の扱い	ねらい
投稿ページ	区切り位置で2行にして強調	記事を読み始めたときの印象をよくする
固定ページ	場合によっては1行のまま	会社概要や問い合わせなどはスッキリ見せる
カテゴリ一覧・タグ一覧	基本は1行で、自動折り返しに任せる	一覧性を優先し、縦長になりすぎないようにする
トップのピックアップ	必要に応じて2行にして目立たせる	特集記事など、押したい記事だけ強めに演出する

先に「どのページでどんな風にタイトルを見せたいか」を決めておくと、後から大きな作り直しをせずにすみます。仕様を紙やメモに書き出してから実装に入ると、頭の中も整理しやすくなります。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

 

見出しや本文での改行ルールとデザインのコツ

見出しに改行を入れるときの判断基準

見出しに改行を入れると、メリハリが出て読みやすくなることもあれば、逆にごちゃっとしてしまうこともあります。迷ったときにチェックしてほしいポイントは次のとおりです。

• 意味のかたまりで区切れているか
• 重要なキーワードがバラバラに離れてしまっていないか
• スマホで見たとき、2〜3行以内に収まりそうか
• 1行目と2行目のどちらにも、意味のある言葉が残っているか

種類	例	コメント
悪い例	WordPressのタイトルをきれいに	改行だけでは何をしたいのか伝わりにくい
良い例	WordPressのタイトル改行のコツ｜読みやすさとSEOを両立する方法	左でテーマ、右でメリットがはっきり分かる
良い例	ブログのタイトルを改行して伝わりやすくする3つのポイント	数字と目的がセットになっていてクリックされやすい

区切りとして「｜」や「:」を使い、その位置で改行するようにデザインしておくと、意味のかたまりごとに分かれて読みやすくなります。

本文の改行と行間で読みやすさを整える

本文の改行は、タイトル以上に「読みやすいリズム」が大事です。特にスマホで読む前提のブログでは、長い文章のかたまりが続くと、それだけで読む気が落ちてしまいます。

• 1文はできるだけ短くし、「1文1メッセージ」を意識する
• 1つの段落には1つの話題だけを入れる
• 条件やポイントが3つ以上あるときは、迷わず箇条書きを使う
• プレビュー画面で、行間が詰まりすぎていないか確認する

こうした基本を押さえるだけでも、タイトルの改行で悩む以前に、記事全体の読みやすさが大きく変わります。結果的に、検索から来た読者の離脱を防ぐことにもつながります。

コピーライティング視点でのタイトル改行パターン

最後に、コピーライティングの視点から、どこでタイトルを折り返すと読者の心に届きやすいかを考えてみます。ここでは、よく使うパターンをいくつか紹介します。

• キーワード＋ベネフィットの組み合わせで折る
• 数字＋メリットの組み合わせで折る
• ターゲット＋悩み解決の組み合わせで折る
• 状況＋解決策の組み合わせで折る

例えば、次のようなイメージです。

• WordPressのタイトル改行のコツ｜読みやすさとクリック率を両立する方法
• タイトルを改行して伝える3つのコツ｜読者の負担を減らして内容に集中させる
• ブログ初心者のためのタイトル改行術｜テーマに依存しない安全なやり方
• タイトルが長くて読まれないときの対処法｜改行と構成で印象を一気に変える

こうした型をいくつか持っておくと、「キーワードを含みつつ、意味のあるところでタイトルを折る」ことがやりやすくなります。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

よくある質問（FAQ）

Q1. WordPressタイトルに直接<br>タグを書いても大丈夫ですか？

A1. テーマによっては、そのまま改行されるケースもありますが、多くの場合は安全のためにタグが無効化されたり、文字として表示されたりします。仮にうまく改行されたとしても、検索結果やOGPで「<br>」という文字が出てしまうことがあり、見た目としてはあまりおすすめできません。

タイトル欄にタグを直接書き込むより、区切り文字とCSS、あるいはフィルターを使った方法で「表示のときだけ」見た目を2行にする方が、トラブルを減らしやすいです。

Q2. WordPressタイトルを改行するとSEOに悪影響はありますか？

A2. タイトルを改行させること自体が、直接SEO評価を下げるわけではありません。大事なのは、検索エンジンに渡しているタイトルのテキストが、記事の内容を正しく表し、読みやすいかどうかです。

テキストとしては1行のタイトルを保ったまま、見出しのデザインだけ2行にする方法を選べば、SEOとしてのリスクはかなり小さくできます。読者にとって読みやすく、クリックしたくなるタイトルになれば、結果としてプラスに働く可能性も十分あります。

Q3. テーマを変えたらWordPressタイトルの改行が効かなくなりました

A3. テーマを変えると、タイトルを出力しているテンプレートや、そのタイミングで通るフィルターが変わることが多いです。以前のテーマで functions.php にカスタマイズを書いていた場合は、新しいテーマ側にも同じ考え方の仕組みを組み込む必要があります。

また、子テーマを使わずにテーマ本体を直接編集していた場合は、テーマのアップデートや乗り換えのタイミングで変更が上書きされ、改行が効かなくなることがよくあります。WordPressのタイトルまわりを安定して運用したいときは、必ず子テーマを用意し、その中でカスタマイズするようにしてください。

まとめ：WordPressタイトル改行は「見た目」と「テキスト」を分けて考える

この記事の内容を振り返ります

今日からできる最初の一歩として、まずは「いま使っているテーマで、タイトルがどこにどう出ているのか」を紙やメモに書き出してみてください。そのうえで、「どのページで2行にしたいか」「どこは1行のままがいいか」を決めれば、自分のサイトに合った、無理のないタイトル改行のやり方が見えてきます。

 

---

★ちょっとブレイク★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

---