ページヘッダー画像にタイトルをのせたい

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

    【Snow Monkey のバージョン】13.3.0
    【Snow Monkey Blocks のバージョン】10.2.1
    【お使いの Snow Monkey Editor のバージョン】4.0.1
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】ローカル環境(docker)

    皆様、連続投稿となり失礼します

    ### 実現したいこと

    aboutページ(http://hogehoge.com/about)

    1. ページヘッダー画像の上にタイトルを乗せたい
    2. もしくはデフォルトページヘッダーの代わりにフェードするスライドを全幅で設置したい

    1は

    <header class="c-entry__header">
    	<h1 class="c-entry__title">(タイトル)</h1></header>

    がデフォルトページヘッダーにかぶさる形、上下左右中央で実装したいです。

    ※2の方はもしかすると私にとってはかなり難しいのかもしれません。

    ### 試したこと

    キタジマさんがアップされていらした、

    1. My Snow Monkey でテンプレートの追加/上書きをできるようにする(テンプレートルートの追加)
    2. カスタムページテンプレートの追加方法

    を参考にやってみておりますがなかなかうまく行かず質問させていただきたく投稿致しました。

    my-snow-monkey.phpに

    add_filter(
    	'snow_monkey_template_part_root_hierarchy_about',
    	(中略)
    );

    と記載をし
    wp-content/themes/snow-monkey/page-templates/one-column.php
    を作った後、

    <?php
    /**
     * Template Name: One column
     * Template Post Type: post, page
     *
     * @package snow-monkey
     * @author inc2734
     * @license GPL-2.0+
     * @version 5.0.0
     */
    
    use Framework\Controller\Controller;
    
    Controller::layout( 'one-column' );
    if ( is_front_page() ) {
    	Controller::render( 'front-page' );
    } else {
    	Controller::render( 'content', get_post_type() );
    }

    と入力、おそらくカスタムするのは
    wp-content/themes/snow-monkey/template-parts/common/page-header.php

    <div class="c-page-header__bgimage">
    

    ではないかと目処をつけているのですが、どの様に
    wp-content/themes/snow-monkey/page-templates/one-column.php
    内で上書きしていくのかわかりません。

    ※もしタイトルがヘッダー画像の上に乗せることが出来るのであれば、l-contents__inner下にあるタイトルは表示しないようにカスタムできれば尚ありがたいです。

    おそらくタイトルをつけないで、デフォルト画像の代わりにスライドなどを入れるときにもこのあたりをいじるのだと思うのですが、どの様にかすたむするのかご教示いただけましたら嬉しいです。

    よろしくお願いします。

    0
    いいねをした人: 居ません
    #67775
    H
    閲覧者
    14

    横から素人が失礼します。

    1 ページヘッダーの上にタイトルを乗せる

    カバーブロックを使えばできないでしょうか? 全幅にすればフルワイドのヘッダーになります。

    2 フェードするスライド

    1で作ったカバーブロックを複数並べてCSSで切り替えていく というのはどうでしょうか?

    ちなみに 上記で動作実験したものです

    スミマセン、素人考えなので参考になるかどうか不明ですが これであればテンプレート追加等までしなくてもいいのかなー という安易な考えです。

    他案あれば 私も参考にさせていただきます。

    3
    いいねをした人: 居ません
    #67778
    Mobby
    参加者
    21

    HAKUTOさん、ご返信ありがとうございます。また実装されたサイトについてもお知らせ頂きありがとうございます。

    固定ページのページヘッダー画像にタイトルを乗せることについては

    1. 固定ページを開く
    2. カスタマイズ→デザイン→固定ページ設定
    3. アイキャッチ画像の位置を「ページヘッダーの上にタイトルを表示」

    することで実現することは出来たのですが、HAKUTOさんの仰る形にできれば尚ありがたいと思います。

    もしよろしければ

    1. カバーブロックというのはSnow Monkey Blockのなかにあるものでしょうか
    2. 現在は基本情報設定から「デフォルトページヘッダー画像」を設定、表示させているのですがそちらは非表示にしたほうがいいのでしょうか(my-snow-monkeyなどで分岐させるのでしょうか)
    3. パンくずリストをヘッダーの下に置きたいのですが、可能でしょうか

    などについて改めてご教示頂けましたら幸いです。よろしくお願いします。。

    0
    いいねをした人: 居ません
    #67780
    H
    閲覧者
    14

    Mobbyさん すみません

     

    言わんこっちゃないですね、怪しくなってきましたww

     

    1.カバーブロックの使い方が非常に怪しいですが、snowmonkeyではなくデフォルトのブロックだと思われます。

     

    2.基本情報設定 なるほど…ここで共通ヘッダー画像が設定できたのですね…僕も知りませんでした、ほんとにゴメンなさい。

     

    3.上記を踏まえると みなさんに怒られそうです、みなさんゴメンなさい。

    あくまで僕のやり方でいくと例えばaboutページだけに反映させたなら このページだけデフォルトのヘッダーをnoneにしてカバーブロックを配置

    パンくずリストはデフォルトで一旦なしにして、カバーブロックの下にプラグイン「BreadcrumbNavXT」とかで作っちゃうというのはどうでしょう?

     

     

    開発者やエキスパートさんの登場を待った方が良さそうですね…大変失礼致しました。

    1
    いいねをした人: 居ません
    #67782
    Mobby
    参加者
    21

    HAKUTOさん、とんでもないです。おっしゃるようなやり方もあるということを勉強させていただきました。アドバイスありがとうございます。

    学びを深める意味で質問の最初にあげさせていただいた

    1. My Snow Monkey でテンプレートの追加/上書きをできるようにする(テンプレートルートの追加)
    2. カスタムページテンプレートの追加方法

    を使った方法などについて可否も含めお知らせ頂けると幸いです。

    よろしくお願いします。

    1
    いいねをした人: 居ません
    #67838
    キタジマ タカシ
    参加者
    2254

    単純にページヘッダー画像の上にタイトルを載せたいだけであれば

    1.固定ページを開く
    2.カスタマイズ→デザイン→固定ページ設定
    3.アイキャッチ画像の位置を「ページヘッダーの上にタイトルを表示」

    のやり方がベストです。ページヘッダーなど、コンテンツ外の部分は素直にはブロックを使えないですし、Snow Monkey のテンプレート構造や読み込みの仕組みが理解できていないとカスタマイズは結構難しいと思います。とりあえずコピペしてそれなりのものができる可能性もありますが、今後のアップデートのたびに動作確認や場合によってはコードのメンテナンスが必要になるので、よくわからずやるのはリスクのほうが大きいと思います。

    カスタマイザーで済むのであればカスタマイザーでやるのが個人的にはベストだと思います。

    1
    いいねをした人: 居ません
    #67973
    Mita 3n
    参加者
    1

    お過渡違いな回答でしたらすみません。

     

    「デフォルトページヘッダー画像」は非表示

    言っている内容は他の方と同じです。

    表示したいページの編集画面の、左上【+ボタン】→検索窓の下にある、ブロック パターンから、パターンを選択して、プリダウンメニューの「ヘッダー」「Headings」のいずれかを選択いただいて、文字や色の編集が可能です。

    1
    いいねをした人: 居ません
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「ページヘッダー画像にタイトルをのせたい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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