WordPress

【WordPress】記事中に記載した長いURLが折り返されずにはみ出してしまう


こんにちは。
@OfficeTAKUです。

WordPressで、記事の中に長いURLを記述した時に、URLの文字列が折り返されず画面からはみ出してしまいます。

PCの大きな画面ではまぁ、大した問題でもないのですが、スマートフォンで表示した時に本来のエントリー部分が狭くなってしまい不都合です。

この問題、特にWordPressに限定された問題ではありません。
スタイルシートにoverflow-wrapプロパティを追加することで解決します。

長いURLが折り返されないではみ出す

前回の記事


上記の記事を表示させたところ、こんな感じで表示されてしまいました。

【PCブラウザ】
パソコンのブラウザ Goolge Chrome、SafariではWikipediaの記事のURLがはみ出しています。
URLが折り返されないPCブラウザ画面

【iPhone X】
iPhone X のブラウザではWikipedeaリンクの他、もう一箇所、詐欺サイトのちょっと長いURLも入り切らずはみ出しています。
URLが折り返されないiPhoneブラウザ画面

CSS:overflow-wrap(word-wrap)プロパティを使用する

最初に参考にさせて頂いたのが下記のサイトの記事

長いURLや英数字が自動で折り返してくれない!CSS初心者向けの対策方法!

下記のように kaigyou というクラスを追加し、word-wrapプロパティに値 break-word を指定します。

.kaigyou {
word-wrap: break-word;
}

この記述を追加したところちゃんと折り返されて表示されました。
長いURLが折り返されたPCブラウザ画面

iPhoneでもちゃんと表示されました。
長いURLが折り返されたiPhoneブラウザ画面
クラス名も考えるの面倒なのでそのまま「kaigyou」を使わせてもらいました。
感謝。

word-wrapはoverflow-wrapに変更されていた

問題は解決したのですが word-wrapプロパティについて勉強しておこうと思い調べてみました。

word-wrapプロパティ、現在は overflow-wrap という名称に変更されていました。

word-wrapプロパティはもともとはMicrosoft社による拡張機能だったものが標準仕様になったもの。そしていまは overflow-wrapに改名されているそうです。

と、いうことで、上掲のCSSは、

.kaigyou {
overflow-wrap: break-word;
}

と変更しました。

word-wrapプロパティも併記しておく

word-wrapプロパティからoverflow-wrapプロパティへ変更したら問題が発生。
PCブラウザでは見かけ上問題ないのですが、iPhoneだと下の詐欺サイトのちょっと長いURLははみ出したままになってしまいました。
iPhoneのブラウザ SafariでもGoogle Chromeでも同様です。
overflow-wrapだけにしたときのiPhoneブラウザ画面

もしかしたら、overflow-wrapプロパティの値はbreak-wordの他、normalとbreak-spacesがあるので変更してみましたが変化なし。
古いブラウザやiPhoneのブラウザに対応するためには、word-wrapプロパティも併記しておかないといけないようです。

最終:CSS記述

最終的に、CSSは下記のように記述

.kaigyou {
overflow-wrap: break-word;
word-wrap: break-word;
}

WordPressでは追加CSSに記述
WordPress追加CSS編集画面

overflow-wrapの詳細については下記のサイトの記事を参考にさせていただきました。

overflow-wrap – CSS: カスケーディングスタイルシート | MDN

まとめ

今回のまとめと教訓

  • WordPressではそのままだと長いURLは折り返さない
  • CSSでoverflow-wrap(word-wrap)プロパティを記述することで折り返しが可能
  • レスポンシブテーマでも他のデバイスでの表示チェックは怠らないこと

現在使用しているTCDのテーマはレスポンシブテーマなのでデバイスの違いを意識せずに記事を作成することができます。

iframeのときもそうでしたが、表示レイアウトが崩れる問題がおきることがあります。
HTML、スタイルシートの仕様も変化しています。

確認は大切だと改めて認識したできごとでした。

【注意】Instagram:tilejapanを装った詐欺ダイレクトメッセージ前のページ

【Excel】IFS関数:ネストしなくてよいIF関数の進化系(Excel 2019・365)次のページ

ピックアップ記事

  1. [レビュー] リンダ・リウカス『ルビイのぼうけん こんにちは!プログラミング』:…
  2. [Amazon]【30日間無料体験】絶対おすすめ!アマゾン プライム会員。買い物…
  3. [iPhone] Safariでブラウズ中に表示される、「警告! あなたのApp…
  4. 【Google】Chrome 拡張機能「Password Checkup」導入翌…
  5. VERAプロジェクト前倒し終了:『恋する小惑星(アステロイド)』にも登場した国立…

関連記事

  1. Chrome 非SSLサイト
  2. WordPress

    [WordPress]ロリポップサーバーで不要になったWordPressサイトを削除する方法

    こんにちは。@OfficeTAKUです。別れと新たな出会い…

  3. WordPress

    Web

    WordPress HTMLタグの入力を楽にする「Wp Zen Coding」プラグイン

    ブログの記事を欠く時、タグの入力とか面倒なので以前はエディタで書いて貼…

  4. WordPress

    Wp Super Cashe を 有効化すると「警告! PHPセーフモードが有効になっています」

    ここ最近、複数のサイトをWordPressに移行したり、いままであまり…

  5. Web

    [WordPress] Jetpackでブログの更新情報をFacebook、Google+、Link…

    こんにちは。@OfficeTAKUです。ブログ記事の更新情…

LINE公式アカウント:OfficeTAKU

OfficeTAKU Line公式アカウントバナー

最近の記事

  1. ロジクール MX KEYS(MAC用)

人気の記事

  1. ロジクール MX KEYS(MAC用)
  1. iPhone

    【iPhone】ボイスメモの録音が1時間以上あるのに4分弱しか再生されない(未解…
  2. Photo by JESHOOTS.COM on Unsplash

    Excel

    [Excel] エクセルで「名前」を使ってみよう! Vol.5 数式に[名前]を…
  3. Photo by JESHOOTS.COM on Unsplash

    WebService

    [Amazon] 30日間無料体験!最新アニメから懐かしのアニメまで豊富に揃って…
  4. Microsoft Surface Pro 7

    Hard・Acc

    【レビュー】Microsoft Surface Pro 7 :学生・教職員には特…
  5. Security

    【注意】不在通知を装う詐欺メールがでまわっています!
PAGE TOP