新年、明けましておめでとうございます。
今回の記事は音楽や楽しい商品を紹介する記事ではないので興味のある方が少ないかもしれません、ウェブサイトを作るコーディングのお話です。
結論を書くとwidthと自動改行の設定が原因でした。
2021年が始まって早6日、最初の投稿になりますが、本当はもっと早々と投稿したかったのです、でも出来なかった、、、
何故かというと
WordPressのバージョンを更新したら自作のテーマがバグって見れるモノではなくなってしまったからです！
12月にWordpress5.6がリリースされて利用してサイトを運営している方にとっては新しい機能が追加されているらしいのですが、
自分は不意に何も考えずに「お、アップデート来ているな、更新しよ」とポチッと更新してしまいました。
すると今までスマホやタブレット用に画面を小さくしても見やすいようにレイアウトが組まれていたのですが、こうなりました⬇︎
あれ？画面を小さくしてもレイアウトが崩れて文字が切れている。
今までは自動で文字を折り返すようになっていたのになぜ、、、
調べてみるとアップデートでテーマがバグる可能性は下記のようなことがあるようです。
１：プラグイン （拡張機能）がwordpressのアップデートに対応してなく、不具合が起きている。
２：HTML、CSS、各種プログラミング言語とwordpressの対応が変更になった。
３：テーマ作成時のそれぞれのテンプレートページでアップデートに対応が出来ていないページがある。
その他にも要因はあるようなのですが、大きな原因はこのような理由らしいです。
１の対応については使用しているプラグイン を一度全て無効化してみましょう。
※無効化すると設定が初期化されたり、サイト自体に大きな変化をもたらすものは事前に設定などをメモやバックアップを取るようにしましょう。
全て無効化してレイアウトが元に戻ったとあれば、プラグイン のどれかに問題があるということになります。一つずつ有効化していきサイトに問題が起こるものがあればそのプラグインの原因を調べましょう。
２に関してはこのサイトは大したプログラミング言語を使っていないので1度スルーしました。レイアウトに関してはCSSの方が原因が大きいと思ったからです。
さて、１と２は結局このサイトには関係なく３に問題があったようです。
PC用のトップページや固定ページ、投稿ページはレイアウトの崩れがなく、スマホやタブレット用にレスポンシブ対応した投稿ページのみが画像のようになってしまいました。
投稿の元にあるsingle.phpの構成、CSSに問題があるようです。
・word-break: break-all;
言語に関係なく（日本語、英語、中国語など）ブラウザの幅によって文字を折り返します。英語などは単語の途中で切れるので使用には注意が必要です。
・line-break: strict;
文章の頭に句読点や小文字のかな（ぁぃぅぇぉ）が来ないように自動で処理をしてくれます。
・word-wrap: break-word;
単語（長い英単語とか）の途中でも画面幅に応じて改行を自動で行ってくれます。
・overflow-wrap: break-word;
適当な折り返し位置がない時（長い英数字など）でも単語や文字列の途中で折り返しをして行を整えてくれます。
効果が似ているようなCSSもありますがこれで大体の文字の折り返しには対応できます。
すると下のように画面に文字が収まってくれました⬇︎
これで無事、文字がはみ出ることなく表示することができました。。。
今まではこんなことなかったのになぜ急に、、と新年早々、「あーーーーっ！何でーーー！！！」と頭を抱えていました、、、
3日までに何か投稿しようとしていたのですが、これのせいで時間を取られてしまいました。素人の自作テーマはトラブルだらけ、、、分かっているのですが、手間がかかるのも何だか好きなのです、マゾヒストではないです。
■機能追加したよ
シェアボタンとオススメ記事のスペースを設けました。
シェアボタンの＋のところを押すと様々なSNSのリストが出るようにもなっています。主要なボタンは表に出しているのであまり開くことはないかもしれませんが、良かったら開いてみてください。
オススメ記事は関連するような記事を表示するようにしました。
過去の記事に興味を持ってもらえるように付けました、関連の薄い記事も並ぶことがあると思うのですが、記事が増えるにつれて精度が上がっていく仕組みになっていますので徐々に関連性が高まると思います。
タイトルの下にカテゴリーを表示しました。
ここをクリックするとそのカテゴリーのまとめページへのリンクとなっています。興味のあるカテゴリーがあればクリックしてみてください。
最後はTwitterとYouTubeへのリンクボタンです。
これは自分のSNSへのリンクボタンとなっていますので、良いなと思った記事や動画があればフォローのほどよろしくお願い致します。
新年1回目の投稿が不具合の修正に当たることになるとは思ってもいませんでした。。。笑
これをほったらかしにして先には進めないのでちゃんと修正できて良かったです。
謎の開放感と共にこれからの楽しい記事を書いていこうと思いますので、今年もよろしくお願いします！
ではまた次回。
ino