大阪府堺市のSEO・MEO対策ホームページ制作会社
トランジット( 合同会社うえせいや)
営業時間 9:00〜17:00(土日祝休)

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

わぷーURL折り返し
LINE@
「この記事が気に入ったらLINE@で友だち追加をしよう!」

合同会社うえせいやの最新情報をお知らせします。

友だち追加

sponsored link

うえせい写真

この「うえせいやブログ」は、合同会社うえせいやが運営する自社メディアです。
【運営している人】
うえせい
【本名】
上原誠司(合同会社うえせいや代表社員社長)
【お仕事】
◯WordPressを使ったホームページの制作
◯自社オウンドメディア運営
◯中小企業向けITサポート
【好きなこと】
トライアスロンと自転車とアウトドアをこよなく愛しています。
詳しくは、コチラ

取引実績業種

公立高校・各種クリニック・歯科・産婦人科・商店街・鍼灸院・整骨院・整体院・ホテル・ネイルサロン・各種モデル・講師業・生花店・ベビーマッサージ協会・カメラマン・自動車教習所・占い・飲食店・各種クリニック・旅館・ホテル・宿泊施設・など

全国どこでも対応可能です

メールはもちろん、SNSや、LINE、スカイプなどを使ってしっかりとコミニュケーションをとりながら、進めることが可能です。
もちろん、お近くの方や、仕事で行くとこの多い関東圏であれば、実際お会いしてのコンサルティングやレクチャーも対応可能です。

面談可能地域

堺市堺区・堺市中区・堺市東区・堺市西区・堺市南区・堺市北区・堺市美原区・和泉市・大阪狭山市・泉大津市・岸和田市・貝塚市・泉佐野市・泉南市・松原市・富田林市・大阪市此花区. 大阪市福島区 · 大阪市北区 · 大阪市都島区 · 大阪市旭区 · 大阪市港区 · 大阪市西区 · 大阪市中央区 · 大阪市城東区 · 大阪市鶴見区 · 大阪市大正区 · 大阪市浪速区 · 大阪市天王寺区 · 大阪市東成区 · 大阪市西成区 ·大阪市阿倍野区 · 大阪市生野区 · 大阪市住之江区. 大阪市住之江区. 大阪市住吉区 · 大阪市東住吉区 · 大阪市平野区・吹田市
※ここに掲載されている場合でも、一部地域では困難な場合もございます。

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

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

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

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

sponsored link

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

URL改行

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

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

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

 

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

URL 改行

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

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

body {
  word-wrap:break-word;
}

 

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

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

 

うえせいのまとめ

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

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

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