IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / はてなブログ / (汎用版)はてなブログ用ボトムナビゲーション Bottom Navigation

(汎用版)はてなブログ用ボトムナビゲーション Bottom Navigation

2020/03/18 はてなブログ

はてなブログ用のボトムナビゲーションに改良を加え汎用性を高めました。

まずは元記事をお読みください。

www.imuza.com

  • 改良点
  • 導入
    • html
    • javascript
    • css
  • ライセンス等

改良点

  • ボトムナビゲーション出現のブレイクポイントを設定できるようにしました
    data-breakpoint="768" のようにカスタムデータ属性で指定します
  • サイドバーモジュールのカテゴリーをメニューにできます(選択可)
  • 検索モジュールをボトムエディットエリアに直書きできます(選択可)
  • ページ下部へのスクロール先を id="main" の下部に変更しました
  • デスクトップのメニュー表示を選択できるように変更しました

詳細は下記 html をご覧ください。

当然ながらレスポンシブのテーマ用です。公式テーマのSmooth(デフォルト)でチェックしています。機能的にはレスポンシブのテーマであれば問題ないとは思いますが、デスクトップでは cssでの調整が必要になると思います。

導入

html

カスタマイズ > フッタ に次の書式で htmlを書きます。

  • ブレイクポイントは、ボトムナビゲーション要素に data-breakpoint で指定してください(必須)
    下記の例では、768px未満でボトムナビゲーションが出現します
    css の @media (min-width: 768px) と合わせる必要があります
  • サーチオーバーレイ要素は、下記のように子要素がなければサイドバーモジュールの検索を利用し、子要素として直書きすればそれを使用します
  • メニューオーバーレイ要素は、下記のように子要素があればそれを使用し、子要素がなければサイドバーモジュールのカテゴリーをメニューとして使用します
  • メニューオーバーレイ要素にカスタムデータ要素(値不要) data-desktop を書いておけば、ブレイクポイント以上ではヘッダ右(cssで変更可)にメニューボタンが出現し、マウスオーバーでメニューが表示されます
    カスタムデータ要素 data-desktop がなければ、直書きのメニューは表示されませんし、カテゴリーはデフォルトのサイドバーに表示されます

<div id="bottom-nav" class="bottom-nav" data-breakpoint="768">
<ul class="bottomnav-list">
<li id="hamburger-menu"><span class="hamburger-menu"></span></li>
<li id="search-up"><i class="blogicon-search"></i></li>
<li id="scroll-up"><i class="blogicon-chevron-up"></i></li>
<li id="scroll-down"><i class="blogicon-chevron-down"></i></li>
<li><a href="/"><i class="blogicon-home"></i></a></li>
</ul>
</div>
<div id="search-overlay" class="search-overlay">
</div>
<div id="menu-overlay" class="menu-overlay" data-desktop>
<div class="hatena-module hatena-module-category">
<div class="hatena-module-title">メニュー</div>
<div class="hatena-module-body">
<ul class="hatena-urllist">
<li><a href="">メニュー</a></li>
<li><a href="">メニュー</a></li>
<li><a href="">メニュー</a></li>
<li><a href="">メニュー</a></li>
<li><a href="">メニュー</a></li>
<li><a href="/archive">一覧</a></li>
</ul>
</div>
</div>
</div>
<!-- 下記の場合はサイドバーモジュールのカテゴリーをメニューとして使用 -->
<div id="menu-overlay" class="menu-overlay" data-desktop>
</div>
  • id名は変更不可、class名は cssと関連させれば変更可

javascript

カスタマイズ > フッタ に次の scriptタグを書きます。

<script async src="https://imuzacom.github.io/js/bottomnav-u.min.js"></script>

css

カスタマイズ > デザインcss に次の cssを追加します。

