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

水菜巻のメモ的ななにか。

主にLinuxやAndroid、Web関連について書いています。自作アプリや趣味のことも書くかもしれません。The雑食ブログ。

はてなブログにナビゲーションメニューを追加してみた!

はてなブログ Webデザイン

前回の記事「ブログをはじめたあの頃、"はてなブログpro"にしようか迷っていた3つの理由 - 水菜巻のメモ的ななにか。」でナビゲーションメニューを付けてみたい!って書いていましたが、早速やってみたの巻。

今更かよっ!と言いたいところですが、今更なんですo...rz

実は他の方がやっているのを見て前々からいいないいなと思っていたところでしたヾ( ´ー`)ノ

マネー報道 MoneyReport
格安スマホ SIMで節約生活^^
スキナモノート

便利かつ見た目もグッドですよね!

今回は簡単に自力でゴリゴリ書いてみました!

入れ子式サブカテゴリ表示にはしていないのですが、追々そんな風にできたらいいですね!

あと背景画像の素材の味(?)を活かしたかったのでメニューは透過処理しています。

こんな感じになりました( ̄▽ ̄;)

スクリーンショット

PC版

f:id:miz7maki:20150715032230p:plain

スマホ版

f:id:miz7maki:20150715032231p:plain

メニューボタンタップ時
f:id:miz7maki:20150715032232p:plain

スクリプト

PC版

HTML
<ul class='navi'>
 <li><a href='http://mizna.hatenablog.com/'>HOME</a></li>
 <li><a href='http://mizna.hatenablog.com/archive/category/Android%E3%82%A2%E3%83%97%E3%83%AA%28%E8%87%AA%E4%BD%9C%29'>Android</a>
 </li>
 <li><a href='http://mizna.hatenablog.com/archive/category/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9'>Web</a></li>
 <li><a href='http://mizna.hatenablog.com/archive/category/Linux'>Linux</a></li>
</ul>

[デザイン] - [カスタマイズ] - [ヘッダ]でHTMLコードを挿入しました。

こちらは何も考えずにリストでシンプルに。

CSS
.navi {
    width:100%;
    height: 30px;
    list-style: none;
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.navi a {
    color:#fff;
}
.navi li {
    width: 150px;
    float:left;
    line-height:40px;
    background-color: rgba(0,169,0,0.8);
    margin: 0 1px;
}

.navi li:hover {
    background-color: rgba(0,169,0,0.2);
}

.navi li a {
    display: block;
    text-decoration: none;
}

#top-box {
    color: #fff;
    margin-top: 10px;
}

#top-box a {
    color: #fff;
}

[デザイン] - [カスタマイズ] - [デザインCSS]でスクリプトを追加しています。

リストの背景を通常時80%、マウスオーバー時20%で透過するようにしました。

rgba()の行で警告マークでますが、css的には問題ないはずです。

スマホ版

HTML + javascript + CSS
<style type="text/css">
<!--
#navi_btn {
    position: absolute;
    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: absolute;
    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: 12px;
}

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

<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>
<ul id='navi_sp'>
  <li>Menu</li>
  <li><a href='http://mizna.hatenablog.com/archive/category/Android%E3%82%A2%E3%83%97%E3%83%AA%28%E8%87%AA%E4%BD%9C%29'>Android</a></li>
  <li><a href='http://mizna.hatenablog.com/archive/category/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9'>Web</a></li>
  <li><a href='http://mizna.hatenablog.com/archive/category/Linux'>Linux</a></li>
  <li><a href='http://mizna.hatenablog.com/'>&lt;&lt; HOME</a></li>
</ul>

[デザイン] - [スマートフォン] - [ヘッダ]でjavascript,CSSともにHTML内に埋め込んでみました。

上記PC版の[デザインCSS]内に記述するのもアリなのですが、スマートフォンの時だけスクリプト読み込むようにしてPC版で少しでも負荷減らしたかったのでこうしました。

javascriptではメニューボタンをトグルスイッチでメニュー表示のON/OFFできるようにしています。

CSSでは背景色の透過やメニューリストの行幅などの調整をしています。

まとめ

ナビゲーションメニューバーの追加ができました。

これによりカテゴリごとに記事を探すのが楽になりました。

しかしながら、入れ子式サブカテゴリ表示だともっと便利ですから、今後できればサブカテゴリ表示の方もつくっていきたいところです。


あと、「自分もやってみたい!」という方はこんなのでよければ参考にしてやってください!

その際は各自、自分のブログにフィットするようにCSSやHTMLの修正をお忘れなく!


そんでは!ヾ( ´ー`)ノ

明治 作ろうきのこの山 36g×8箱

明治 作ろうきのこの山 36g×8箱

ブログをはじめたあの頃、"はてなブログpro"にしようか迷っていた3つの理由

日記 はてなブログ Google AdSense

今回は以前、はてなブログproにしようか迷っていたときのことを書いておこうと思います。

たしかあの頃ははてなブログ無印の機能面でもの足りなさを感じていてproに切り替えた記憶があります。

大きく分けて3つの理由がありました。

はてなブログproに切り替えた理由

写真のアップロード制限が緩和できる!

自分の書く日記は写真やスクリーンショットがわりかし多いため、必然的にはてなフォトライフの使用量が増えていきます。

はてなフォトライフ(無料版)の使用量は300MBとちょっと少ないです。

はてなブログproにするとはてなフォトライフの使用量が3GB/月になるので凄くそそられます。

それでいて全体のディスク保存量の制限はないので、写真やスクリーンショットの保存がいくらでもできてしまいます。このサービス太っ腹!

これなら心置きなくPCやスマホから写真のアップロードができそうですね!


ブログデザインの修正できる!

