長いURLを記事に記載した時に、スマホ表示で右側に余白ができしまう時の対処法|WordPress
WordPressを使ったブログで、スマートフォンで見た場合に、
- 右側に無駄な余白ができてしまっている。
- 左右にスクロールしてしまう。
と、こんなことになってしまう記事があったりするんですが、だいたい貼り付けているURLが長すぎることが多いんですよね。
PCのディスプレイのみをターゲットにしていた時代は、あまり意識しなかっただけに対応が遅れていたりします。
実は、CSSに追記するだけで、かなりサクッと対応できるのでご紹介。
長いURLは使わないのがベターです
ときどき、このようになってしまっているサイトをスマートフォンで見た時に発見します。
これは、WordPress自体が、英単語が途中改行されないようになっていて、URLは１ワードだと認識されてしまっているからなのです。
日本語では、途中で改行なんて当たり前なんですが、確かに英単語が途中で改行されると読みづらいですからね。
それにしても、これだけ長い単語って。。
というわけで、本来は短縮URLを使うなり「◯◯はコチラ」の様にするのが、正当な方法です。
それでも長いURLを使いたい時は、折り返してくれればいいのです
どうしても、使いたい。
もしくは、過去記事がたくさんあって、すでにどうしようもない。
なんてこともあるでしょう。
そんな時に一瞬で解決させるCSSプロパティがword-wrap:break-wordです。
body {
word-wrap:break-word;
}
上記の例の通りに、body要素に対してword-wrap:break-word;を指定してしまえばOKです。
たった、これだけをスタイルシートに書き込むだけなんです。
ただし、英語のサイトを運営されている方はbody要素に対して使わないでくださいね。
他の単語も改行されてしまうので。
うえせいのまとめ
当「うえせいWP.net」は初心者向けをうたっているので、あまりコードをのせることはないのですが、簡単なものをやっていこうと思っています。
ただ、スタイルシート？CSS？なんて方は、いきなりやってみようとしない方がいいと思います。
レイアウトが崩れてしまっては、ややこしいので。。。
ご質問があれば、お問い合せフォームから受け付けますよ。
