追加CSSがうまく表示されない。

  • 解決済 ueokak

    (@ueokak)


    4年、 10ヶ月前

    WordPress5.3.2を使ってテーマはLightning バージョン: 8.0.3を使ってます。

    固定ページの高度な設定やカスタマイズの追加CSSに囲み枠のCSSをコピペして入れたのですが、htmlに記入しても表示されません。

    おしゃれな枠というサイトからそのままコピペしているのですが、うまく表示されず何が足りないのか分かりません。

    html
    <div class=”box1″>
    <p>ここに文章</p>
    </div>

    追加CSS
    .box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
    }
    .box1 p {
    margin: 0;
    padding: 0;
    }

    初歩的な質問ですが、どうぞよろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • DRILL LANCER

    (@rickaddison7634)

    4年、 10ヶ月前

    私もほぼ同等の環境で試しましたが普通に反映されました。
    Lightning Pro: 3.03
    WordPress: 5.32

    全角・半角の記述ミスを疑ってみてください。

    HTML

    <div class="box1">
	<p>ここに文章</p>
</div>

    CSS

    .box1 {
	padding: 0.5em 1em;
	margin: 2em 0;
	font-weight: bold;
	border: solid 3px #000000;
}
.box1 p {
	margin: 0;
	padding: 0;
}
    トピック投稿者 ueokak

    (@ueokak)

    4年、 10ヶ月前

    Gutenbergのブロックを使っているからですかね。
    全角半角をチェックして
    追加CSSで入れて、そして、ブロックをhtmlに切り替えて、そして、「ここに文章」と書いてあるhtmlを入れてプレビューに切り替えると以下のように表示されます。

    .box1 { padding: 0.5em 1em; margin: 2em 0; font-weight: bold; border: solid 3px #000000; } .box1 p { margin: 0; padding: 0; }

    ここに文章

    DRILL LANCER

    (@rickaddison7634)

    4年、 10ヶ月前

    多分 CSS を記述する場所が間違っています。
    基本的にCSSの追加場所は下記を選択してください。

    • 子テーマの style.css
    • 外観 ＞ カスタマイズ ＞ 追加CSS
    • ExUnit ＞ CSSカスタマイズ
    • 記事編集画面 ＞ VK All in One Expansion Unit ＞ カスタムCSS

    最後のは該当記事限定で効かせたい場合、残りはサイト全体に効かせたい場合に使います。

    トピック投稿者 ueokak

    (@ueokak)

    4年、 10ヶ月前

    実は
    外観 ＞ カスタマイズ ＞ 追加CSS
    にも入れて試してみたのですが、枠は表示されませんでした。

    ご助言頂いたほかの３つの箇所も試してみましたが、だめでした。

    なにかプラグインが影響しているのですかね。。

    こちらのサイトなのですが・・・
    https://iisystem.jp/

    DRILL LANCER

    (@rickaddison7634)

    4年、 10ヶ月前

    CSS は前回指摘した位置のどれかに設置してください。
    HTML はカスタム HTML ブロックを使用して記述してみてください。

    トピック投稿者 ueokak

    (@ueokak)

    4年、 10ヶ月前

    あ、できました。

    うーん。。。

    ありがとうございます。
    これから勉強していきますm(_ _)m

    • この返信は4年、 10ヶ月前にueokakが編集しました。
6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「追加CSSがうまく表示されない。」には新たに返信することはできません。