質問: ### 前提・実現したいこと ワードプレスで以下のサイトを参考に、会話風の吹き出しをプラグインなしで作成しようとしています。 参考リンク→WordPressで会話風の画像とテキストをコピペで簡単表示! 当方サイト作りを始めたばかりのまったくの初心者です。初歩的な知識もないのですが、教えていただけると嬉しいです。 ### 発生している問題・エラーメッセージ ・まずはテンプレート作成まで進みました ・CSSにコードをコピペすると「!」のエラー表示が5つ出ます ・エラーのまま更新はできますが、反映されません。 ■エラーメッセージ ! Using height with border can sometimes make elements larger than you expect. ! Using width with border can sometimes make elements larger than you expect. ### 該当のソースコード /*-------------------- 吹き出しを作る --------------------*/ .balloon { margin-bottom: 2em; position: relative; } .balloon:before,.balloon:after { clear: both; content: ""; display: block; } .balloon figure { width: 60px; height: 60px; } .balloon-image-left { float: left; margin-right: 20px; } .balloon-image-right { float: right; margin-left: 20px; } .balloon figure img { width: 100%; height: 100%; border: 1px solid #aaa; **←エラー** border-radius: 50%; margin: 0; } .balloon-image-description { padding: 5px 0 0; font-size: 10px; text-align: center; } .balloon-text-right,.balloon-text-left { position: relative; padding: 10px; border: 1px solid; border-radius: 10px; max-width: -webkit-calc(100% - 120px); max-width: calc(100% - 120px); display: inline-block; } .balloon-text-right { border-color: #aaa; } .balloon-text-left { border-color: #aaa; } .balloon-text-right { float: left; } .balloon-text-left { float: right; } .balloon p { margin: 0 0 20px; } .balloon p:last-child { margin-bottom: 0; } /* 三角部分 */ .balloon-text-right:before { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #aaa; top: 15px; left: -20px; } .balloon-text-right:after { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #fff; top: 15px; left: -19px; } .balloon-text-left:before { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #aaa; top: 15px; right: -20px; } .balloon-text-left:after { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #fff; top: 15px; right: -19px; } /* 考え毎 */ .think .balloon-text-right,.think .balloon-text-left { border-radius: 30px; } .think .balloon-text-right:before { border: 1px solid #aaa; **←エラー** border-radius: 50%; width: 8px; height: 8px; top: 15px; left: -12px; } .think .balloon-text-right:after { border: 1px solid #aaa; **←エラー** border-radius: 50%; width: 4px; height: 4px; top: 20px; left: -19px; } .think .balloon-text-left:before { border: 1px solid #aaa; **←エラー** border-radius: 50%; width: 8px; height: 8px; top: 15px; right: -12px; } .think .balloon-text-left:after { border: 1px solid #aaa; **←エラー** border-radius: 50%; width: 4px; height: 4px; top: 20px; right: -19px; } ### 試したこと ・追加CSS、子テーマのスタイルシートどちらも試しましたが反映されません (ビジュアル、テキスト、プレビュー、PCとiphoneいずれも) ・ブラウザを閉じ、再度表示しましたが反映されません ### 補足情報(FW/ツールのバージョンなど) 使用テーマ:LION MEDIA Child 1.2
回答: > > ■エラーメッセージ > > ! Using height with border can sometimes make elements larger than you expect. > > ! Using width with border can sometimes make elements larger than you expect. > > > これはエラーではなく,「`border`プロパティと`width`,`height`プロパティを一緒に使うと,思ってたサイズより大きくなることがあるよ」という「**提言**」ですね (最近のエディタはちょっとお節介なのかな...^^) ``` *,/*全称セレクタ:すべての要素を指定*/ *::before,/*すべての「::before」擬似要素を指定*/ *::after/*すべての「::after」擬似要素を指定*/{ box-sizing: border-box;/*縦横のサイズを枠線を含んで計算する*/ } ``` で回避できませんか? スマホ対応に便利!CSSのbox-sizingの使い方【初心者向け】