iiie.nagoya

物づくりと生活、"経験"を記事へ

フルスクリーンメニューを設置する【gram】

f:id:gorislog:20190407194632p:plain

 

はてなブログテーマ『gram』のカスタマイズ記事です。

 

gramsample.hatenablog.jp

 

 

フルスクリーンメニューについて

 

f:id:gorislog:20190425224004g:plain

 

gramにはフルスクリーンメニューCSSが最初から組み込まれています

 

プルダウン式のグローバルメニューの様な多くのリンクには向きませんが、動きのある要素で、読者の方に楽しんでもらえる仕掛けです。

 

”fixed”で右上に固定したメニューボタンをクリック(タップ)すると、全画面に透過背景が広がり、テキストリンクが左側から流れてくる動作です。

 

フルスクリーンメニューはレスポンシブ対応ですので、PC画面・スマホ画面の両方で動作します。

 

5要素表示できるように指定していますが、要素が多くなれば多くなるほど動作が不安定になる可能性があります。※ページが重いこともありますが、6要素でスマホでトライしたら動きにムラがありました。

 

コード

CSSはテーマ内に格納されていますので、CSSの追記は不要です。

 

『デザイン』→『カスタマイズ』→『ヘッダ』→『タイトル下』にhtmlを追記します。

 

<a class="hamburger" href="#cp_fullscreenmenu"></a>
<ul id="cp_fullscreenmenu">
<li><a href="URL">テキスト</a></li>
<li><a href="URL">テキスト</a></li>
<li><a href="URL">テキスト</a></li>
<li><a href="URL">テキスト</a></li>
<li><a href="URL">テキスト</a></li>
</ul>

 

  • URL ⇒ リンク先のアドレス
  • テキスト ⇒ 表示するテキスト

 

gramのデモページでは以下のhtmlを記載しています。

 

<a class="hamburger" href="#cp_fullscreenmenu"></a>
<ul id="cp_fullscreenmenu">
<li><a href="https://gramsample.hatenablog.jp/"><i class="blogicon-home"></i> ホーム</a></li>
<li><a href="https://gramsample.hatenablog.jp/entry/2019/04/24/225116"><i class="blogicon-star"></i> テーマについて</a></li>
<li><a href="https://gramsample.hatenablog.jp/entry/2019/04/25/194831"><i class="blogicon-cog"></i> カスタマイズ</a></li>
<li><a href="https://gramsample.hatenablog.jp/entry/2019/04/25/194208"><i class="blogicon-mail"></i> お問い合わせ</a></li>
<li><a href="https://www.iiie.nagoya/"><i class="blogicon-logout"></i> 制作者のブログ</a></li>
</ul> 

 

 <i class="〇〇〇"></i>の部分でアイコンを指定しています。

はてなブログでは、別途読み込まなくてもアイコンフォントが使用できます。

 

2019/04/30:【追記】閉じるボタンの追加方法

フルスクリーンメニューの閉じるボタンの設置方法について要望があったので追記します。

 

フルスクリーンメニュー(ハンバーガーメニュー)はブラウザバックをするとメニューを閉じる事ができます。

その特性を使って、Javascriptのhistory.backを使用して閉じます。

 

<li><a href="javascript:history.back()">  <i class="blogicon-chevron-down"></i>  </a></li>

 

<i class="~"></i>は表示するアイコン。ここを消去して『閉じる』などに変更してもOKです。今回、アイコン一文字のみの表示にしたので、メニュー表示時に右側からのスライドが安定しなかったので、<i class="~"></i>の両側にスペースを記載しています。長い文章なんかで表示する場合はスペースは不要です。

 

使用できるアイコンフォント一覧

www.foxism.jp

 

2019/05/04:【追記】三本線ボタンを"MENU"又はアイコン表記にする

フルスクリーンメニューの三本線をMENU(文字)表記にする場合

CSSの"border-〇〇"にて表示していますので、その部分を"none"で打消し、content部に記載したい内容を書き込めば、表示することができます。

 

”MENU”の場合、以下のコードをCSSに追記すれば表示が三本線からMENUに変更されます。

.hamburger {
right: 2em;
border-top: none;
}
.hamburger:before {
content: "MENU";
border-top: none;
border-bottom: none;
}

 

文字ではなく、はてなブログ公式のアイコンフォントを使用する場合

CSSにて以下のコードを変換・使用すればOKです。

 

三本線ではなく、アイコンフォントの★に変更されます。

.hamburger {
right: 1em;
border-top: none;
}
.hamburger:before {
font-family: blogicon;
font-size: 1.5em;
content: "\f02d";
border-top: none;
border-bottom: none;
}

 

.hamburger内のrightにて、画面右側よりどれだけ離すかを指定しています。表示する内容に対して各自調整をお願いします。

 

三本線(アイコンフォント)+MENU(文字)の表記の場合

※ただし、位置指定が強引ですので、表示環境によっては位置がずれる可能性があります。

.hamburger {
right: 2em;
border-top: none;
}
.hamburger:before {
top: -.03em;
left: -1.4em;
font-family: blogicon;
font-size: 1em;
content: "\f003";
border-top: none;
border-bottom: none;
}
.hamburger:after {
content: "MENU";
font-size: 1em;
}

 

参考

copypet.jp