IMUZA.com

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

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

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

2020/03/3 はてなブログ

はてなブログ用のボトムナビゲーションをつくってみました。

こんな感じです。

運用サイト:そんなには褒めないよ。映画評

若干仕様が異なりますが、同等のものを公開します。

  • 仕様
  • 導入
    • html
    • javascript
    • css
  • ライセンス等

仕様

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

  • ブレイクポイントは 768px、768px未満のデバイスでボトムナビが出現します
  • ボトムナビの要素は、メニュー、検索、ページトップへ、ページ下部へ、ホームの5つです
  • メニューは カスタマイズ > フッタ に htmlを書きます
  • 検索はサイドバーの検索を利用します
  • ページ下部はページャーがあればページャー、なければ id="box2" に飛びます
  • 768px以上では、メニューをヘッダー右に、検索はサイドバーに、その他は右下に移動します

導入

html

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

<div class="bottom-nav">
<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 class="menu-overlay">
<div class="menu-title">メニュー</div>
<ul class="menu-body">
<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>
  • id名は変更不可、class名は cssと関連させれば変更可

javascript

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

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

css

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

.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-title,
.search-overlay .hatena-module-title {
text-align: center;
margin-bottom: 20px;
font-size: 2rem;
}
.menu-body {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu-body a {
color: white;
border-bottom: 1px solid #ffffff78;
padding: 5px 10px;
margin-bottom: 25px;
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 .menu-body {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
.menu-title {
background: #bc9f9f;
color: white;
cursor: pointer;
padding: 2px 10px;
border-radius: 5px;
font-size: 1.4rem;
margin-bottom: 0;
}
.menu-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-body a {
color: white;
display: block;
-webkit-transition: all .5s;
transition: all .5s;
padding: 10px;
margin-bottom: 0;
border-bottom: none;
}
.menu-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;
}
}

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

ライセンス等

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

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

Google Apps Script(GAS) で reCaptcha 認証をする
Joomla! 3.9.16 セキュリティ & バグフィックスがリリースされています
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

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

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com