下層ページ、アイキャッチ画像(メインビジュアル)にボタンを追加したい

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

    【お使いの Snow Monkey のバージョン】20.0.1
    【お使いの Snow Monkey Blocks のバージョン】19.1.0
    【お使いの Snow Monkey Editor のバージョン】9.2.1
    【お使いのブラウザ】Chrome
    【当該サイトのURL】

    ### 実現したいこと

    アイキャッチ画像を設定してメインビジュアルにしてタイトルの下くらいにボタンを追加したいです。(特定のページにのみ)

    それと、アイキャッチ画像でメインビジュアルを設定した場合、ページ毎でタイトルの位置を調整したりタイトルの色を変えることは可能でしょうか?

    ### 発生している問題

    アイキャッチ画像をメインビジュアルにしようと思うとボタンが追加できませんでした。

    セクション(背景)でメインビジュアルを作るとボタンを追加できてタイトルの調整もできるのですが、パンくずリストがセクション(背景)の上に表示され、タイトルも邪魔になってきます。

    ### 試したこと

    フォーラム上で「アイキャッチ画像」で検索しましたが思うような記事がヒットしませんでした。

    セクション(背景)にしてパンくずリストの位置を調整しようと思い下記の記事も試しましたが、セクションの上にタイトルとパンくずリストが表示されてしまい

    特定のページのみタイトルとパンくずリストを消したかったが方法がわかりませんでした。

    ご教示いただきたく思います。

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

    アイキャッチ画像を設定してメインビジュアルにしてタイトルの下くらいにボタンを追加したいです。(特定のページにのみ)

    「アイキャッチ画像の位置」は「ページヘッダーの上にタイトルを表示」ですか?

    それと、アイキャッチ画像でメインビジュアルを設定した場合、ページ毎でタイトルの位置を調整したりタイトルの色を変えることは可能でしょうか?

    固定ページには bodypage-id-16497 のようなクラスがつくので、それを使って CSS で調整するのが簡単ではないですかね?

    1
    いいねをした人:
    #121962
    sususu
    閲覧者
    10

    キタジマ様、お忙しい中ありがとうございます。

     

    「アイキャッチ画像の位置」は「ページヘッダーの上にタイトルを表示」ですか?

    はいその通りです。

     

    固定ページには body に page-id-16497 のようなクラスがつくので、それを使って CSS で調整するのが簡単ではないですかね?

    承知いたしました。このクラスに気付いてなかったためご教示ありがとうございます!

     

    下記の画像のようなイメージに仕上げたいです。

     

    ご教示いただけますと幸いです。

    0
    いいねをした人: 居ません
    #121978
    es:エス
    参加者
    136

    sususuさん

    ご要望のイメージですと、パンくずリストを自由に配置させる方法も使えそうだなと思いました。

    「My Snow Monkey」に下記コードを書き入れて、ショートコード [my_breadcrumbs] で記事中に配置する、という方法です。

    add_shortcode(
    	'my_breadcrumbs',
    	function() {
    		ob_start();
    		\Framework\Helper::get_template_part( 'template-parts/common/breadcrumbs' );
    		return ob_get_clean();
    	}
    );

    アイキャッチ画像は使わず、セクションブロックやカバーブロックでお好みのように作成して、その下にショートコードで設置するとイメージに近い物になると思いますので、お試しくださいませ。

    2
    いいねをした人:
    #121980
    sususu
    閲覧者
    10

    es:エスさん、ご返信ありがとうございます。

    こちらも試したのですが固定ページのタイトルとパンくずがヘッダーとセクション(背景)の間に表示されてしまいます。

    全ページではなく特定のページ(1ページ)にのみタイトル下にボタンが必要なのです。。。

    0
    いいねをした人: 居ません
    #121981
    sususu
    閲覧者
    10

    es:エスさん、上記の方法でパンくずリストを自由に配置し、上に表示されてしまうタイトルはcssで消せましたが、

    ヘッダーとメインビジュアルの間に表示されるパンくずリストを消そうと思うと

    ショートコードで入れたパンくずリストまで消えてしまいました。

    0
    いいねをした人: 居ません
    #121983
    es:エス
    参加者
    136

    SUSUSUさん

    もともとのパンくずリストは、CSSで消さずともカスタマイザーの「デザイン設定」→「パンくずリストの表示位置」をなしにすることで非表示にできますので、それとショートコードの組み合わせでいけると思います。

    見落としがちなあるあるですね。お試しくださいませー

    1
    いいねをした人:
    #121992
    sususu
    閲覧者
    10

    es:エスさん、ご返答ありがとうございます。

    もともとのパンくずリストは、CSSで消さずともカスタマイザーの「デザイン設定」→「パンくずリストの表示位置」をなしにすることで非表示にできますので、それとショートコードの組み合わせでいけると思います。

    こちらを試すと全ページに反映されてしまい他のページのパンくずも消えてしまいます。

    クライアント様管理の為、固定ページを追加する度にショートコードを入力しなければ行けなくなるので

    できるならばこのページのみ非表示にしたいのですが、実現可能でしょうか?

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

    できるならばこのページのみ非表示にしたいのですが、実現可能でしょうか?

    そのページだけということなら、前述の body のクラスを使ってセレクタを組み立てれば良いと思います。

    僕だけかもですが、何がデフォルトでなにが特定のページだけで実現したいことなのかがよくわからないので、そのあたりがもっと具体的になると、具体的なセレクタやカスタマイズを考えやすくなると思います。

    2
    いいねをした人:
    #122001
    sususu
    閲覧者
    10

    キタジマ様、es:エス様、

    うまく伝えることができず申し訳ありません。

    クラス名の当て方をよく考えた結果、ショートコードで表示させたパンくずリストを残しつつ、

    ヘッダー下部に表示されてしまったパンくずリストのみを消すことができました。

     

    やりたかったことが再現できたのでご教示いただきありがとうございました。

    2
    いいねをした人:
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「下層ページ、アイキャッチ画像(メインビジュアル)にボタンを追加したい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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