- このトピックには10件の返信、2人の参加者があり、最後に
により4年、 1ヶ月前に更新されました。
-
投稿
-
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの Snow Monkey のバージョン】
【お使いのブラウザ】Google Chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）ローカル環境で作っている状況なので現在できないです。
===
いいねをした人: 居ません
ヘッダーコンテンツでやろうとすると、スマホで表示の場合下に入ってしまうのですが「MENU」横におけないでしょうか？
また「テスト」という画像を追加CSSで入れたのですがこのように重なる形で表示されてしまったのですがどのようにすればきれいに表示されるでしょうか？
いいねをした人: 居ませんちょっとどういう形にされたいのかがよく想像できていないので、可能なら PC とスマホでどのような見た目にしたいのかヘッダー全体のデザイン画像を貼り付けてもらえないでしょうか？
いいねをした人: 居ませんお世話になります。ありがとうございます。
参考資料です。
スマホ表示
ヘッダーロゴ横に電話ボタンを作りたいです。現状下に回ってしまします。また写真のようにコンパクトな画像を貼り付けたいです。
こちらも上部のヘッダーロゴ横に電話番号と問い合わせホームを載せたいです。問い合わせホームを載せたいです。
いいねをした人: 居ませんスクショありがとうございます。
ちょっとカスタマイザーでここまで変えるのは難しいので、フックでヘッダーの HTML をゴリゴリ書き換えるか、全く新しくヘッダーのテンプレートをつくるかが必要になってくると思います。どちらかといえば前者のほうが手間が少ないので、ちょっと今日サンプルコードを書いてみます。
いいねをした人: 居ません下記の手順で試してみてください。
1. ヘッダーレイアウトを「2行」にする
カスタマイザー → デザイン → ヘッダー → ヘッダーレイアウト → 「2行」を選択
2. My Snow Monkey プラグインに下記のコードを追加
add_filter( 'snow_monkey_template_part_root_hierarchy', function( $hierarchy ) { $hierarchy = array_merge( [ untrailingslashit( __DIR__ ) . '/view', ], $hierarchy ); return $hierarchy; } );3. My Snow Monkey プラグインの中にフォルダを作成
wp-content/plugins/my-snow-monkey/view/template-parts/header/をつくる。4. 3 で作成したフォルダに、ファイルをコピー
wp-content/themes/snow-monkey/template-parts/header/2row.phpを、wp-content/plugins/my-snow-monkey/view/template-parts/header/にコピーする。5. 4 で作成したファイルに HTML を追記
<?php if ( $has_drawer_nav ) : ?>の前の部分に追加して、下記になるようにする。
<!-- スマホ/タブレット 用 --> <div class="c-row__col c-row__col--fit u-invisible-lg-up"> ここに画像などのスマホ用 HTML </div> <!-- PC 用 --> <div class="c-row__col c-row__col--fit u-invisible-md-down"> ここに画像などの PC 用 HTML </div> <?php if ( $has_drawer_nav ) : ?> <div class="c-row__col c-row__col--fit u-invisible-lg-up"> <?php Helper::get_template_part( 'template-parts/header/hamburger-btn' ); ?> </div> <?php endif; ?>いいねをした人: 居ません
- トピック「ヘッダー上にデザインがある電話を載せたいPCとスマホ共に」には新しい返信をつけることはできません。