前提・実現したいこと
ワードプレスで以下のサイトを参考に、会話風の吹き出しをプラグインなしで作成しようとしています。
参考リンク→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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/09 10:05
退会済みユーザー
2018/09/09 12:03
2018/09/09 12:07
2018/09/09 12:09
退会済みユーザー
2018/09/09 13:23