@charset "UTF-8";
.bottom-nav * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bottom-nav {
color: white;
z-index: 99999;
position: fixed;
/* ボトムナビ背景色 */
background: #362626;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.bottom-nav a {
color: white;
}
.menu-overlay {
color: white;
z-index: 9999;
width: 100%;
bottom: 0;
top: 0;
left: 0;
right: 0;
position: fixed;
/* メニュー背景色 */
background: -webkit-gradient(linear, left top, left bottom, from(#725050), to(#362626));
background: linear-gradient(to bottom, #725050, #362626);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
padding: 30px 30px 100px;
overflow-y: auto;
height: auto;
}
.menu-show {
overflow: hidden;
}
.menu-show .hamburger-menu::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: none;
box-shadow: none;
background: white;
}
.menu-show .hamburger-menu::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: none;
box-shadow: none;
background: white;
}
.menu-show .menu-overlay {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.menu-overlay .hatena-module-title,
.search-overlay .hatena-module-title {
text-align: center;
margin-bottom: 20px;
font-size: 2rem;
}
.menu-overlay .hatena-module-body a {
color: white;
padding: 5px 10px;
display: block;
}
.search-overlay {
color: white;
z-index: 9999;
width: 100%;
bottom: 0;
top: 0;
right: 0;
left: 0;
position: fixed;
/* 検索背景色 */
background: -webkit-gradient(linear, left top, left bottom, from(#725050), to(#362626));
background: linear-gradient(to bottom, #725050, #362626);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
padding: 30px 30px 100px;
overflow: scroll;
height: auto;
}
.blogicon-search::before {
content: "\f01a";
}
.search-show {
overflow: hidden;
}
.search-show .blogicon-search:before {
content: "\f025";
}
.search-show .search-overlay {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.bottomnav-list {
margin: 0;
padding: 0;
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
width: 100%;
}
.bottomnav-list li {
width: 16vw;
margin: 0 3vw;
text-align: center;
}
.hamburger-menu {
display: inline-block;
position: relative;
width: 30px;
height: 100%;
}
.hamburger-menu::before, .hamburger-menu::after {
content: "";
background: white;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 3px;
-webkit-transition: all 300ms;
transition: all 300ms;
}
.hamburger-menu::before {
-webkit-box-shadow: 0px -10px 0px white;
box-shadow: 0px -10px 0px white;
}
.hamburger-menu::after {
-webkit-box-shadow: 0px 10px 0px white;
box-shadow: 0px 10px 0px white;
}
.blogicon-home,
.blogicon-chevron-up,
.blogicon-chevron-down,
.blogicon-search {
font-size: 30px;
}
@media (min-width: 768px) {
.bottom-nav {
left: inherit;
right: 0;
width: auto;
background: none;
height: 8vw;
}
#search-up,
#hamburger-menu {
display: none;
}
.menu-overlay {
position: absolute;
top: 50px;
right: 50px;
bottom: inherit;
left: inherit;
width: auto;
padding: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
height: auto;
overflow: inherit;
background: none;
}
.menu-overlay:hover .hatena-module-body {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
.menu-overlay .hatena-module-title {
background: #bc9f9f;
color: white;
cursor: pointer;
padding: 2px 10px;
border-radius: 5px;
font-size: 1.4rem;
margin-bottom: 0;
}
.menu-overlay .hatena-module-body {
position: absolute;
right: 0;
background: #bc9f9f;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-transition: opacity .3s, -webkit-transform .5s;
transition: opacity .3s, -webkit-transform .5s;
transition: transform .5s, opacity .3s;
transition: transform .5s, opacity .3s, -webkit-transform .5s;
width: 300px;
padding: 20px;
border-radius: 5px;
}
.menu-overlay .hatena-module-body a {
color: white;
display: block;
-webkit-transition: all .5s;
transition: all .5s;
padding: 10px;
margin-bottom: 0;
border-bottom: none;
}
.menu-overlay .hatena-module-body a:hover {
text-decoration: none;
background: #725050;
}
.bottomnav-list li {
width: 8vw;
margin: 0 .5vw;
text-align: center;
border-radius: 50%;
/* デスクトップのスクロールボタン色 */
background: -webkit-gradient(linear, left top, left bottom, from(#bc9f9f), to(#362626));
background: linear-gradient(to bottom, #bc9f9f, #362626);
opacity: .7;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.bottomnav-list li:hover {
cursor: pointer;
opacity: 1;
}
.blogicon-home,
.blogicon-chevron-up,
.blogicon-chevron-down {
font-size: 5vw;
}
}
  • メニューのスタイルはそれぞれテーマの hatena-module の css によります

cssはいろいろ調整してください。

ライセンス等

ご使用の場合は以下の注意事項をお守りください。

  • ライセンスは IMUZA.com にあります。
  • 当記事の Javascript を使用してのはてなブログ用テーマの制作、公開は商用以外は自由です。ただし、記事内、あるいは紹介サイト内に IMUZA.com へのリンクを挿入してください。
  • 当記事の CSS への改変、公開は自由です。
  • 特別問題が発生することはありませんが自己責任でお使いください。
    問題が発生した場合は削除すればもとに戻ります。
  • お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。

Joomla! 3.9.16 セキュリティ & バグフィックスがリリースされています
モバイルユーザビリティエラーやっと解消
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com