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

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カスタマイズ依頼

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

タブ見出しボックスのカスタマイズについ...
 
共有:
通知
すべてクリア

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

7 投稿
3 ユーザー
2 Reactions
122 表示
(@ryuryu)
Active Member Registered
結合: 2か月前
投稿: 4
Topic starter  

タブ見出しボックスのカスタマイズをしています。

見た目上はうまくできたのですが、環境やボックスの中に入れるタグによってどのような影響があるかわかりません。
ほぼすべての記事で使用しようと考えているので、後々問題が出なさそうかチェックしてほしいです。

 

やりたいこと

  • Cocoon既存の「白抜きボックス」の上にラベルをつけたい
  • ボックス(枠)の中は「白抜きボックス」と全く同じにしたい(paddingやmarginなど)
  • 旧エディターを使うのでコードをコピペして使う

わからないこと

  • 自分の環境以外でうまく表示されているかわからない
  • HTMLとCSSで指定するクラス名がわからない(クラス名を全て含める必要があるのか一部だけでいいのか)
  • 自分のサイトのタブ見出しボックスとCocoonサイト「Cocoon Blocksの現在の対応状況」の記事内にあるタブ見出しボックスとではクラス名が違っていて、どちらを指定したほうが問題がないのかがわからない
  • ボックス(枠)の中が「白抜きボックス」と全く同じになっているかわからない

 

タブ見出しボックスをカスタマイズしたもの

HTML

<div class="wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box">
 <div class="tab-caption-box-label block-box-label">
  <span class="tab-caption-box-label-text block-box-label-text">見出し</span>
 </div>
 <div class="tab-caption-box-content">
  <p>テスト</p>
  <p>テスト</p>
  <ul>
   <li>テスト</li>
   <li>テスト</li>
  </ul>
 </div>
</div>

CSS

.tab-caption-box-label {
  padding: 5px 10px;
  font-size: .9em;
  background-color: #949495;
  display: inline-block;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #ffffff;
}
.tab-caption-box-content {
  margin-top: -3px;
  border-width: 3px;
  border-style: solid;
  border-color: #949495;
  padding: var(--cocoon-box-padding);
  border-radius: 0 4px 4px 4px;
  border-top-left-radius: 0;
}
  • 指定するクラス名ですが、例えば「wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box」ではなく「tab-caption-box」だけでいいのでしょうか?
    足りない・追加したほうがいいなどあれば教えていただきたいです。
  • ボックス(枠)の中のpaddingは「var(--cocoon-box-padding)」で問題ないのでしょうか?
  • 自分のサイトではタブ見出しボックスのクラス名が「wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box not-nested-style cocoon-block-tab-caption-box」になるが、Cocoonの記事内では「wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box」になっているのが気になります
    (あえて「wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box」のほうでカスタマイズしていますがちゃんと表示されています)

 

自作したタブ見出しボックス

HTML

<div class="label-heading-box">
 <div class="label-heading-box-title">見出し</div>
 <div class="label-heading-box-content">
  <p>テスト</p>
  <p>テスト</p>
  <ul>
   <li>テスト</li>
   <li>テスト</li>
  </ul>
 </div>
</div>

CSS

.label-heading-box {
  margin-bottom: 1.8em;
}
.label-heading-box-title {
  font-size: 0.9em;
  display: inline-block;
  color: #fff;
  background-color: #949495;
  border: 1px solid #949495;
  border-radius: 4px 4px 0 0;
  padding: 5px 10px;
}
.label-heading-box-content {
  margin-top: -3px;
  border: 3px solid #949495;
  border-radius: 0 4px 4px 4px;
  padding: var(--cocoon-box-padding);
}

こちらでは、ボックス内の最後の行下にmarginができてしまいます。

 

長い文章になって申し訳ありません。
よろしくお願いします。

URL : https://fc2wordpresstest.fc2.page/test/

----------------------------------------------
サイト名:てすと
サイトURL: https://fc2wordpresstest.fc2.page/wordpress
ホームURL: https://fc2wordpresstest.fc2.page
コンテンツURL:/wordpress/wp-content
インクルードURL:/wordpress/wp-includes/
テンプレートURL:/wordpress/wp-content/themes/cocoon-master
スタイルシートURL:/wordpress/wp-content/themes/cocoon-child-master
親テーマスタイル:/wordpress/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wordpress/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.5.2
PHPバージョン:7.4.18
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br, zstd
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.3.1
カテゴリー数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:1666 バイト
functions.phpサイズ:203 バイト
----------------------------------------------
Gutenberg:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wordpress/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
----------------------------------------------

 


   
引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7210
 

ryuryuさん

お問い合わせとは違うことを書いてしまうような気はしますけれど・・・。

