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

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

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

カテゴリーラベルを非表示にしたい
 
共有:
通知
すべてクリア

カテゴリーラベルを非表示にしたい

9 投稿
2 ユーザー
5 Reactions
351 表示
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

SWELLを使用しているのですが、

投稿ページの1ページ以外、他の投稿ページのカテゴリーラベルを非表示にしたいのですが、

以下のCSSでは非表示にできませんでした。他に非表示にできるCSSはありますでしょうか?

.cat-label { display: none; }


   
引用
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1070
 

非表示にしたいのはどのページのどの部分ですか?

.cat-labelというセレクタは、Cocoonでは例えば関連ページのサムネイル左上に表示されるカテゴリ名などに使用されています。

SWELLでどの部分に.cat-labelというセレクタが使われているか分かりませんが、セレクタが違う(cat-labelは非表示にしたい部分以外を指している、SWELLでは使われていないなど)のではないでしょうか。


   
わいひら and aoinyan reacted
返信引用
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

ご返信ありがとうございます🙏

カテゴリーラベルを非表示にしたいページは、例えば以下のページです。
「むすびができること」以外のページを非表示にさせたいです。

お知らせ | むすび (kmsb.jp)

 


   
返信引用
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1070
 

未だに要件が不十分な気がしますが…

https://www.kmsb.jp/category/service/
 このページではページ上部のメニュー部分(添付画像1枚目)を表示する

・それ以外のページではページ上部のメニュー部分を非表示にする

と理解すると、以下のCSSで実現できると思います(検索ボタンは残しました)。

:not(.category-5) #gnav li:not(.c-gnav__s) {
  display: none;
}

そうではなく

https://www.kmsb.jp/information/
 このページで、ページ上部のメニュー部分のうち「むすびができること」以外を非表示にする

であれば以下のCSSで実現できると思います。

.postid-67 .c-gnav li:not(:nth-child(3)) {
  display: none;
}

   
わいひら reacted
返信引用
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

説明不足で、申し訳ございません🙏

カテゴリーラベルは、メニューではなく、記事下にある小さなラベルのことです。
この小さなラベルを、むすびができること」以外の投稿ページですべて、非表示にさせたいです。


   
返信引用
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1070
 

他にもっと良い方法がある気がしますが、一応以下でできそうです。

  1. 「外観>カスタマイズ>高度な設定」を開く
    ※このページを参考にしました:「SWELL」でjQueryを使う方法(自作JSファイルの設置方法)
  2. 以下のJavaScriptを入力する
<script>
let el = document.getElementsByClassName('p-articleFoot')[0];
if (el.getElementsByClassName('c-categoryList__link')[0].getAttribute("data-cat-id") != "5") {
  el.remove();
}
</script>

他にもっと良い方法がある気がすると書いたのは、CSSだけでカテゴリを特定する方法が分からなかったためです。
bodyなどにカテゴリのクラスが追加されたりしないっぽかったので、JavaScriptを使用しています。
多分SWELL有識者の人の方が分かると思います。


   
わいひら reacted
返信引用
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

こちらでも、ご教示ありがとうございます🙏✨

JavaScriptの方が、高度なカスタマイズなんですね。
教えていただいたコードを、「headタグ終了直前に出力するコード」や「bodyタグ開始直後に出力するコード」にいれて、「jQueryを強制的に読み込む」にチェックも入れてみましたが、まだ、カテゴリーラベルは表示されている状態になっています。


   
返信引用
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1070
 

以下にすると動きますか?
jQueryは読み込まなくて良いです。

window.onload = function() {
  let el = document.getElementsByClassName('p-articleFoot')[0];
  if (el.getElementsByClassName('c-categoryList__link')[0].getAttribute("data-cat-id") != "5") {
    el.remove();
  }
}

   
わいひら reacted
返信引用
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

そのまま入れたり、左の空白をつめても入れてみましたが、まだカテゴリーラベルは表示されている状態になっています。メニューの上に、コードが表示されました。
高度な設定は、変更にちょっと難しそうなので、今回は諦めようと思います。

他のトピックでも、教えていただき、誠にありがとうございました✨🙏勉強にもなりました✨

This post was modified 8か月前 by aoinyan

   
返信引用
共有:

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

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

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

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

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

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

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

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