My Snow Monkeyを使用せずにパンクズリストを表記させたい。

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

    【お使いの Snow Monkey のバージョン】17.2.7
    【お使いの Snow Monkey Blocks のバージョン】16.1.0
    【お使いの Snow Monkey Editor のバージョン】8.0.2
    【お使いのブラウザ】Chrome

    ### 実現したいこと

    My Snow Monkeyを使用せずにパンクズリストを表記させたい。

    ### 発生している問題

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

    テンプレートを「ランディングページ」にしているため、パンクズリストが表記されません。こちらのフォーラムで検索したところ、My Snow Monkeyを使用することでできるとわかりました。ただ、現時点でMy Snow Monkeyを使いこなせないため、困っている状態です。

    ### 試したこと

    ・プラグインを検索→Breadcrumb NavXTプラグインだと、リスクがある様子。

    ・一旦デフォルト設定して、追加cssでタイトル部分のclassにdispray:noneで消去できるか試しましたが、できませんでした。(画像参照

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

    ・一旦デフォルト設定して、追加cssでタイトル部分のclassにdispray:noneで消去できるか試しましたが、できませんでした。(画像参照)

    CSS に誤りがあるようにみえます。下記でどうでしょうか?

    .c-entry__header {
      display: none;
    }
    0
    いいねをした人: 居ません
    #111967
    miyuki
    閲覧者
    16

    ありがとうございます。classの当て方が間違えておりました。

    続きなのですが、理想は、パンクズリストをイラストの下に持ってきたいです。

    以前、教えていただいた方法でcssを作成しましたが、変化ありません。こちらもclass名が間違っているのでしょうか。

    0
    いいねをした人: 居ません
    #111969
    miyuki
    閲覧者
    16

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

    おそらく画像はブロックとして記事の編集エリアに入れていると思いますが、パンくずリストはその記事の編集エリアの外側にあるため CSS で位置を並べ替えるのはできないのではないかと思います。

    パンくずリストはページヘッダーの下に表示されるので、画像をブロックとしてではなくページヘッダーとして入れるのがベターではないですかね? ページヘッダーに画像を表示させる簡単な方法は、カスタマイザー → デザイン → 投稿ページ設定 or 固定ページ設定 → アイキャッチ画像の位置を「ページヘッダー」にして記事にアイキャッチ画像を設定することです(このページだけじゃなくてすべての投稿 or 固定ページに影響してしまいますが…)。

    0
    いいねをした人: 居ません
    #112061
    miyuki
    閲覧者
    16

    ありがとうございます。

    各ページ、テンプレートをデフォルトテンプレートにして、アイキャッチ画像を入れることで、画像の下にパンクズリストを表記することができました。

    ただ、SP版になった時、画像が、画面幅に合わせて、一緒に縮小されないため、画像のように、一部しか表示されない状態です。

    追加cssで、

    object-fit: contain;

    を当てると、全幅表記はされましたが、上下に大きく余白ができてしまいます。
    上下の余白を無くして、画像のすぐ下にパンクズリストを表記したいです。
    my snow monkeyしかないでしょうか。

    0
    いいねをした人: 居ません
    #112063
    miyuki
    閲覧者
    16

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

    横から失礼します。
    CSSだけでやるなら、アイキャッチ画像(ページヘッダー)は position:absolute; で要素の高さに合わせて画像が中心に表示されるようになっていますので、そのあたりを無効化すれば横長の画像すべてが表示されると思います。

    @media ( max-width: 768px ) {
    	.c-page-header {
    		padding-top: 0 !important;
    		padding-bottom: 0 !important;
    	}
    
    	.c-page-header[data-has-image=true] {
    		height: auto;
    	}
    
    	.c-page-header__bgimage,
    	.c-page-header__bgimage>img {
    		position: inherit;
    	}
    }

    私の環境だと、この方法でアイキャッチ画像(ページヘッダー)がすべて見え、高さもそれに応じて小さくなりました。
    一度お試しいただけますか?

    1
    いいねをした人:
    #112075
    miyuki
    閲覧者
    16

    GONSY様

    ありがとうございます。きちんと表記されました。

    本当にありがとうございます。正直申しまして、上記のcssの理解は不十分です。1つ1つの意味をしっかり理解していきたいと思います。

    キタジマ様、いつもご丁寧に返答してくださり、ありがとうございます。

     

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

    0
    いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「My Snow Monkeyを使用せずにパンクズリストを表記させたい。」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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