読者です 読者をやめる 読者になる 読者になる

スマフォVIEWにカテゴリメニューを設置する ※初心者・素人向け

f:id:paradisecircus69:20150731105444j:plain
※以下、プロ、玄人お断り

ウチのブログをスマフォで観ている方はご存知かと思いますが に、カテゴリ選択できるメニューを付けてみました
以下、メニュー設置方法についての記事。

では でも飲みながらどうぞ。





【スポンサーリンク】





メニュー開発された方

もちろん自分で作ったわけじゃありません。
アホなズブの素人ですから。
Livedoorブログやってたころ手打ちでチマチマやってた程度。

いいメニューがないかと探していたところ、

mizna.hatenablog.com

水菜さんの、この記事を見つけまして。
いやー、喜欢喜欢。すばらしい。

スマフォ用に探してたものにピッタリ
元にして、ちょこっといじりました。

カスタムして設置する


まずHTMLから

<ul id='navi_sp'>
  <li>Menu</li>
  <li><a href='飛ばしたいカテゴリのアドレス'>カテゴリ名</a></li>
  <li><a href='トップページのアドレス'>&lt;&lt; HOME</a></li>
</ul>

カテゴリの数はブログに合わせて増減できます。
増やしたい場合は、
<li><a href='カテゴリのアドレス'>カテゴリ名</a></li>
をコピペして使いましょう。
ただし、あまりカテゴリが多いと画面からはみ出すことがあるので注意を
※特に横向きにした場合


次にCSSです

<style type="text/css">
<!--
#navi_btn {
    position:fixed;
    float: right;
    top: 50px;
    right: 10px;
    font-size: 40px;
    color: rgba(0,0,0,0.2);
    line-height: 30px;
    padding: 0 4px;
    z-index: 10;
}

#navi_sp {
    position:fixed;
    float: right;
    top: 30px;
    right: 0;
    width: 100%;
    display:none;
    z-index: 5;
}

#navi_sp li {
    list-style: none;
    color: #fff;
    line-height:40px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.6);
}

#navi_sp li:nth-child(1) {
    line-height:40px;
    font-size: 20px;
    background-color: rgba(0,0,0,0.8);
}

#navi_sp li:last-child {
    text-align: left;
    padding-left: 10px;
    font-size: 15px;
}

#navi_sp li:hover {
    background-color: rgba(0,0,0,0.4);
}

#navi_sp li:hover:nth-child(1) {
    background-color: rgba(0,0,0,0.8);
}

#navi_sp li a {
    display: block;
    text-decoration: none;
    color: #fff;
}
//-->
</style>

インラインで書く想定で<style type="text/css"></style>になってます。

スクロールに合わせて移動させず、右上に固定したい方は水菜さんのコードを参考にしながら#navi_btnと#navi_spのpositionを
fixed; から absolute;
に変更してください。

ちなみに

fixed 絶対位置(スクロールに応じない)
absolute 絶対位置
relative 相対位置

ですね。

※ウチでは、最上部ヘッダーを消しているので上記コードの指定よりも位置を右上に調整してます



最後、JavaScriptです
※java scriptのアイコンなかった……

<script type="text/javascript">
var flag = false;
function toggle(){
    if(flag == false){
        $("#navi_sp").css("display","block");
        $("#navi_btn").html("×");
        $("#navi_btn").css("color","#fff");
        flag = true;
    }else{
        $("#navi_sp").css("display","none");
        $("#navi_btn").html("≡");
        $("#navi_btn").css("color","rgba(0,0,0,0.2)");
        flag = false;
    }
}
</script>
<div id='navi_btn' onclick='toggle();'>≡</div>

こんな感じで。
あとはFONT AWESOMEでデコレーションした程度
大したカスタムはしてないので偉そうなことは言えません。

まだいじってる最中なので最終形ではないですが、いろいろカスタム出来て面白い。

よくわからない人向けのカスタム講座

f:id:paradisecircus69:20150706104259j:plain

わからん、と言う方は、

CSS:見た目
java script:動き

だと思ってください。

ですので色をいじる場合はCSSを、動きをいじる場合はjavascriptということになります。
ウチと同じような、なーんもわからん素人の方はCSSだけにしときましょう。

CSSのrgbaの()内は

rgba(0,0,0,←色指定 0.8←透過率)

なのでその数字をいじると色が変わります。
色数字は0~255
透過率は0(透明)~1(不透明)
どこがどれと連動してるか、実際いじってみる方が、体感的に学べるかと思われ。

色はこちらを参考にどうぞ。www.color-hex.com


メニューの入れ子とかもやりたいんですが、その前にカテゴリを整理しなきゃならない……。
この記事も込みで1883記事。

f:id:paradisecircus69:20150420172033j:plain
マジかよ!