以下のことをなさりたいとのことですが、正直良く分からないところです。

投稿者:: @ryuryu

やりたいこと

  • Cocoon既存の「白抜きボックス」の上にラベルをつけたい
  • ボックス(枠)の中は「白抜きボックス」と全く同じにしたい(paddingやmarginなど)
  • 旧エディターを使うのでコードをコピペして使う

 

以下は、私のローカル環境でクラシックエディタを使用したものです。

【白抜きボックス】

 
【タブボックス】
 
 
「白抜きボックス」と「タブボックス」は、基本同じ感じだと思います。
違う部分は、タブの分、上にmarginがあることではないでしょうか。
 
どのようなことをなさりたいのかが良く分からないのですが、「タブボックス」をカスタマイズした方が、簡単ではないでしょうか。
(タブボックスの見出し部分をカスタマイズなさりたい?)

   
わいひら reacted
返信引用
(@ryuryu)
Active Member Registered
結合: 2か月前
投稿: 4
Topic starter  

 mk2さん、ご返信ありがとうございます。

カスタマイズしたいのは、タブボックスではなくてラベル部分の文字を変えることができるタブ見出しボックスです(旧エディタでは使えないやつです)。

 

タブ見出しボックスの padding は 0.4em 0.8em で、白抜きボックスの padding は var(--cocoon-box-padding) になっていて、少し仕様が違います。

お聞きしたいこと

  • タブ見出しボックスの padding を var(--cocoon-box-padding) に変更するなどのカスタマイズをしても問題がないのか
    (枠内で<p>や<ul>を使ったときに、白抜きボックスと同じように使えるのか、表示が崩れたりしないのか)
  • タブ見出しボックスをカスタマイズするときに指定するクラス名を教えてほしい

タブボックスは既存のものを使いたいので、タブ見出しボックスのカスタマイズを考えています。
「既存のタブボックスを使える」&「見出し部分を変更したタブボックスを新たに作れる」のであれば、タブボックスのカスタマイズでも全然アリです。

 

わかりにくくてすみません!


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7210
 

ryuryuさん

タブの文字を変えれば良いのでしょうか?
そもそもの要件がはっきりしないのでお聞きしました。

例えばですけれど。
(すべてクラシックエディタを使用)

編集画面で、以下のように2つタブボックスを追加します。

 
そして、下の青いタブボックスに、任意のclassを追加します。
(ここでは「todays-dinner」)
 
そして、以下のCSSを追加します。
(エディタ画面にも反映させるためには、editor-style.cssの修正も必要です)
.todays-dinner .bb-label::after {
    content: "本日の晩御飯";
}

すると、実際に公開されるページは、以下のようになりますが、それでは要件は満たさないということでしょうか。
(そもそもCocoonの親テーマは、CSSでタブの見出し部分を指定している)

 
 
上記のようにCSSを子テーマなどに何パターンか用意しておけば、編集画面でクラスを追加するだけで、簡単に見出しは変更できると思います。
 
パターン化できないようなもの(1回しか使わないようなもの)は、同じように編集画面のカスタムCSSに書けば良いと思うのですけれど。
 
いろいろ手数をかけて、ブロックエディタからコピーしたりするのは、どういうご要件なのかなと思いました。
 
上記のような手順では、要件を満たさない何かがあるのかと思い、それが分かりませんでした。
まずは、システム的なことは置いていて、どういうご要件なのか(何をなさりたいのか)をご説明いただくのが近道かと思います。
 
普通にブロックエディタを使っても良さそうですけれど・・・。
(paddingあわせたいなら、CSSで調整すれば良いと思います)
 

   
わいひら reacted
返信引用
(@ryuryu)
Active Member Registered
結合: 2か月前
投稿: 4
Topic starter  

ありがとうございます。

タブボックスはタブの文字が固定されているものだと思っていたので、タブ見出しボックスを使おうと考えていました。

教えていただいた方法のほうがシンプルで問題もなさそうなので、その方法でやってみようと思います。

 

ちなみに、タブのチェックマークを外したいのですが、mk2さんの例であれば

.todays-dinner .bb-label .fa::before{
    content: "none";
}

でいいのでしょうか?

指定するクラス名がわからないので、教えていただけると助かります。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16655
 

.todays-dinnerの方法でやるとして、アイコンフォントを非表示にするなら以下のコードかなと思います。

.todays-dinner .bb-label .fa::before {
  content: "";
}

   
返信引用
(@ryuryu)
Active Member Registered
結合: 2か月前
投稿: 4
Topic starter  

わいひらさん、お返事ありがとうございます。

お二人に教えていただいた方法でやってみようと思います。
ありがとうございました!


   
返信引用
共有:

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

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

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

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

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

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

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

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