質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6895閲覧

WordPress CSSコピペでエラーが出ます

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/09/09 09:20

前提・実現したいこと

ワードプレスで以下のサイトを参考に、会話風の吹き出しをプラグインなしで作成しようとしています。

 参考リンク→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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

■エラーメッセージ

! 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プロパティを一緒に使うと,思ってたサイズより大きくなることがあるよ」という「提言」ですね
(最近のエディタはちょっとお節介なのかな...^^)

css

1*,/*全称セレクタ:すべての要素を指定*/ 2*::before,/*すべての「::before」擬似要素を指定*/ 3*::after/*すべての「::after」擬似要素を指定*/{ 4 box-sizing: border-box;/*縦横のサイズを枠線を含んで計算する*/ 5}

で回避できませんか?


スマホ対応に便利!CSSのbox-sizingの使い方【初心者向け】

投稿2018/09/09 10:04

編集2018/09/09 10:12
liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

liveasnotes

2018/09/09 10:05

そうそう,擬似要素は「:」ではなく,「::」です 後方互換性を保つために「:」でも動くようになってますが,最新版は「::」です
退会済みユーザー

退会済みユーザー

2018/09/09 12:03

liveAsNotes様 ありがとうございます!エラーではないのですね。ということは吹き出しの形が崩れるとかではなく、何も反映されないこと自体がそもそもおかしい?のかもですね…。 CSSが絶望的にわかっておりませんでして、疑似要素、アスタリスク、box-sizing: border-boxの意味も先ほどググりました。ご回答いただいたCSSコードはコピペして追記するという意味かなと推測して(すみません理解できてません)、さらに疑似要素を::に修正してみましたが、変化はありませんでした。 私の理解度がひどすぎるのが問題なのですが、親切な方がいらっしゃって気持ちが救われます。 なんか最初から間違えているのかも知れません。最初からもう一度見直してみます!
liveasnotes

2018/09/09 12:07

cssの未反映に関しては,「キャッシュ」が効いている可能性もあります 「スーパーリロード」もお試しください
liveasnotes

2018/09/09 12:09

あと,「::」ではなく「::」です インデントのための空白スペースも含めて,cssは基本的に半角文字のみで記述してください (全角文字を入れていいのは,擬似要素のcontentプロパティぐらいです)
退会済みユーザー

退会済みユーザー

2018/09/09 13:23

liveAsNotes様 テンプレートの登録時にテキストではなくビジュアルに入力していたようです。ちょっと今調整中ですがなんとかなりそう。。。 ものすごく初歩的な間違いで、情けないのと大変申し訳ないです。 しかしすごく勉強になり、心折れてましたが親切なお気持ちのおかげで見直す気力がわきましたことは確かです。御礼申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問