はてなデザインZENO-TEALにしてカスタマイズする気になったのはポケ森のせい②
WindowsとMacを比較できるほど詳しくないんですけど、なんとなくMacほしいなーと願ってやまないです。スタバでMac使ってみたい。
というわけで前回の続きです。
ZENO-TEALというデザインテーマを使うに当たって、いろいろカスタマイズしてみたのを書いています。
トップページに戻るボタンを設置しました。
僕の記事は長いんですよね。無駄に。
いつからかわからなくなりましたが、記事を書くときに自分の中での平均文字数が3000字ほどになってしまっているんですよね。
別に1000字の記事でもいいし、というかその方が読みやすいだろうから短くしたいんですが、僕のプレゼン能力では3000字に収めるのが精いっぱいです。
というわけで、簡単に記事の一番上に戻れるボタンを追加しようと思いました。
これはこのテーマを提供してくれているサンプルエントリーには紹介されていなかったので、他の方のブログを参照しました。
勝手にすまんです。助かりました。
これに書いてあるのを引用させてもらいまして
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > 400) {
$('#pagetop').fadeIn();
} else {
$('#pagetop').fadeOut();
}
});
$('#pagetop').click(function() {
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script><a id="pagetop" href="#top" class="page_top" style="display: none;">▲ TOPへ戻る</a>
これをデザイン設定からのカスタマイズからのフッターのHTMLに追加です。
コードの最後の方に書いてある「▲TOPへ戻る」のテキストを自由に変更できると思います。
そのあとは、デザインCSSに
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#fff;
font-size:15px;
text-decoration:none;
background:#000;
border-radius:5px;
background-color:rgba(0,0,0,0.3);
}
#pagetop:hover {
background:#ffdd00;
}
これ記入しただけ。
後は何も理解してませんけど戻るボタンが設置できていました。ドラえもんの道具かよ。世の中には天才がたくさんいるな~
グローバルナビゲーションバー(グローバルメニュー)と、ドロップダウンメニュー
グローバルナビゲーションというのはこれのことらしい。名前かっこよすぎでしょ。
ほんでドロップダウンメニューはこれ。名前そのまますぎでしょ。
これも他の方がブログで紹介しているものを参照しました。
ZENO-TEALのサンプルにもこれらを設置する方法が紹介されていたんですが、
ドロップダウンメニューつけたかったんですけど、この方はドロップダウンメニューは個人的に好きじゃないのでということでドロップダウンメニューのカスタマイズ方法は記載されていませんでした。なんかテキトーに参照していじってみてくれとのこと。僕のおつむじゃ無理でした。笑
というわけで参考にしたのはこちらの記事。
この方の記事にはほかにもシェアボタンの設置とか、フォローボタンの設置とかでお世話になってます。
このコードはめっちゃ長いので、全部は引用しません。
僕が書き込んでいるコードは
デザイン設定からのカスタマイズからのヘッダーHTMLにこれを記入です。
<div id="menu">
<div id="menu-inner">
<div id="btn-content">
<span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
</div>
<ul id="menu-content">
<li>
<a href="http://04kphenix.hatenablog.com/entry/profile"> Profile <i class="blogicon-chevron-down"></i></a>
</li>
<li>
<a> Asia <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="http://04kphenix.hatenablog.com/archive/category/ベトナム">Vietnam</a></li>
<li><a href="http://04kphenix.hatenablog.com/archive/category/タイ">Thailand</a></li>
<li><a href="http://04kphenix.hatenablog.com/archive/category/カンボジア">Cambodia</a></li>
</ul>
</li>
<li>
<a href="http://04kphenix.hatenablog.com/archive/category/雑記"> Silly talk <i class="blogicon-chevron-down"></i></a>
</li>
</ul>
</div>
</div>
ドロップメニューの子カテゴリーの数とか、親カテゴリーの数は同じテンプレのコードをただ増やしたり減らしたりするだけです。
親カテゴリーと子カテゴリーにそれぞれリンク先のURLを貼ることで、それぞれをクリックするとそのURLに飛ぶのですが、子カテゴリーがある時とない時(親カテゴリーのみ)で、親メニューにリンク先の記入欄が必要か必要じゃないか変わってきます。
僕の場合はドロップダウンメニューが一つだけあるのですが、
<a> Asia <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="http://04kphenix.hatenablog.com/archive/category/ベトナム">Vietnam</a></li>
<li><a href="http://04kphenix.hatenablog.com/archive/category/タイ">Thailand</a></li>
<li><a href="http://04kphenix.hatenablog.com/archive/category/カンボジア">Cambodia</a></li>
のAsiaの部分(親カテゴリー)でどこかのURLがあっては困るわけなので、<a href=>のURLを記入するところをまるごと消しました。
デザインCSSに記入するのはこれです。
先ほど紹介させていただいた記事に書かれているのはトグルメニューにも対応したコードを紹介していますが、トグルメニューにするつもりはなかったので、トグルメニュー以降のコードは消しました。
/*****グローバルメニュー****/
#menu{
width: 100%;
margin: 10px auto;
background: #444;/*7*/
}
#menu-inner{
width: 1000px;/*1*/
height: 40px;/*2*/
margin: 0 auto;
background: #444;/*8*/
}
#menu-btn{display: none;}
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
}
#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
}
#menu-content > li > a{
position: relative;
display: block;
height: 100%;
padding-left: 15px;/*3*/
padding-right: 15px;/*3*/
line-height: 40px;/*2*/
background: #444;/*9*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}
#menu-content > li > a:hover{
background: #555;/*11*/
color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*2階層目*/
#menu-content > li > ul.second-content{
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
#menu-content > li:hover > ul.second-content{
visibility: visible;
top: 40px;/*2*/
z-index: 1;
transition: all .3s;
}
#menu-content > li > ul.second-content > li{
text-align: center;
width: 200px;/*4*/
height: 40px;/*5*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*5*/
background: #444;/*13*/
color: #fff;/*14*/
font-size: 70%;
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #555;/*15*/
color: #fff;/*16*/
}
あとこのグローバルナビゲーションはこのデザインテーマを作った方のものとは別なので、こんな感じで隙間ができてしまいます。
ここ。下手くそなのバレバレ(笑)
でもこれを直す術は僕にはありませんので
背景色を黒にしてごまかしました。ごまかし切れていないけど、まだ白よりましだと思います(笑)
なんかの拍子でZENO-TEALのフォーマットで設置できるようになればいいんですけど、しばらくこうしそうです。
もちろんドロップダウンメニューを使わず、グローバルナビだけでいいのなら、このZENO-TEALのサンプルに紹介されているもので事足ります。
こんな感じでした。次回はZENO-TEAL使ってみて注意しなあかんなと思ったことを多分書きます。