Title: レスポンシブ対応時に文字の改行をしたい
Last modified: 2023年5月28日

---

# レスポンシブ対応時に文字の改行をしたい

 *  解決済 [azejun0127](https://ja.wordpress.org/support/users/azejun0127/)
 * (@azejun0127)
 * [3年、 4ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%af%be%e5%bf%9c%e6%99%82%e3%81%ab%e6%96%87%e5%ad%97%e3%81%ae%e6%94%b9%e8%a1%8c%e3%82%92%e3%81%97%e3%81%9f%e3%81%84/)
 *  Lightningを使用してサイトを作成しています。
   バージョンは**6.2.2**です。
 * 
   PC・タブレットだと問題ないのですが、スマホ時に文字の改行がおかしくなり見栄え
   が悪いため、スマホの時のみ特定の場所で改行を行いたいのですがWordPressではどの
   ように設定したらいいのでしょうか。widthを設定してもうまく反映されなくて困って
   います（ ; ; ）何かいい方法をご教授いただけましたら幸いです。
 * また追加cssクラスを設定してもcssが反映されません。デベロッパーツールでクラス名
   を見ても、自分がつけたクラス名じゃないのでよくわからず指定する部分が違っていた
   ということが多いです。みなさんはデベロッパツールからクラス名を取得してcssを記述
   しているのでしょうか？それとも何か簡単な方法がありますでしょうか？
   固定ページ
   のブロック上でデザインを変更した場合、htmlの方でデザインが設定されていると思う
   のですがこの場合cssで変更しても反映されませんでしょうか？

2件の返信を表示中 - 1 - 2件目 (全2件中)

 *  [genepine](https://ja.wordpress.org/support/users/genepine/)
 * (@genepine)
 * [3年、 4ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%af%be%e5%bf%9c%e6%99%82%e3%81%ab%e6%96%87%e5%ad%97%e3%81%ae%e6%94%b9%e8%a1%8c%e3%82%92%e3%81%97%e3%81%9f%e3%81%84/#post-11683441)
 * ブロックエディタ利用の場合
    - 段落ブロックで文章を記入
    - 縦三点メニューで、ブロックをHTMLで編集
    - 改行したい所に`<br class="br-sp">` を挿入
 * > .br-sp {
   > display: none;}
   > [@media](https://ja.wordpress.org/support/users/media/) screen and (max-width:
   > 1080px) {
   > .br-pc {display: none; }
   > .br-sp {
   > display: inline-block; }}
   >  _[https://qiita.com/narikei/items/3d0a50c8d621dfe6815e](https://qiita.com/narikei/items/3d0a50c8d621dfe6815e)_
   > 
   > _qiitaが消えると情報がなくなるので引用します。_
 * max-width:はテーマに沿って決める。
   スマホのみ改行を入れたことを示すために、HTML
   編集のままにする。またはビジュアル編集で戻してもよいですが、どこに入れたか一目
   でわからなくなります。
 *  トピック投稿者 [azejun0127](https://ja.wordpress.org/support/users/azejun0127/)
 * (@azejun0127)
 * [3年、 4ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%af%be%e5%bf%9c%e6%99%82%e3%81%ab%e6%96%87%e5%ad%97%e3%81%ae%e6%94%b9%e8%a1%8c%e3%82%92%e3%81%97%e3%81%9f%e3%81%84/#post-11683443)
 * ご回答ありがとうございます。
   なるほど、<br>をスマホ対応時意外で非表示にすれば
   いいのですね。その発想は思い浮かびませんでした汗

2件の返信を表示中 - 1 - 2件目 (全2件中)

 トピック「レスポンシブ対応時に文字の改行をしたい」には新たに返信することはできま
せん。

## タグ

 * [カスタマイズ](https://ja.wordpress.org/support/topic-tag/%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba/)
 * [レスポンシブ](https://ja.wordpress.org/support/topic-tag/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96/)
 * [CSS](https://ja.wordpress.org/support/topic-tag/css/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2件の返信
 * 2人の参加者
 * 最後の返信者: [azejun0127](https://ja.wordpress.org/support/users/azejun0127/)
 * 最後の活動: [3年、 4ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%af%be%e5%bf%9c%e6%99%82%e3%81%ab%e6%96%87%e5%ad%97%e3%81%ae%e6%94%b9%e8%a1%8c%e3%82%92%e3%81%97%e3%81%9f%e3%81%84/#post-11683443)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック