こんな人におすすめ
- URLがはみ出して表示されてしまう。
- サイトをモバイルフレンドリーにしたい。
WordPressテーマ「AFFINGER」でURLがはみ出て表示されてた
どんな表示になっていた？
通常のブロック（段落）要素のスタイル「リンク」を使用しリンクを設定していた時、スマートフォンだけでキャプチャのように、一部テキストは改行しているものの、コンテンツから要素がはみ出す現象が起きていました。
何が問題なの？
URL（テキスト）がコンテンツの外側にはみ出してしまっていては、表示的に良くないですよね。崩れが発生している状況です。
かつ、Googleのモバイルフレンドリーテストでエラーになる可能性があります。
なぜならGoogleのモバイルフレンドリーの項目では以下のようなチェックもあるからです。
コンテンツの幅が画面の幅を超えています
URLのテキストがコンテンツ幅を超え、表示上では画面の外まで表示エリアが広がってしまっています。その場合、上記のエラーが指摘される可能性が高く、検索結果にも影響が出る可能性があります。
WordPressテーマ「AFFINGER」での解決方法
問題点がわかったところで、解決方法のご紹介。
「AFFINGER」のテーマや使っているスタイルに関わらず同じような現象が発生したらこちらの方法で解決可能です。
step
1対象要素のクラスを確認
今回はCSSで対応したいので、対象の要素にクラスが設定されているかを確認します。PCのブラウザでデベロッパーツールを表示しクラスの有無を確認します。
こちらのキャプチャで選択しているエリアが対象の要素になります。クラス「is-style-st-paragraph-link」が設定されていたので今回はこちらのクラスにCSSを追加していきたいと思います。
[メモ]MacのChromeでデベロッパーツールを開くショートカットキー
⌘ command + option + i
step
2スタイルシートを表示
テーマ「AFFINGER」のCSSファイルを表示します。
いつも使用しているCSSがある方はそちらに。
特に決めてないよ。という方は以下がおすすめです。
「AFFINGER」の子テーマを利用している場合
「外観」→「テーマエディタ（子テーマ）」→「スタイルシート（style.css）」
「AFFINGER」の子テーマを利用していない場合
「外観」→「カスタマイズ」→「追加CSS」
step
3CSSを追加
1で検索したクラスに対して以下のCSSを追加します。
.is-style-st-paragraph-link {
word-break: break-all;
}上記で設定しているCSSの「word-break」はコンテンツ内でコンテンツ幅以上のテキストが表示された場合どのような動きをするかを設定するCSSです。設定されていない、もしくは設定値によっては、改行されず上記のようにコンテンツテキストがはみ出てしまう事があります。（半角英数字の場合）
改行を行いたい場合は「word-break: break-all」もしくは「word-wrap: break-word」どちらかを設定する必要がありますが、今回リンクの表示なので「word-break: break-all」を設定しています。表示する要素が英語などの場合は単語の切れ目やスペースなどで改行を行う「word-wrap: break-word」を設定するのが良いです。
step
4表示を確認し完了
以上で作業完了です。
まとめ
たまに発生する現象の対処はコピペで対応してしまいがちですが、なんでこの記述使ってるんだっけ？って一度考えると忘れずに記憶に残って覚えられたりしますよね。だいじ。