ブログのデザインテンプレートの変更はできます。

しかし、コラムの幅などの細かい調整、ヘッダやフッタ部分のコンテンツ挿入、スマホ用デザインの変更(javascriptやcss追記など)ができないため、はてなブログ無印のままだとちょっと自由度が足りない感じがします。

はてなブログproにすることでそういった部分の編集ができるようになります!

私の場合はPC用とスマホ用でそれぞれヘッダ部分にナビゲーションメニューを入れたいなと思っているところです。

PC用
f:id:miz7maki:20150714222635p:plain

スマホ用
f:id:miz7maki:20150714223035p:plain

PC版はてなブログだとサイドメニューからカテゴリ表示されるのでいいっちゃーいいんですが、いちいちカテゴリのところまでスクロールするのも面倒ですし、重要なものだけピックアップして表示できたらなーって。

スマホ版はてなブログの場合はサイドメニューは表示されないので、あの記事が読みたいってときに一々過去記事をあさりにいかないといけない手間がちょっと。

なので画面右上あたりに他のWebページなんかでよくある「三」みたいなボタンつけて、押したらカテゴリが表示されるようにしたら楽なんじゃないかなと。うん、近日中にやってしまおう。


広告を非表示にできる!

これはかなり大きいことです!

今まで表示されていた広告を非表示にし、自分が扱っているアフィリエイト広告を埋め込むことができます!

Google AdSenseに関しては最初の登録審査がかなり厳しいので、これからやってみようと思う方は対策を練ってから挑んでみてください!mizna.hatenablog.com
miz7no7.hatenablog.com



ちなみにはてなブログproの2年間契約だと¥600/月換算になるので、私は娯楽としての投資と割り切って考えてproに切り替えました。

あとは広告収入で元がとれればしめたものです!



こんな感じで私ははてなブログproに切り替えました。

やはりproのほうが快適でいいですね!

あとは書きたいときに書く!それだけです!

それでは!ヾ( ´ー`)ノ


芦ノ湖でも使える!ワームに代わる第三のルアー!

ポークルアー 釣り バス釣り

今回は趣味の釣りのお話です。

これからの時期はバス釣りをするのであれば、非常に良いシーズンですね!

f:id:miz7maki:20150308120845j:plain

私は休日にはよく芦ノ湖にバス釣りしに行くのですが、芦ノ湖はハードルアーの使用は許可されていますが、ワームは禁止されています。

ワームって安くていろんな種類があって動きも感触も柔らかくていいんですけどね!

環境汚染の問題があって使用禁止になっている湖が結構増えてきています。

バサー(バス釣りをする人)にとってはワームが使えないのはちと痛いわけです。

そんなわけでワームが禁止されているところでも使えるソフトなルアーはないのでしょうか!?


目次

ワームとは

ワームは昆虫やゴカイ類に似せたソフトなルアーです。
(本物のワームと区別するためにプラスチックワームと呼ぶこともあります)

ワームの主な素材は合成樹脂です。

バスの活性が低い、ハードルアーにスレている(慣れて飽きている)ときには、自然な動きをするワームが有効です。

そしてなんといっても安価で手に入るところがいいですね!


芦ノ湖、河口湖では・・・

残念ながらワームの使用は禁止されています。

水の綺麗な芦ノ湖や河口湖だと、ニジマスなんかは釣って食べることもできるので、それを考えるとワームは使いたくなくなりますね!

私もまえにニジマスを釣ってさばいて食べたことがあります。ニジマスのムニエル、めちゃくちゃうまかっちゃん!

f:id:miz7maki:20150308184341j:plain

f:id:miz7maki:20150308204839j:plain

さて、環境にやさしくてワームに代わるものがあるのか!?

実はあります!

そんなときにはこれを使おう!

そしてワームに代わる第三のルアーがポークルアーです!


ポークルアーとは

ポークルアー豚の皮着色料で色づけしたものだそうです。

天然素材なので魚が食べても安心ですし、自然に分解されるので環境にもやさしいです。

芦ノ湖や河口湖、西湖なら一部の大会を除き、通常でのポークルアーの使用は許されているようです。

芦ノ湖に関しては釣り券売り場のおっちゃんに確認済みです!

f:id:miz7maki:20150612231808j:plain
↑こちらは今回購入したZファクトリーさんのポークルアー「豚うなぎ」

私の場合は近くの釣具店「かめや」さんで購入しています。

水中での動きもワームとはまた違った弾力のある感じですので、細く切ってミミズみたくすると面白いですね!

はじめてみたときには「釣りに豚の皮を使うのはちょっと贅沢!」とか思ってしまいましたw

以前のポークルアーは「すぐに千切れる」そうだったのですが、最近のものだとブラックバスやニジマスがちょっと噛んだだけでは噛み切れないくらいの弾力はありますね!


ちなみにこちらは今年の初バスです!

f:id:miz7maki:20150605174740j:plain

なんかしゃくれてるΣ(_□_;)ii


f:id:miz7maki:20150606174205j:plain

ブルーギルくんなんかも釣れるぞ!


芦ノ湖でポークルアーを使うなら、ダウンショットリグがオススメです!

駆け上がりの下がったところにバスが潜んでることが多いです!

去年はこれで一日に4,5匹釣れたこともありましたΣ(_□_;)ii


まとめ

  • ポークルアーは環境にも人間にもやさしい!
  • ポークルアーなら芦ノ湖、河口湖、西湖でも使える!
  • 意外と釣れます!バスがスレているときにも有効!


「ちょっと使ってみたい!」、「近くの釣具屋だと売ってない!」という方はネットショップで購入するといいかもですね!

売れ筋がいいのか売り切れのところが多いので、ご購入される際はお早めに(゚ー゚;