【はてなブログコピペ】スマホ対応メニューバーを表示する方法
※クリックで拡大できます
先日ご紹介したメニューバーを表示する方法、スマホでも対応できる方法をご紹介します！
↓PCでメニューバーを表示する方法はこちら↓
【はてなブログ限定】メニューバーを３分で表示する方法 - Change Forward
PC版では当サイトのトップにあるようにリンクが横に表示されますが、スマホの場合は画面の横幅が狭いので、タップした時にメニューが開くようになっています。
スマホでも、自分の手によってサイトがブラッシュアップされていく喜びを感じていただけたら幸いです。
【この記事を読むメリット 】
- スマホでメニューバーを表示できるようになる
- スマホからのアクセスが増える（かも）
それでは今回のコンテンツです。
まずはPC画面で表示できるように
スマホでメニューバーを利用できるためには、PC側での表示が終わっていることが前提となります。
下記を参考に、コピペで準備いただければOKです。３分でできます。
【はてなブログ限定】メニューバーを３分で表示する方法 - Change Forward
スマホ対応は１分でできる
さて、PCの表示が済んでいれば、スマホでの表示は１分でできます。
手順をご紹介します。
まずはデザイン＞カスタマイズの画面から「フッタ」をクリック。
フッタの入力エリアをクリック。
編集ができるようになりますので、下記のコードをコピぺすれば完了です！
コピペが終わったら青の「変更を保存するボタン」のクリックを忘れずに。
<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>
いかがでしょうか、画面をタップするとメニューが開くようになったかと思います。
これからはスマホ対策も重要
最近はスマホからのアクセスも増えてきており、ブログのスマホ対策も重要になってきていると感じてます。
【ご参考】当サイトのスマホ（モバイル）からのアクセス
ぜひスマホ向けにも、いろいろなデザインのアレンジをしてみて頂ければと思います。
【デザインを整えたら収益化も】
アフィリエイトは自分のサイトに広告を表示し、申込の件数によって報酬がもらえる仕組みです。メディアを持っていれば、働かなくても収入が得られるビジネスとして、根強い人気があります。
興味のある方は下記のリンクからご覧ください。
【バリューコマース】
【もしもアフィリエイト】
