こんにちは。初めましての人もそうでない人も、
今日は無料版のはてなブログでスマホにメニューを表示させる方法についてお伝えいたします。
……というのも、私も人様のブログを参考に表示させてみようとしたのですが、検索トップの方に出てくる方法だと無料版でスマホ表示させることができず。
試行錯誤した結果、表示できるようになったので、記事として残しておこうと思った次第です。
※カテゴリを開発ノウハウにするのは微妙だなぁ……と思いつつ、一応htmlとかcss関係してくるし、ということでこのカテゴリに入れました。
目次
前書き
完成イメージ
完成イメージはこんな感じです。
MENUをクリックすると開きます。
公式テーマのテンプレ利用
前提として、ブログのデザインとして公式テーマのテンプレを利用します。
はてなブログの管理画面 > デザイン から表示されるこれです。
オリジナルのデザイン使いたい、という方は同じ方法で適用されるか不明ですので、ご了承ください。
※有料のPro版であれば下記の記事で紹介されている方法で表示できます。
はてなブログ無料版でスマホにメニューを表示させる方法
最新版のjQueryを参照させる
これはいくつかの記事で紹介されている話ですが、まず最新版のjQueryを参照させましょう。
以下のサイトからjQueryの3系の最新版を参照するソースをコピペします。
コピペしたら、はてなブログの管理画面から詳細設定を開きます。
下の方にスクロールすると「head内タグ」という欄に「headに要素を追加」という項目があります。
ここに先ほどコピペした内容をはりつけましょう。
レスポンシブ対応のテンプレを選択する
前書きしたように、デザイン設定で公式テーマを利用します。
その際に、レスポンシブ対応(*1)のテーマを選択します。
まず選択したいテーマがあったら、テーマ名横のiマークからテーマの情報を参照します。
下の方にスクロールするとテーマの説明が表示されます。
テーマの説明に、「レスポンシブデザインに対応しています」と記載されていればOKです。
*1. レスポンシブ対応とは、PCやタブレット、スマホとユーザーが操作する画面の大きさが異なっても、Webサイトの表示が画面の大きさに応じて綺麗に表示されるように対応していることです。
ヘッダにメニュー用のHTMLを追記する
デザインの設定画面からヘッダにメニュー用のHTMLを追記します。
下記のデザイン設定画面内、ヘッダのタイトル下、という欄になります。
追記するHTMLは下記の内容です。
ご自身のブログメニューでリンクをはりたい内容にあわせて、修正してください。
はてなブログデザイン設定画面ヘッダのタイトル下(HTML)
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<!-- href内のURLとカテゴリ名は適宜修正してください -->
<li><a href='https://YourBlogURL.hatenablog.com'>TOP</a></li>
<li><a href='https://YourBlogURL.hatenablog.com/archive/category/category1'>カテゴリ1</a></li>
<li><a href='https://YourBlogURL.hatenablog.com/archive/category/category2'>カテゴリ2</a></li>
<li><a href='https://YourBlogURL.hatenablog.com/archive/category/category3'>カテゴリ3</a></li>
</div>
</ul>
<!-- 3.X.Xの部分は先にコピペしたjQueryのバージョンを入力してください -->
<script type="text/javascript" src="http://code.jquery.com/jquery-3.X.X.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>
CSSを設定する
同じくデザイン設定用画面からメニュー用のCSSを設定します。
下記のデザイン設定画面内、デザインCSS、という欄になります。
追記するCSSは以下の内容です。
背景色や文字色はご自身で選んだデザインに合わせて適宜修正してください。
※カラーコードは以下をご参照ください。
CSSにはデフォルトで選択したテーマについての記述があるので、
デフォルトの内容は消さずに追記しましょう。
はてなブログデザイン設定画面デザインCSS(css)
/* デフォルトで記載されている内容に追記する */
#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #ff99a8;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;
}
/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #ff99a8;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #ff99a8;/*リスト文字の背景色*/
margin: 0 auto;
text-align: right;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #ffffff;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}
レスポンシブデザインモードに切り替える
デザイン設定画面のスマートフォンマークを選択し、一番下部にある詳細設定を開きます。
するとレスポンシブデザインというチェックボックスがありますので、それを選択します。
以上で設定は完了です。
参考にした記事
説明の流れ上、ソースコード等特に注釈なく引用しましたが、基本的には下記のサイトから引用しています。
グローバルメニューの作成基本については下記の記事を参照させていただきました。
最新版のjQueryを適用しましょう、という話は大元は多分こちらの記事です。
kurokinomizuiwa.hatenablog.com
またスマホでの表示方法を模索した際にはこちらを参照しました。
ただこちらに記載されている方法は、有料のPro版じゃないとできない方法です。
以上です。参考になりましたでしょうか？
-----------------------------------
素材取得元
