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. 【初心者・シニアのためのVOD入門】お家で映画三昧!休みは動画配信サイトのお試し…
  2. 忙しい朝もコーヒーは欠かせない!お湯を沸かすのすら面倒な人におすすめ!ネスカフェ…
  3. [Facebook] プレビュー機能の脆弱性でトークン流出!アカウントの乗っ取り…
  4. [iTunes] Apple Music ライブラリ内の曲を再生したら全く別の曲…
  5. [Amazon] アマゾンで「NHKこどもパーク」開始!月額390円で「ワンワン…

関連記事

  1. Photo by Burst on Unsplash

    WordPress

    [WordPress] Gutenbergからクラシックエディタへ戻しました!

    こんにちは。@OfficeTAKUです。なんでも新しいもの…

  2. WordPress

    WordPressサイトで突然HTTP500エラー

    こんにちは。@OfficeTAKUです。WordPress…

  3. Web

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

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

  4. WordPress

    Google Docs から WordPress へ!

    こんにちは。@OfficeTAKU です。Jet Pack…

LINE公式アカウント:OfficeTAKU

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

最近の記事

  1. One by Wacom small

人気の記事

  1. 日商PC検定
  2. ロジクール MX KEYS(MAC用)
  1. Photo by rawpixel on Unsplash

    IC3

    グローバルなIT資格【IC3】 新バージョン GS5 配信スタート!対象アプリが…
  2. マンガ『スティーブズ』

    電子書籍

    [KIndle] Appleの創始者である2人のスティーブを描いた漫画『スティー…
  3. WebService

    医療情報管理アプリ NOBORI が凄い!CT画像も検査結果もスマホですぐに確認…
  4. WebService

    【U-NEXT】シニアや映画好きがいま無料体験するならこの動画配信サービス!
  5. Excel

    【Excel】テンキーだけで時刻(「:」コロン)を入力する方法
PAGE TOP