質問: ### 前提 HTML・CSS・wordpressの初心者です。 ### 実現したいこと シェアボタンのみレスポンシブ対応前の状態を維持させたいです。 ### 発生している問題 現在記事を投稿しているページがレスポンシブに対応しておらず、 スマホで確認をすると、画像が小さく表示されてしまっています。 そこでレスポンシブ対応はできたのですが、 シェアボタンのデザインが変わってしまいました。 シェアボタンのみレスポンシブ対応させる前の状態のままにする場合は ・一部レスポンシブを解除させる ・レスポンシブ対応させたあとにデザインを指定させる のどちらかは可能でしょうか? HTML・CSS・wordpressはいずれも初心者で勉強中です。 取り急ぎこの問題を解決しなければならないため 解決方法がわかる方は教えていただけますと幸いです。 よろしくお願い致します。 ### 【追記】 下記URLのテーマを使用しています。 https://open-cage.com/stork/
回答: まずこのシェアボタンは画像ではなく、フォントアイコン+背景色(background)で構成されています。 PCとスマホでシェアボタンのデザインが変わるのは、/wp-content/themes/jstork/style.cssの下記の記述のとおり、個々のシェアボタンの幅が%指定されていることが原因と思われます。 ``` .share.short .sns li { width: 19%; margin: 0 1% 0 0; } ``` これをPC・スマホともに同じサイズにするには、widthを60pxなどの絶対指定にするしかありません。 PCでの表示サイズは変更なしで、とにかくスマホのシェアボタンをもっと大きくしたいということであれば、メディアクエリを使ってスマホのみwidthを変更することで対応できます。例えば、100%表示にするならば以下のような形です。 ``` @media only screen and (max-width: 767px) { .share.short .sns li { width: 100%; } } ```