ヘッダー上にデザインがある電話を載せたいPCとスマホ共に

0
いいねをした人: 居ません
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #57389
    snssenyou21@gmail.com
    閲覧者
    2

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】
    【お使いのブラウザ】

    Google Chrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ローカル環境で作っている状況なので現在できないです。

    ===

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

    ちょっとサイズ感や具体的な場所がわからないためベストな答えではないかもしれませんが、手っ取り早いのは「ヘッダーコンテンツ」に入れてしまう方法かなと思います。

    画像にするか、HTML + CSS で組んだものを、カスタマイザー → デザイン → ヘッダー → ヘッダーコンテンツに入力で、ヘッダーの右上の表示されるようになります。

    ヘッダーコンテンツではサイズが小さい、ヘッダーのレイアウトごと改造したいということであれば、また別な方法をとることになります。

    0
    いいねをした人: 居ません
    #57685
    snssenyou21@gmail.com
    閲覧者
    2

    ヘッダーコンテンツでやろうとすると、スマホで表示の場合下に入ってしまうのですが「MENU」横におけないでしょうか?

    また「テスト」という画像を追加CSSで入れたのですがこのように重なる形で表示されてしまったのですがどのようにすればきれいに表示されるでしょうか?

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

    ちょっとどういう形にされたいのかがよく想像できていないので、可能なら PC とスマホでどのような見た目にしたいのかヘッダー全体のデザイン画像を貼り付けてもらえないでしょうか?

    0
    いいねをした人: 居ません
    #57695
    snssenyou21@gmail.com
    閲覧者
    2

    お世話になります。ありがとうございます。

    参考資料です。

    スマホ表示

    ヘッダーロゴ横に電話ボタンを作りたいです。現状下に回ってしまします。また写真のようにコンパクトな画像を貼り付けたいです。

    こちらも上部のヘッダーロゴ横に電話番号と問い合わせホームを載せたいです。問い合わせホームを載せたいです。

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

    スクショありがとうございます。

    ちょっとカスタマイザーでここまで変えるのは難しいので、フックでヘッダーの HTML をゴリゴリ書き換えるか、全く新しくヘッダーのテンプレートをつくるかが必要になってくると思います。どちらかといえば前者のほうが手間が少ないので、ちょっと今日サンプルコードを書いてみます。

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

    下記の手順で試してみてください。

    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; ?>
    0
    いいねをした人: 居ません
    #57816
    snssenyou21@gmail.com
    閲覧者
    2

    早速、ありがとうございます。細かくありがとうございました。早速やってみます。助かりました。

    0
    いいねをした人: 居ません
    #57817
    snssenyou21@gmail.com
    閲覧者
    2

    すみません。my-snow-monkeyプラグインとはどこのことを指していますか?

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

    これです!

    もし子テーマをお使いの場合は、前述した「My Snow Monkey プラグインに下記のコードを追加」を飛ばして、子テーマの中に 子テーマ/template-parts/header/2row.php をつくっても大丈夫です。

    0
    いいねをした人: 居ません
    #58588
    snssenyou21@gmail.com
    閲覧者
    2

    ありがとうございました。

    0
    いいねをした人: 居ません
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • トピック「ヘッダー上にデザインがある電話を載せたいPCとスマホ共に」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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