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. 【Google】Chrome 拡張機能「Password Checkup」導入翌…
  2. [レビュー] レノボ 「TAB4 8 Plus」 画面が美しく動画もマンガも満喫…
  3. 法定相続情報一覧図の作成や申出のポイントについてまとめ
  4. Scratch (スクラッチ)を ちょっとだけ勉強して、かんたんな作品『のっティ…
  5. 【Amazon】6ヶ月間無料体験可能! 学生のみなさん Amazon Prime…

関連記事

  1. WordPress

    Web

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

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

  2. WordPress

    [lolipop] WordPress に ログインしようとしたら 403 エラー

    こんにちは。@OfficeTAKUです。オリジナルドメイン…

  3. WordPress

    [WordPress] ロリポップさんからお願いされていた 『SiteGuard WP Plugin…

    こんにちは。@OfficeTAKUです。ここの大家さん(レ…

  4. WordPress

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

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

LINE公式アカウント:OfficeTAKU

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

最近の記事

  1. 日商PC検定

人気の記事

  1. 日商PC検定
  2. ロジクール MX KEYS(MAC用)
  1. MS Office

    【Office】Excelの表も簡単にブログへの埋め込みできる!無料で使えるWe…
  2. WebService

    【初心者・シニアのためのVOD入門】お家で映画三昧!休みは動画配信サイトのお試し…
  3. お知らせ

    【発表】2020年情報航海術アクセスTop10
  4. WebService

    Amazonプライム・ビデオで今見ておくべき作品
  5. Photo by rawpixel on Unsplash

    WebService

    フリーランスや小さなお店でホームページ作りたい!という時のおすすめホームページ作…
PAGE TOP