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

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

ただいまの
回答率

90.51%

  • WordPress

    8497questions

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

  • CSS

    7017questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 438

kumanolog

score 2

 前提・実現したいこと

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

■エラーメッセージ
! 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の使い方【初心者向け】

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/09 19:05

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

    キャンセル

  • 2018/09/09 21:03

    liveAsNotes様

    ありがとうございます!エラーではないのですね。ということは吹き出しの形が崩れるとかではなく、何も反映されないこと自体がそもそもおかしい?のかもですね…。

    CSSが絶望的にわかっておりませんでして、疑似要素、アスタリスク、box-sizing: border-boxの意味も先ほどググりました。ご回答いただいたCSSコードはコピペして追記するという意味かなと推測して(すみません理解できてません)、さらに疑似要素を::に修正してみましたが、変化はありませんでした。

    私の理解度がひどすぎるのが問題なのですが、親切な方がいらっしゃって気持ちが救われます。
    なんか最初から間違えているのかも知れません。最初からもう一度見直してみます!

    キャンセル

  • 2018/09/09 21:07

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

    キャンセル

  • 2018/09/09 21:09

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

    キャンセル

  • 2018/09/09 22:23

    liveAsNotes様

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

    キャンセル

同じタグがついた質問を見る

  • WordPress

    8497questions

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

  • CSS

    7017questions

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