あのブログでよくみかける『スマホ画面下に複合メニューバー』を設置するカスタマイズを実際にやってみたよ

f:id:ohsera-subaru:20170809080905j:plain

いつもご覧いただきありがとうございます、オオセラです :D

今回は、「実際にやってみたブログのカスタマイズ」第二弾をお送りしたいと思います。

ちなみに第一弾はこちら :D

いろいろなブログでみかけて「おぉ！かっちょいい！」と思って早数ヶ月。

nych (id:nych87)さんとか、

おやこステップ (id:oyakostep)さんとか、

タマシイユレオ(id:soul-vibration)さんとか。

どうして誰もおしえてくれなかったんですか...。（←とんだいいがかり）

あ、そもそも誰にも尋ねていませんでした。大変失礼いたしました m(_ _)m

あと勝手にお名前を出してすいません m(_ _)m

スマホ専用のカスタマイズなので、残念ながらPCからじゃ見られないんですよね。スマホからだと分かるんです、この方たちのブログで共通しているカスタマイズ(2017年8月9日現在)。

そのカスタマイズを実際にやってみたかったのですが、どういうふうに調べたらいいか分からない...。きっとぼくと同じように思っていたひともいると思います。そして、いろいろ調べていくうちについに見つけました！そして実装しました！

もちろん、わたくしオリジナルのカスタマイズではないので、参考にしたサイトさまもかならず紹介しております。もちろん、ソースコードなど詳しくはそのサイトさまに載っていますので、この記事を読んで興味がでてきたらぜひ、そちらでご確認をお願いいたしますm(_ _)m

では早速いきましょう！今回やって見たカスタマイズはこちら :D

参考にしたサイトさまはこちらです :D

もう知る人ぞ知るって感じのカスタマイズですよね！こちらのゆきひーさんのサイトで公開されています。詳しい手順もすべてこちらに。コピペだけでいけるのでとても簡単でした！

カスタマイズ後

f:id:ohsera-subaru:20170808235954p:plain

ね、はてなブログでこのメニューバーがあるブログ、見たことありますよね！このいかしたカスタマイズをやってみたい！と思って探してみたところ、「Yukihy Life」さまで見つけました！

特徴を3つ挙げてみます。

「HOME」「人気記事」「カテゴリ」「Top(に戻る)」のメニューバーがブログ画面下に固定されている
→ 興味を持ってもらえたら、このメニューバーからサイト内巡回をしてもらいやすくなるかも！「はてブ順」メニューも追加可能
色を変えたりと自由度も高い。しかもコピペでいけて簡単！
ソースコードを「ページャ下」に追加しておくだけなのでカスタマイズが簡単！

では、ひとつひとつみていきましょう。

1. メニューバーは画面下部に固定されているため、ブログ内巡回してもらうのにとても便利そうです。メニューに「はてブ順」が入ったものも用意されているので好きなのを選べます。

2. 今回のカスタマイズでも、HTMLの難しい知識は一切不要で、コピペでいけちゃいます。

3. 適用したいカスタマイズを、はてなブログの

ダッシュボード「デザイン」→「スマートフォン」→「ページャ下」

に追加するだけです。

...さて、以上で見てきたように、とても簡単にカスタマイズできるんですが、注意するべきところがひとつだけあります。