主に、フリーランスです。

フリーランスWEBデザイナー×飲食店経営

*

ブログ記事内のURLが折り返しされない時は、CSSの「word-break」で即解決

      2017/11/17

お仕事で飲食店のブログも書いたりしているワカヤマです。

ブログを書いていて、商品紹介などをする時に、URLを載せることがあるかと思います。

自分もたまにありますが、とても長いURLをブログ本文に載せると、ブログを公開してびっくり。
「URLが突き抜けてるー(はみ出してる)・・・!」

こんな状態になって、ドキドキしたことは一度や二度ではありませんでした。

スポンサーリンク

長いURLがはみ出してしまう場合の対処法

そんなわけで前置きが長かったですが、こんな時はHTMLタグに、CSSを1行書けばOK。
たとえばブログ本文に、こんな感じでURLを書いたとします。

  
<p>
  http://www.tsukinukechimattazedoushitaraiinokawakaranaikarakokowomiterundakara.net
</p>
  

※pタグが無い場合は、pタグで囲ってください。

これだとブラウザによってはURLの自動改行がうまくいかず、こんなふうにはみ出してしまうことがあります。

そこで、Pタグに以下のように追記。

 

<p style="word-break:break-all;">
  http://www.tsukinukechimattazedoushitaraiinokawakaranaikarakokowomiterundakara.net
</p>

 

これで解決です。
(ただし、一部の古いブラウザなどではこのCSS自体が効かないことがあります)

 

細かなことですが、ブログなどはスマホで見る人も多いですし、より快適に読んでもらうためには、こういった対応もきっちりしておくのが吉、かと思います。

 - WEB

  関連記事

デザインの”コツ”を知りたい初心者の人にオススメの本を紹介します

ワカヤマ@フリーランスです。 好きな場所&自分のペースでWEB制作仕事をしつつ、 …

フリーランスにこそ必要な、外注を効果的に使うテクニック

ワカヤマ@フリーランスです。 好きな場所&自分のペースでWEB制作仕事をしつつ、 …

他サイトで使われているCMSや言語を調べるなら、ブラウザ拡張機能「Wappalyzer」

受託や自前のサイト制作で、かならず競合他社(者)をチェックするワカヤマです。 お …

受注につながるWEBサイトの作り方【フリーランス・小規模事業者向け】

ワカヤマ@フリーランスです。 好きな場所&自分のペースでWEB制作仕事をしつつ、 …

久しぶりにランサーズで外注したら、作業レベルの細かなタスクがほぼなくなった話

ワカヤマ@フリーランスです。 好きな場所&自分のペースでWEB制作仕事をしつつ、 …

クライアントの社長がWordPressを触るようになって変わったこと

ワカヤマ@フリーランスです。 好きな場所&自分のペースでWEB制作仕事をしつつ、 …

たった2行で郵便番号から住所を自動入力してくれるjQueryプラグイン「ajaxzip3」

お問い合わせフォームなどでよく目にする、住所自動入力の機能。 郵便番号を入れると …