Elementorで改行を自由自在に！レスポンシブで改行位置をコントロールする方法【CSSコピペOK】

「Elementorでサイトを作っているけど、スマホで見たときに変なところで改行されてしまう…」
「クライアントから『この文章、スマホの時だけここで改行して』という細かい修正依頼が来て困っている…」

Elementorを使っていると、そんな「改行問題」に直面したことはありませんか？

PC画面ではキレイに表示されているのに、スマホで見ると単語の途中で切れてしまったり、文章の見た目が悪くなってしまったり。これを解決するために、デバイスごとに別々のウィジェットを用意して表示/非表示を切り替えるのは、手間がかかる上にサイトの表示速度にも影響を与えかねません。

ご安心ください！今回の記事では、CSSを少し追加するだけで、特定の画面幅（PC・タブレット・スマホ）でのみテキストを改行させる方法を、初心者の方にも分かりやすく解説します。

コピペで使えるコードも用意しているので、すぐにあなたのサイトで実践できますよ。

この記事でできるようになること

PCでは1行、スマホでは2行に改行させる
タブレットの時だけ特定の場所で改行する
複数のウィジェットを使わずに、1つのウィジェットでレスポンシブな改行を実現する

はじめに：この方法の注意点

このテクニックは非常に便利ですが、1つだけ注意点があります。動画の解説者も述べている通り、この方法は本来、WEBデザインのベストプラクティス（最善の方法）ではありません。

なぜなら、特定の画面サイズ（ブレークポイント）に合わせて改行を固定してしまうと、それ以外の多種多様なデバイスサイズで見たときに、逆に不自然な表示になってしまう可能性があるからです。

しかし、クライアントからの「どうしてもここで改行したい」といった強い要望に応えるための「最終手段」として、非常に有効なテクニックです。この点を理解した上で、活用していきましょう。

実装手順はたったの2ステップ！

手順はとてもシンプルです。

ステップ1： サイト全体にCSSコードを設置する
ステップ2： 改行したい場所にHTMLタグとCSSクラスを追加する

では、早速やっていきましょう！

ステップ1：CSSコードを準備・設置する

まずは、レスポンシブな改行をコントロールするためのCSSコードを、Elementorの「Custom Code」機能を使ってサイトに設置します。

1. CSSコードをコピー

下記のCSSコードをすべてコピーしてください。

<style>
/* 基本設定：通常は改行を非表示にする */
.tf-br {
  display: none;
}

/* desktop : 1025px以上で改行を表示 */
@media all and (min-width: 1025px) {
  .tf-br-dt {
    display: block;
  }
}

/* tablet : 768px以上 1024px以下で改行を表示 */
@media all and (min-width: 768px) and (max-width:1024px) {
  .tf-br-tb {
    display: block;
  }
}

/* mobile : 767px以下で改行を表示 */
@media all and (max-width: 767px) {
  .tf-br-mb {
    display: block;
  }
}
</style>

2. Custom CodeにCSSを貼り付け

WordPressのダッシュボードから Elementor > Custom Code をクリックします。
「Add New」をクリックして、新しいカスタムコードを追加します。
タイトルに「レスポンシブ改行」など、分かりやすい名前をつけます。
下の大きな入力欄に、先ほどコピーしたCSSコードを貼り付けます。
Location が <head> になっていることを確認します。
「Publish（公開）」ボタンをクリックします。
表示された画面で Conditions が Entire Site になっていることを確認し、「Save & Close」をクリックします。

これで準備は完了です。サイトのすべてのページで、先ほどのCSSが使えるようになりました。

ステップ2：テキストに改行タグとCSSクラスを追加する

次に、実際にElementorの編集画面で、改行を適用したいテキストに手を入れていきましょう。今回はHTMLの改行タグである<br>に、先ほど設定したCSSクラスを指定していきます。

Elementorの編集画面で、改行したいテキストが含まれるウィジェット（見出しウィジェットやテキストエディターウィジェットなど）を選択します。
左側の編集パネルで、テキスト入力欄を「テキスト」タブに切り替えます。
改行したい位置に、以下の形式で<br>タグを挿入します。

ケース別コード例

やりたいことに合わせて、以下のコードをコピーして使ってください。

【モバイルでのみ改行したい場合】
このクラスが最もよく使うパターンでしょう。
tf-br-mb というクラスを使います。

<br class="tf-br tf-br-mb" />

使用例：

この夏、<br class="tf-br tf-br-mb" />Elementorが熱い！

【タブレットでのみ改行したい場合】
tf-br-tb というクラスを使います。

<br class="tf-br tf-br-tb" />

【デスクトップ（PC）でのみ改行したい場合】
tf-br-dt というクラスを使います。

<br class="tf-br tf-br-dt" />

【応用：モバイルとタブレットの両方で改行したい場合】
クラス名を半角スペースで区切って複数指定します。

<br class="tf-br tf-br-mb tf-br-tb" />

ポイント：
class=" "の中には、必ず基本となる.tf-brと、表示させたいデバイス用のクラス（.tf-br-mbなど）の両方を記述してください。.tf-brは「普段は改行を隠しておく」ための設定、デバイス用のクラスは「指定した画面幅の時だけ表示する」ための設定です。

まとめ

いかがでしたか？
この方法を使えば、

CSSコードをCustom Codeに一度だけ設置
改行したい場所に<br>タグと指定のクラスを追加

これだけで、今まで悩んでいたレスポンシブでの改行問題をスマートに解決できます。

もうデバイスごとにウィジェットを複製する必要はありません。クライアントからの細かい修正依頼にも、自信を持って対応できるようになります。

ぜひ、このテクニックを活用して、より洗練されたサイト制作を目指してくださいね！

元動画はこちら
画面の幅によって好きな場所でテキストを改行する方法 – Elementor編

制作者：Naomi Suzukiさん
nocodeweb.jp

ブランドイメージに合わせたWordPressやSTUDIOでの柔軟なカスタマイズ。
PC・スマートフォンに最適化された完全オリジナルデザインの制作。
WEB知識がない方でも安心してご依頼いただける丁寧なサポート。
コーポレートサイト、飲食店、クリニックなど多様な業種に対応可能。

CONTACT

お問い合わせ

無料体験のお申し込みやお問い合わせなど、
お気軽にご連絡ください。