かくほーログ

見た感じ、そのまんま

はてなデザインZENO-TEALにしてカスタマイズする気になったのはポケ森のせい②

f:id:kakuho22:20171128180603j:plain

 

僕のPCはMacじゃなくてWindowsなんですけどね。

WindowsMacを比較できるほど詳しくないんですけど、なんとなくMacほしいなーと願ってやまないです。スタバでMac使ってみたい。

 

 

 

というわけで前回の続きです。

 

04kphenix.hatenablog.com

 

ZENO-TEALというデザインテーマを使うに当たって、いろいろカスタマイズしてみたのを書いています。

 

 

 

トップページに戻るボタンを設置しました。

 

 

僕の記事は長いんですよね。無駄に。

いつからかわからなくなりましたが、記事を書くときに自分の中での平均文字数が3000字ほどになってしまっているんですよね。

別に1000字の記事でもいいし、というかその方が読みやすいだろうから短くしたいんですが、僕のプレゼン能力では3000字に収めるのが精いっぱいです。

 

というわけで、簡単に記事の一番上に戻れるボタンを追加しようと思いました。

 

これはこのテーマを提供してくれているサンプルエントリーには紹介されていなかったので、他の方のブログを参照しました。

to-torinos.hatenablog.com

 

勝手にすまんです。助かりました。

 

これに書いてあるのを引用させてもらいまして

 

<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;

 

 

これ記入しただけ。

後は何も理解してませんけど戻るボタンが設置できていました。ドラえもんの道具かよ。世の中には天才がたくさんいるな~

 

 

 

 

グローバルナビゲーションバー(グローバルメニュー)と、ドロップダウンメニュー

 

 

グローバルナビゲーションというのはこれのことらしい。名前かっこよすぎでしょ。

f:id:kakuho22:20171124184522p:plain

 

ほんでドロップダウンメニューはこれ。名前そのまますぎでしょ。

f:id:kakuho22:20171124184914p:plain

 

これも他の方がブログで紹介しているものを参照しました。

ZENO-TEALのサンプルにもこれらを設置する方法が紹介されていたんですが、

zeno-teal.hatenablog.com

ドロップダウンメニューつけたかったんですけど、この方はドロップダウンメニューは個人的に好きじゃないのでということでドロップダウンメニューのカスタマイズ方法は記載されていませんでした。なんかテキトーに参照していじってみてくれとのこと。僕のおつむじゃ無理でした。笑

 

というわけで参考にしたのはこちらの記事。

www.yukihy.com

この方の記事にはほかにもシェアボタンの設置とか、フォローボタンの設置とかでお世話になってます。

 

このコードはめっちゃ長いので、全部は引用しません。

僕が書き込んでいるコードは

デザイン設定からのカスタマイズからのヘッダー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*/
}

 

 

あとこのグローバルナビゲーションはこのデザインテーマを作った方のものとは別なので、こんな感じで隙間ができてしまいます。

 

f:id:kakuho22:20171128190305p:plain

 ここ。下手くそなのバレバレ(笑)

 

でもこれを直す術は僕にはありませんので

f:id:kakuho22:20171128190614p:plain

背景色を黒にしてごまかしました。ごまかし切れていないけど、まだ白よりましだと思います(笑)

なんかの拍子でZENO-TEALのフォーマットで設置できるようになればいいんですけど、しばらくこうしそうです。

 

もちろんドロップダウンメニューを使わず、グローバルナビだけでいいのなら、このZENO-TEALのサンプルに紹介されているもので事足ります。

 

 

 

 

こんな感じでした。次回はZENO-TEAL使ってみて注意しなあかんなと思ったことを多分書きます。

 

 

 

 

ブログランキング

にほんブログ村 大学生日記ブログ 文系大学生へ

にほんブログ村 その他生活ブログへ

ブログランキング・にほんブログ村へ