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 投稿
3 ユーザー
3 Reactions
6,179 表示
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
Topic starter  

いつもお世話になっております。

 

ブログカードのカスタマイズ相談なのですが、

添付画像の用に、ブログカードのタイトル横に

「関連」という、文字を目立つように入れたいのですが

CSSのカスタマイズでできますか?


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

beforeを使うとイケるかもしれません?実際のHTMLは今見てませんが、おそらく。。

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

こちらのカスタマイズの文言を変更すればできるのではないかと思います。

https://s41t0h.jp/cocoon-blogcard/


   
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
Topic starter  

ありがとうございます!

だいぶ理想に近づけました


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 
.internal-blogcard-title:before {
	content: "関連";
	line-height: 2.2;
	background: #333;
	border-radius: 4px;
	color: #fff;
	font-size: 0.8em;
	padding: 0.5em;
	margin-right: 0.3em;
}
.internal-blogcard-title {
	line-height: 2.2;
}

以下適当ですがスッキリさせるなら、スニペット・サイト名・日付をとっちゃえばいいと思います。

https://gyazo.com/da66a60c8aad1310f55e0be7e8a395cd

/* スニペットが不要な場合 */
.blogcard-snipet {
	display: none;
}
/* サイト名・日付、両方不要な場合 */
.blogcard-footer {
	display: none;
}
/* サイト名のみ不要な場合 */
.internal-blogcard-site {
	display: none;
}
/* 日付のみ不要な場合 */
.internal-blogcard-date {
	display: none;
}

   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

上記はたぶん全ての内部リンクに反映するので、

HTMLで囲みます。

https://notepad.pw/yc0y1g8v

追記再編集:divが表示されかったため;

みたいに工夫して1行のリンクを作ってください。

.int-blog .internal-blogcard-title:before {
	content: "関連";
	line-height: 2.2;
	background: #333;
	border-radius: 4px;
	color: #fff;
	font-size: 0.8em;
	padding: 0.5em;
	margin-right: 0.3em;
}
.int-blog .internal-blogcard-title {
	line-height: 2.2;
}
/* スニペットが不要な場合 */
.int-blog .blogcard-snipet {
	display: none;
}

これでタグで囲んだ内部リンクだけに反映すると思います。※詳細チェックはしてません。さらに試してませんが、おそらく…

  • よく分からない場合は、スルーしてください。

そしてoomotoさん。

カスタマイズを行うのに内部リンクブログカードとかを、探してるんですね。これが結構面倒だったりします…。

カスタマイズの際、該当リンクを置いてください。あとこのリンク先のどの場所とかあれば、すぐにできる事もあります。

できれば不具合・カスタマイズ対象ページのURLを掲載してください


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

そういえばですが、#4178 ここで置かれた画像って、スレ主さん自作のモノではない:以前使っていたなどでもなかったんですね。※気になってのぞいてみました。

画像のリンク先のかたに。申し訳ないです…勝手にCSSを書いてしまってスミマセン。。。

 

あともう1つ。このスレッドと、関係ない事ですが。

こんな風にスタイルしたい!だけで回答されてた時期も過ぎ去った気もします??

なるべく、すぐ済む事は解決できればとも思う反面。やりだすと『こんなふうにしたいです』トピックがエンドレスにあってcontentsが充実して良い反面

対応者がいなくて、ここの運営者さんも困ることもあるかと思ったり。おそらく大丈夫かと思いますが…

Cocoonももうすぐ正式版になることですし、様子みてのぞいてみます!#ここまでホントにお疲れさまでした^^


   
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
Topic starter  

かうたっくさん

わざわざありがとうございます!

 

かうたっくさんの言う通り、「このようにしたい!」も「良いことがある反面」「悪いこと」もあり度がすぎると、収集がつかなくなりますね

今後このようなことが無いように気をつけると共に、そのような質問があった場合は僕もわかる範囲で回答するようにします!


   
(@oomoto)
Reputable Member Registered
結合: 7年前
投稿: 326
Topic starter  

追記先ほど、かうたっくさんから、教えていただいたCSSを試した結果

 

.int-blog→#mainに変更したら、記事内のみ反映されました!

ありがとうございました!


   
共有:

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

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

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

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

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

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

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

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