気が付かないうちにサイドバーのレイアウトが下図のように崩れていました。
いつからレイアウトが崩れたのか？レイアウトが崩れた原因は何か？
CSSは詳しくないのですが、自分自身への備忘録として何をしたら復旧したのかを説明します。
Google Chromeの「検証」のツールを利用した
CSSは詳しくないのでとにかく Google Chrome の「検証」のツールを利用して1つ1つ試して崩れたデザインが直るか（自分が思うレイアウトになるか）を確認していきました。
サイドバーは WordPress のウィジェットの1つである「Recent Posts Widget Extended」を使っていることを確認しました。
初期にサイトを立ち上げて、その際にデザインを考えレイアウトを作ったのですが、その後定期的にメンテナンスをすることもないので、どのような理由でこのCSSにしたのかは全く思い出せません。
自分がデザインを設計して作成したサイトですが、ある意味、他人が作ったサイトくらい分かりません。
とりあえず現状を把握することに努めました。
そしてGoogle Chromeの「検証」の機能を利用して1つ1つ試していきます。
画像のサイズを再度設定してみる
rpwe-thumb に
width:80px;
height:80px;
を入れました。
rpwe-thumbとは「Recent Posts Widget Extended」で利用しているCSSの要素名です。
直接「Recent Posts Widget Extended」のCSSを編集できないので、WordPress で利用している style.css ファイルに上書きする形で設定を入れていきます。
画像のサイズの設定を変更する
imgから max-width:100%を削除しました。
理由は分かりませんが、この設定が入っていると画像が小さくなってしまいます。
この設定を外すことで画像が固定サイズで表示されるようになります。
list の設定を変更する
.rpwe-block li に
display:flex; を入れました。
サイドバーにはタイトルと画像を表示しています。
しかしタイトルが短いとそこでブロックが終了してしまいます。
その為、画像のブロックが途中で端折られないように display: flex; を入れて画像もブロック内に入り、端折られないようにしました。
以上のような感じで1つずつ試してレイアウトを修正していきました。
また将来気が付かないうちにレイアウトが崩れてしまった時のために備忘録として残しておきます。
コメント