WordPressで長い文字列がはみ出るときの対処法

WordPress

文字列がはみ出るときの対処法

WordPressで記事を書いて投稿し、PCでは問題なく表示できていても、スマホで見ると長い文字列(URL)が画面からはみ出ていました。

URLやメールアドレスなどの、長い半角英数字がはみ出ることがあるようです。
(はみ出さないものもあります)

このままだと、見にくいし、横スクロールもしにくいので対処しようと調べたら、簡単な対処法がありました。

CSSで折り返す

スタイルシートにCSSプロパティを貼り付けるだけで、長い文字列を折り返してくれます。

これだけで、はみ出さなくなりました。

スタイルシートの貼り付け方法は、WordPressのテーマによって違いますが、ここでは「Luxeritas(ルクセリタス)」でご説明します。
※他のテーマでも大丈夫かと思いますが、テーマによって対処法が違うかもしれませんのでご注意ください。

まず、「ダッシュボード」→「Luxeritas」→「子テーマの編集」にある「スタイルシート」に移動します。

下記のCSSプロパティをスタイルシートに貼り付けます。
(元から書かれているコメント部分は削除せずに貼り付けてください)

* {
  word-wrap: break-word;
}

貼り付けたら、「保存」ボタンをクリックして保存します。

「保存」ボタンをクリックするとブラウザによって、以下のようなプロパティが表示されますが、構わず「このページを離れる」や「移動」ボタンをクリックしてください。

「保存」した後に文字列がはみ出していないか、確認してください。

WordPress

Posted by aurora3