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. [PPT] あなたのPowerPointプレゼンテーションを劇的に変えてしまうで…
  3. [レビュー] 『親子で学ぶ プログラミング超入門 ~Scratchでゲームを作ろ…
  4. Scratch (スクラッチ)を ちょっとだけ勉強して、かんたんな作品『のっティ…
  5. 【初心者・シニアのためのVOD入門】お家で映画三昧!休みは動画配信サイトのお試し…

関連記事

  1. WordPress

    Web

    【WordPress】SyntaxHighlighter Evolved が機能しない…

    WordPress 便利なのですが、やはりちょっとしたところでつまづく…

  2. Chrome 非SSLサイト
  3. WordPress

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

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

LINE公式アカウント:OfficeTAKU

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

最近の記事

人気の記事

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

    WebService

    おすすめ野球アニメ『おおきく振りかぶって』Amazon Prime Video …
  2. ロジクール MX KEYS(MAC用)

    Hard・Acc

    【レビュー】logicool MX KEYS for Mac:MacもWindo…
  3. 書籍

    集中して仕事がしたい、自分で時間をコントロールしたい、と思い、読んでためになった…
  4. マンガ『スティーブズ』

    電子書籍

    [KIndle] Appleの創始者である2人のスティーブを描いた漫画『スティー…
  5. 電子書籍

    [Kindle] 翔泳社さんの毎月25日〜10日まで最大55%OFFセールを見逃…
PAGE TOP