うえせいWP.net

WordPressのホームページ制作とWEB活用コンサルティング【大阪府】

WordPress

長いURLを記事に記載した時に、スマホ表示で右側に余白ができしまう時の対処法|WordPress

WordPressを使ったブログで、スマートフォンで見た場合に、

  • 右側に無駄な余白ができてしまっている。
  • 左右にスクロールしてしまう。

と、こんなことになってしまう記事があったりするんですが、だいたい貼り付けているURLが長すぎることが多いんですよね。
PCのディスプレイのみをターゲットにしていた時代は、あまり意識しなかっただけに対応が遅れていたりします。

実は、CSSに追記するだけで、かなりサクッと対応できるのでご紹介。

sponsored link

長いURLは使わないのがベターです

URL改行

ときどき、このようになってしまっているサイトをスマートフォンで見た時に発見します。
これは、WordPress自体が、英単語が途中改行されないようになっていて、URLは1ワードだと認識されてしまっているからなのです。

日本語では、途中で改行なんて当たり前なんですが、確かに英単語が途中で改行されると読みづらいですからね。
それにしても、これだけ長い単語って。。

というわけで、本来は短縮URLを使うなり「◯◯はコチラ」の様にするのが、正当な方法です。

 

それでも長いURLを使いたい時は、折り返してくれればいいのです

URL 改行

どうしても、使いたい。
もしくは、過去記事がたくさんあって、すでにどうしようもない。
なんてこともあるでしょう。

そんな時に一瞬で解決させるCSSプロパティがword-wrap:break-wordです。

 

上記の例の通りに、body要素に対してword-wrap:break-word;を指定してしまえばOKです。
たった、これだけをスタイルシートに書き込むだけなんです。

ただし、英語のサイトを運営されている方はbody要素に対して使わないでくださいね。
他の単語も改行されてしまうので。

 

うえせいのまとめ

うえせいイラスト
当「うえせいWP.net」は初心者向けをうたっているので、あまりコードをのせることはないのですが、簡単なものをやっていこうと思っています。

ただ、スタイルシート?CSS?なんて方は、いきなりやってみようとしない方がいいと思います。
レイアウトが崩れてしまっては、ややこしいので。。。

ご質問があれば、お問い合せフォームから受け付けますよ。

 

「うえせいや」のLINE@を友だち追加して下さい

うえせいのお知らせやメッセージを受け取ったり、ブログ相談会の募集告知を受け取ったりしたい方は、ううえせいやのLINE@を友だち追加してくださいね!
「うえせいや」のLINE@を友だち追加して下さい

sponsored link

合同会社うえせいやについて

合同会社うえせいやについて
「合同会社うえせいや」では、リーズナブルで柔軟性の高い月額管理費が0円の、自分で更新できるホームページの制作を承っております。
最終的に納品の際には、使い方のご指導をさせて頂くとともに、以降のサボート費用を質問の回答に限り、永年0円としておりましす。
ですので、以降の更新はご自身で、しかもスマホからも可能です。

お申込み、お問合せは無料です。
お気軽に、以下よりご連絡ください。

こんな記事も書いています

コメントを入れて頂くと嬉しいです。

*