QooQのスマホページで人気投稿記事の画像サイズがばらばらでウィジェット内のスタイルが崩れていたので、CSSを追加して直しました。
自分は全くCSSは分からないので、ChatGPTを使い30分程時間をかけてなんとか修正。
修正するまでのプロセスは以下です。
・デベロッパーツールで当該画像のclassを特定。
・特定したclass名をGPTに入力し画像サイズを均一にしてスタイルが崩れないように指定。
・出力されたCSSをblogテーマカスタマイズページの詳細設定の「CSSを追加」に追加。
以下が実際に使っている追加CSSです。
- /* 画像を統一するためのCSS */
- .item-thumbnail {
- width: 100%; /* 画像コンテナの幅を100%に設定 */
- max-height: 300px; /* 画像の最大高さを設定 */
- overflow: hidden; /* 画像がコンテナからはみ出た場合は隠す */
- }
- .item-thumbnail img {
- width: 100%; /* 画像の幅を100%に設定 */
- height: auto; /* 画像の高さを自動調整してアスペクト比を保持 */
- }
さらに、記事タイトルと次の記事の画像との間の余白が全くなかったので、GPTに同じ方法で修正を頼むと、下記のコードが返ってきました。
- .post-title {
- margin-bottom: 1em; /* 例えば1emの余白を追加 */
- }
この修正もうまくいきました。この修正は5分以下でできました。
GPTさんお疲れ様でした。
.png)
