ブログカードのデザインカスタマイズできますか？

♥ 0

いいねをした人: 居ません

このトピックには11件の返信、3人の参加者があり、最後にJKDECORにより1年、 5ヶ月前に更新されました。

12件の投稿を表示中 - 1 - 12件目 (全12件中)

投稿者

投稿
2021年10月29日 12:58 PM #90330

JKDECOR
参加者

♥ 51

【お使いの Snow Monkey のバージョン】15.11.1
【お使いの Snow Monkey Blocks のバージョン】12.6.1
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】safari
【当該サイトのURL】https://livingskape.jkdecor.com/comfortworks/

いつも関連記事を入れる際はブログカードで入れていたのですが、
それだと馴染んでしまって気づかれにくいので

こんな感じでテキストリンクを上に入れてさらに下に
ブログカードを入れているのですが、タイトルを変更した場合、
テキストリンクの方の文字も変えないといけなくなってしまいます。

追加CSSなどでカスタマイズ可能であれば
例えばこんな感じに

ブログカードに｢合わせて読みたい｣や｢関連記事｣というような
アテンションを付けられれば気づかれやすいのではと思い、
このようなカスタマイズをすることは可能でしょうか？

お手すきで教えていただけますと嬉しいです。
どうぞよろしくお願いいたします！

♥ 0

いいねをした人: 居ません

2021年10月29日 1:15 PM #90333

GONSY
参加者

♥ 841

こんにちは。

wp_oembed_blog_card_blog_card_templateというフックがあるようですね。
未検証ですが、こちらの記事が参考になりそうです。

Snow Monkey【ブログカード】"あわせて読みたい"を表示するカスタマイズ

Snow Monkeyのブログカードをカスタマイズした。カスタマイズを行った点はこれら。「あわせて読みたい」の文字を表示「続きを読む」のボタンを表示するカスタマイズを行…

mono96.jp

♥ 0

いいねをした人: 居ません

2021年10月29日 1:43 PM #90339

JKDECOR
参加者

♥ 51

GONSYさん

いつもありがとうございます！
やってみたのですが、

なんかこんな感じで上手くいきませんでした涙
なんででしょうか？？

♥ 0

いいねをした人: 居ません

2021年10月29日 2:11 PM #90348

GONSY
参加者

♥ 841

なんかこんな感じで上手くいきませんでした涙
なんででしょうか？？

「あわせて読みたい」は表示されているようですね！
CSSは追加されましたか？

♥ 0

いいねをした人: 居ません

2021年10月29日 2:25 PM #90353

JKDECOR
参加者

♥ 51

はい！カスタマイズの追加CSSに追加しました！
これが何かちゃんと上手くいっていないのでしょうか？？

♥ 0

いいねをした人: 居ません

2021年11月2日 10:26 AM #90707
GONSY
参加者

♥ 841
参考記事のCSSと少し異なりますが、実装してみたらできました。

ブログカードテスト – Demo Site for SM

demo.gonsy.net

my-snow-monkey.phpへの記述は、参考記事のままです。
CSSは、PC用だけですが、以下にしています。
```
/* Blog card */
.wp-block-embed-wp-oembed-blog-card {
	padding-top: 2em;
}

.wp-oembed-blog-card__figure {
	float: left;
	margin-right: 1em;
	margin-left: 0;
}

.wp-oembed-blog-card-label-text {
	font-size: 0.875rem;
	line-height: 1.2;
	font-weight: bold;
	background: #333;
	color: #fff;
	display: flex;
	align-items: center;
	height: 30px;
	position: absolute;
	top: -30px;
	left: 0;
	padding: .5em .75em;
}	
/* Blog card end */
```
これで同じような見た目にならない場合、ご自身で追加したCSSとコンフリクトしているかもしれません。
まずはお試しくださいませ。

♥ 1

いいねをした人:
2021年11月2日 1:07 PM #90767

JKDECOR
参加者

♥ 51

GONSYさん！

ありがとうございます！！！！！！
試してみたらSP版は表示されました！！
デザインまで私のイメージにあわせてくださり感動です！

でもなぜかPC版だけこんな感じで

なぜか変わらないので
何かGONSYさんがおっしゃる通りコンフリクトしているのかも。。。

予想できる原因って思い当たるものありますか？？

♥ 0

いいねをした人: 居ません

2021年11月2日 1:11 PM #90769

キタジマタカシ
参加者

♥ 2421

デベロッパーツールで見ると (max-width: 420px) and (min-width: 321px) で囲まれてるようです。なので 421px よりブラウザが広いと効かなくなります。

♥ 1

いいねをした人:

2021年11月2日 2:24 PM #90789

JKDECOR
参加者

♥ 51

キタジマさん

ありがとうございます！！！
その部分を消したらPCでも表示されました！！

GONSYさん

希望のデザインで再現してくださって
本当にありがとうございます！！
あわせて読みたいフル活用します！！！！！！

♥ 1

いいねをした人:

2023年6月5日 3:34 PM #125232

JKDECOR
参加者

♥ 51

以前こちらのスレッドにて
ブログカードのデザインをカスタマイズいただいたのですが
今見てみたらデザインが変わってしまっていました。

これを以前のデザイン

こちらに戻すことはできますでしょうか？

♥ 0

いいねをした人: 居ません

2023年6月5日 7:36 PM #125283
キタジマタカシ
参加者

♥ 2421
Snow Monkey v20.2.0 でブログカードの CSS に変更が入った影響です。以前に追加したブログカード用の CSS を一旦全部消して、新しく下記の CSS を追加してみてください。
```
.is-provider-wp-oembed-blog-card {
  padding-top: 2em;
}

.is-provider-wp-oembed-blog-card .wp-oembed-blog-card > a,
.is-provider-wp-oembed-blog-card .wp-oembed-blog-card > span{
  flex-wrap: nowrap;
}

.wp-block-embed__wrapper {
  overflow: visible !important;
}

.wp-oembed-blog-card-label-text {
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: bold;
  background: #333;
  color: #fff;
  display: flex;
  align-items: center;
  height: 30px;
  position: absolute;
  top: -30px;
  left: 0;
  z-index: 12;
  padding: .5em .75em;
}

@media not (min-width: 640px) {
  .is-provider-wp-oembed-blog-card {
    --wp-oembed-blog-card--gap: var(--_margin-1);
    --wp-oembed-blog-card--figure--basis: 50%;
  }

  .is-provider-wp-oembed-blog-card .wp-oembed-blog-card__figure {
    order: 1;
  }
}
```
♥ 0

いいねをした人: 居ません
2023年6月7日 4:51 PM #125730

JKDECOR
参加者

♥ 51

キタジマさま

ありがとうございます！
前のデザインに戻りました！！！

♥ 1

いいねをした人:
投稿者

投稿