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

0
いいねをした人: 居ません
  • このトピックには11件の返信、3人の参加者があり、最後にJKDECORにより1年、 5ヶ月前に更新されました。
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • 投稿者
    投稿
  • #90330
    JKDECOR
    参加者
    45

    【お使いの 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
    いいねをした人: 居ません
    #90333
    GONSY
    参加者
    841
    #90339
    JKDECOR
    参加者
    45

    GONSYさん

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

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

    0
    いいねをした人: 居ません
    #90348
    GONSY
    参加者
    841

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

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

    0
    いいねをした人: 居ません
    #90353
    JKDECOR
    参加者
    45

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

    0
    いいねをした人: 居ません
    #90707
    GONSY
    参加者
    841

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

    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
    いいねをした人:
    #90767
    JKDECOR
    参加者
    45

    GONSYさん!

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

     

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

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

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

    0
    いいねをした人: 居ません
    #90769
    アバター画像キタジマ タカシ
    参加者
    2399

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

    1
    いいねをした人:
    #90789
    JKDECOR
    参加者
    45

    キタジマさん

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

    GONSYさん

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

    1
    いいねをした人:
    #125232
    JKDECOR
    参加者
    45

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

     

    これを以前のデザイン

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

    0
    いいねをした人: 居ません
    #125283
    アバター画像キタジマ タカシ
    参加者
    2399

    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
    いいねをした人: 居ません
    #125730
    JKDECOR
    参加者
    45

    キタジマさま

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

    1
    いいねをした人:
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • トピック「ブログカードのデザインカスタマイズできますか?」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。