サポート » 使い方全般 » スマホ メニュー

  • 解決済 aotani

    (@aotani)


    ワードプレス twenty seventeenをテーマにしています。

    パソコンでは 三メニューはスクロールしても
    画面上に常に残ってくれますが

    スマホでは スクロールとともに
    画面からなくなってしまします。(一番上にスクロールを戻せばありますが)

    できれば 
    スクロールしてもメニューだけは画面上に常においておきたいです。

    このようなカスタムは可能なんでしょうか?
    よろしくお願いします

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • CG

    (@du-bist-der-lenz)

    スクロールしてもグローバル・ナビゲーション・メニューを上部に常においておくカスタムは可能です。そのような手段をどうしたいか次第です。

    トピック投稿者 aotani

    (@aotani)

    できるのです!

    スマホでも メニューだけをおいておくには
    ワードプレス twenty seventeenの場合
    どうすればいいのですか?

    CG

    (@du-bist-der-lenz)

    カスタマイズには無いカスタム編集」と言えない。グローバル・ナビゲーションの記述がある、WordPressのテーマであれば、どれでもできることです。Twenty Seventeenでの問題は有りません。答えは出ているようなもので、意欲を掻き立てるほども有りません。繰り返しになりますので、確認は最後にしたいのですが、どういう手段で施工したいのか、可能なのか問うてます。最も簡易なのは、これでいいでしょう。

    トピック投稿者 aotani

    (@aotani)

    手段とは、cssのことでしょうか?

    子テーマでテーマの編集から以外しかカスタム方法はわかりません。。
    それ以外で難しすぎるのは おそらく無理っぽいです。

    CG

    (@du-bist-der-lenz)

    子テーマで、テーマの編集は使わないということでしょうか。スタイルシートが理解できているようなので、固定にするだけなら、基本なので言わずもがなですが、PC時のスタイルシートを参考にしましょう。

    トピック投稿者 aotani

    (@aotani)

    すいません いつも説明下手すぎて・・・

    テーマの編集の仕方もわかりません。
    それ以外に編集するモノもあるかどうかも分かります。
    スタイルシートもやったことないです。

    すごく基本的なこと事体も分かっておりません。

    スマホでの 「三メニューボタンが流れないようにしたい」の
    質問の説明文もあっていないような・・・ 間違っているような気がします。

    CG

    (@du-bist-der-lenz)

    CSSの固定表示ならposition: fixed;ですね。モバイル時のハンバーガーメニューボタンを固定したいということだと、解釈してモデルページを用意したのですが、違いましたか。テーマの編集をするのでもなく、スタイルシートだけで済ませることなら、子テーマの必要も有りませんよ。管理の面倒が増えるばかりです。わたしはスタイルシートは、Twenty Seventeen だったら、投稿の日付を変更日に変更するなど、表示の追加が必要なことだけです。

    こんにちは

    スタイルシートもやったことないです。

    ご希望の機能を実現するには、スタイルシートおよび JavaScript を記述する必要があります。
    「スタイルシートもやったことない」となると少しハードルが高いかもしれません。

    ご希望の機能を実装しているテーマやプラグインを探すといいかと思います。

    いちおう、それっぽくなる例を上げておきます。

    テーマの style.css またはカスタマイズの [追加 CSS] などに、

    @media screen and (max-width: 48em) {
    	.site-navigation-fixed.navigation-top {
    		bottom: auto;
    		position: fixed;
    		left: 0;
    		right: 0;
    		top: 0;
    		width: 100%;
    		z-index: 7;
    	}
    	.admin-bar .site-navigation-fixed.navigation-top {
    		top: 0;
    	}
    
    	.menu-main-container {
    		max-height: 90vh;
    		overflow: hidden auto;
    	}
    }

    テーマの functions.php に、

    function my_enqueue_scripts() {
    	$script = <<<SCRIPT
    (function($) {
    	var body = $('body'),
    		navigation = body.find('.navigation-top'),
    		customHeader = body.find('.custom-header'),
    		navigationOuterHeight = navigation.outerHeight(),
    		headerOffset = (body.hasClass('has-header-image')) ? customHeader.innerHeight() - navigationOuterHeight : 0;
    	$(window).on('scroll', function() {
    		if ($(window).scrollTop() >= headerOffset) {
    			navigation.addClass('site-navigation-fixed');
    		} else {
    			navigation.removeClass('site-navigation-fixed');
    		}
    	});
    })(jQuery);
    SCRIPT;
    	wp_add_inline_script( 'twentyseventeen-global', $script );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 11 );
    トピック投稿者 aotani

    (@aotani)

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

    できました!!
    ishitakaさん gatolabo さん からのアドバイスで、簡単にすんなりと解決しました。
    CGさんにもいろいろとアドバイスをいつもいただきまして恐縮です。

    @media screen and (max-width: 48em) {
    .site-navigation-fixed.navigation-top {
    bottom: auto;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 7;
    }
    を追加プラグインSimple Custom CSSに にコピペして追加するだけでできました

    すっきりです。ありがとうございました

    CG

    (@du-bist-der-lenz)

    CSS追加するには、カスタマイズの「追加CSS」で十分ですよ。「カスタマイズ」はないことで、使用していくことを非難はしませんが。考え方はそれぞれですから。プラグイン「Simple Custom CSS」を無効化した時、どう変わるでしょう。gatolaboさんの説明にも示唆が含まれていましたが、モバイルは画面が狭いのと、スマホでは下部にメニューボタンを廃するのが操作性はよくないでしょうか。Twenty Seventeenでは、モバイル表示も支障はないでしょうが、店の予約などの用途を目的としたら、スマホ操作性の良いテーマ作りが必要でしょう。親テーマの仕様が変わった時に、子テーマとズレが生じる場合がありますので、それはそれで大変ですよ。そして、ishitakaさんのおすすめにもあるよう、「希望の機能を実装しているテーマやプラグインを探す」のが、後々メンテナンスに振り回されないかも。Twenty Seventeenの子テーマあたりから、試すことを勧めます。

    トピック投稿者 aotani

    (@aotani)

    CGさん

    プラグイン「Simple Custom CSS」と
    カスタマイズの「追加CSS」は基本的に 一緒のように追加できると
    考えてもいいのでしょうか?

    それなら
    プラグイン「Simple Custom CSS」に追加したコードを
    コピペして、カスタマイズの「追加CSS」に追加するだけでもOKなのかな?

    CG

    (@du-bist-der-lenz)

    プラグイン「Simple Custom CSS」に追加したコードをコピペして、カスタマイズの「追加CSS」に追加する、と重複して見分けつかないでしょう。プラグイン「Simple Custom CSS」を無効化した時、どう変わるでしょう。それで、プラグインで行うことと、データベースに保存させることの違いが理解できる、、、、可能性に期待しています。

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • トピック「スマホ メニュー」には新たに返信することはできません。