Change Forward

「かわる」をアシストする

【はてなブログ限定】スマホ対応メニューバーを表示する

 

はてなブログ限定】スマホ対応メニューバーを表示する

 

【はてなブログ限定】スマホ対応メニューバーは4分で表示できた件

※クリックで拡大できます 

 

先日ご紹介したメニューバーを表示する方法、スマホでも対応できる方法をご紹介します!

 

↓PCでメニューバーを表示する方法はこちら↓ 

www.biz-thinking-k.com

 

PC版では当サイトのトップにあるようにリンクが横に表示されますが、スマホの場合は画面の横幅が狭いので、タップした時にメニューが開くようになっています。

 

スマホでも、自分の手によってサイトがブラッシュアップされていく喜びを感じていただけたら幸いです。

 

【この記事を読むメリット 】

  • スマホでメニューバーを表示できるようになる
  • スマホからのアクセスが増える(かも)

 

スマホからのアクセス対策は大切です!

 

それでは今回のコンテンツです。

 

 

まずはPC画面で表示できるように

スマホでメニューバーを利用できるためには、PC側での表示が終わっていることが前提となります。

 

下記の記事を参考に、コピペで準備いただければOKです。3分でできます。

 

www.biz-thinking-k.com

 

 

スマホ対応は1分でできる

さて、PCの表示が済んでいれば、スマホでの表示は1分でできます

手順をご紹介します。

 

まずはデザイン>カスタマイズの画面から「フッタ」をクリック。

  

【はてなブログ限定】スマホ対応メニューバーは4分で表示できた件

 

フッタの入力エリアをクリック。

 

【はてなブログ限定】スマホ対応メニューバーは4分で表示できた件

 

編集ができるようになりますので、下記のコードをコピぺすれば完了です!

コピペが終わったら青の「変更を保存するボタン」のクリックを忘れずに

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
$(".menu-toggle").on("click", function() {
$(".main-navigation").toggleClass("toggled");
});
})(jQuery);
</script>

 

【はてなブログ限定】スマホ対応メニューバーは4分で表示できた件

 

いかがでしょうか、画面をタップするとメニューが開くようになったかと思います。

 

 

これからはスマホ対策も重要

最近はスマホからのアクセスも増えてきており、ブログのスマホ対策も重要になってきていると感じてます。

 

【ご参考】当サイトのスマホ(モバイル)からのアクセス

【はてなブログ限定】スマホ対応メニューバーは4分で表示できた件

 

ぜひスマホ向けにも、いろいろなデザインのアレンジをしてみて頂ければと思います。

 

今回もご覧くださり、ありがとうございました。

 

このブログははてなブログで運営しています。
スター・ブックマーク・読者登録いただけると励みになります。
 

 

2019.6.23 公開

2019.7.6 更新