「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

連続する属性に対するCSS適用方法
 
共有:
通知
すべてクリア

[解決済] 連続する属性に対するCSS適用方法

5 投稿
2 ユーザー
4 Reactions
347 表示
(@hyoutantugi)
Active Member Registered
結合: 1年前
投稿: 5
Topic starter  

Cocoonを利用させていただいています。お世話になります。
まだサイトの作成途中なのですが、固定ページ内に以下に示すHTMLの記述があります。
この中の<article id="post-7" class="article post-7 page type-page status-publish hentry" itemscope="itemscope" itemprop="blogPost" itemtype="https://schema.org/BlogPosting">タグに対して、マージンやパディングを適用する方法を知りたいです。IDやclass属性がスペースでつながっている場合のCSSの記述方法がわかりません。ご教示いただければ幸いです。

======================================================
<article id="post-7" class="article post-7 page type-page status-publish hentry" itemscope="itemscope" itemprop="blogPost" itemtype="https://schema.org/BlogPosting">

<div class="entry-content cf" itemprop="mainEntityOfPage">

<h2 class="wp-block-heading">お知らせ</h2>

<h2 class="wp-block-heading">ようこそ ○○ Webサイトへ</h2>

</div>
~その他の要素~

</article>
======================================================

 

 

 

 

 


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2476
 

投稿者:: @hyoutantugi

IDやclass属性がスペースでつながっている場合のCSSの記述方法がわかりません


複数クラスが有無は関係なく、単にCSSの理解が足りないです。
各々のクラスに意味があります。
ネットに数多く情報があるので、CSSについて一読される事をお勧めします。

例:

  • article:投稿本文
  • post-t:固定ページID7
  • post:固定ページ
.article {
margin:10px;
padding:10px;
}

/* 投稿本文+固定ページ */
.article.post {
margin:10px;
padding:10px;
}

 

 


   
(@hyoutantugi)
Active Member Registered
結合: 1年前
投稿: 5
Topic starter  

ご回答ありがとうございます。

いただいたコーディング案は試しているのですが、反映されず悩んでいました。質問には含めていなかったのですが、提示したHTML記述の外側が次の属性で囲まれていました。情報が不足していました。申し訳ありません。
<main id="main" class="main" itemscope itemtype="https://schema.org/Blog">

・・・・

</main>

こちらを利用し、CSSで

 

.main{
margin: 10px;
padding:10px;
}

と記述すると反映されました。
この場合外側のクラス(.main)で要素を変更した場合は反映し、内側のクラス(.article)で変更した時は反映しませんでした。

こうした、クラス間の振る舞いについてよく理解できていない面があります。勉強しなければならないと感じていますが、なかなかその辺りについて述べられている解説記事が見つかりません。

This post was modified 1年前 2回 by hyoutantugi

   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2476
 

投稿者:: @hyoutantugi

この場合外側のクラス(.main)で要素を変更した場合は反映し、内側のクラス(.article)で変更した時は反映しませんでした。

各クラス、IDに設定される親テーマ、カスタムCSSが見れていますか?
Chromeデベロッパーツールで各要素のCSSを確認するのが術です。
Chromeデベロッパーツールについてもネットに多数情報があります。

ここはテーマCocoonについての問合せの場です。
テーマに関する以前の、CSSの基礎の質問は、参考書を買うなり、ご自身でお調べ勉強して下さい


   
hyoutantugi reacted
(@hyoutantugi)
Active Member Registered
結合: 1年前
投稿: 5
Topic starter  

ご回答ありがとうございます。
貴重な示唆をいただけました。Chromeデベロッパーツールで確認しました。この仕組みが分かったおかげで、自分なりに探索や勉強ができる感じがします。大変感謝しています。


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました