Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

共有:

通知

すべてクリア

[解決済] 見出しのカスタマイズについて

Cocoonテーマに関する質問

最新の投稿 : kuranosukebe 1年前

3 投稿

2 ユーザー

3 Reactions

528 表示

RSS

kuranosukebe

(@kuranosukebe)

Eminent Member Registered

結合: 1年前

投稿: 23

Topic starter 2023年7月10日 10:32

https://kesapasablog.com/

スキンはBizarre-foodのグリーンソバを使用しています。

見出しのデザインをカスタマイズしたいのですが、色々調べてやってもうまく反映されません。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

上記のデザインをリセットするCSSを入れました。

そして、使用したいデザインのCSSを下に入れてあります。↓

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

/* 見出し2カスタマイズ */
h2 {
position: relative;
margin-bottom: 0.2rem;
padding: 1rem;
background-color: #f1f1f1;
color: #434343;
border-radius: 2em .6em 3em .4em/.3em 4em .6em 2em;
background-color: #f1a6a7;
font-size: 26px;
font-weight: bold;
text-align: center;
}

h2:before {
position: absolute;
top: 3px;
left: 3px;
transform: rotate(1deg);
width: 100%;
height: 100%;
border: 2px solid;
border-radius: 2em .6em 3em .4em/.3em 4em .6em 2em;
content: '';
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

使用したいデザインはこちらからコピーしました。

https://pa-tu.work/category/1?page=6

お手数ですが、よろしくお願いいたします。

----------------------------------------------
サイト名：ケサランパサラン_ブログ
サイトURL： https://kesapasablog.com
ホームURL： https://kesapasablog.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/bizarre-foods-greensoba/style.css
WordPressバージョン：6.2.2
PHPバージョン：8.2.4
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.1 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.0
エンコーディング：none
言語：ja
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.2.2
カテゴリー数：4
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：2837バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2023/06/a163a5c2ccd65b5bb0bf92f76168a40c.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
BackWPup 4.0.0
Broken Link Checker 2.2.0
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.7.7
Imagify 2.1.1
WordPress Popular Posts 6.1.3
WP Multibyte Patch 2.9
WP Sitemap Page 1.9.2
XML Sitemap & Google News 5.3.5
Yoast Duplicate Post 4.5
----------------------------------------------

トピックタグ

見出しカスタマイズ Bizarre-food

chu-ya

(@chu-ya)

Illustrious Member Registered

結合: 3年前

投稿: 2949

2023年7月10日 11:38

●原因

親のCSSクラスを定義していない為、スキンの定義に負け、上書きされません。

●対策

h2→.article h2に修正します。

また、スキンの.article h2:beforeに、bakcground-imageがあり、これが上記では消えていません。
この為、background-image: noneを追加します。

.article h2 {
  background-color: #f1a6a7;
  border-radius: 2em 0.6em 3em 0.4em/0.3em 4em 0.6em 2em;
  color: #434343;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 0.2rem;
  padding: 1rem;
  position: relative;
  text-align: center;
}

.article h2:before {
  border: 2px solid;
  border-radius: 2em 0.6em 3em 0.4em/0.3em 4em 0.6em 2em;
  content: "";
  height: 100%;
  left: 3px;
  position: absolute;
  top: 3px;
  transform: rotate(1deg);
  width: 100%;
  background-image: none; 
}