ワードプレスを使い始めて数か月。最初は記事の投稿もよくわからないくらいだったのですが、徐々に慣れてきました。
そうなるとどうなるか？
人間は慣れる生き物。そして、進化する愚かな生き物です！
行きつく先は決まっています。
カスタマイズ地獄天国。
このブログでは2015/9現在、Stinger5を使用していますが、このテーマは優れているだけあって様々な人が使っています。というか、めちゃくちゃたくさんの人が使ってます。これを使うようになってから、「あ、今まで見てたこのブログもスティンガー5やんけ。うける～」ということがよくあります。
要は、結構デザインがかぶりがちになるのです。
それはいやだ！ 創作好きの私としては色々変えたい！ そう、自主映画や作曲についての記事をメインで書いているこのブログ。ブログ自体も少しはいじりたくなるというものです。
◆創作系の記事だよ
まあ、ブログのカスタマイズに関しては本当に最近始めたばかりなので、そんなにすごいデザインのブログにはできませんが、それでも所々いじっていき、徐々に良くなっていると思います。
…ってな状況なこのブログですが、今回はスマホで見た際に、下部に固定フッターメニューを表示してみようと思います！
要は、画面の一番下にずっとメニューが表示されるようにする…ということです。
※2016/3/4追記：現在ではStinger7を使用しています。
トップページの記事一覧をカード式にしてみよう
するぞ～
固定フッターメニューを付ける前のスマホ画面
まず、現状のスマホ画面がこちら。
まあ、そんなに悪いということもありません。地味にナビゲーションメニューも改造してるし、上部のロゴがダサい以外は問題ありません。
ですが、どうせならちょっとでもオシャレに、ちょっとでもより便利にしたいというものです。デザインがある程度オシャレな方が、なんとなくブログの信頼度が増しますし、便利な機能があればブログの回遊率も上がり、PV数も上がるはずです。少なくとも、ブログに気合を入れているのは伝わるし、ほかのブログとの差別化にもなります。
とはいっても、私のカスタマイズはほかのブログで紹介されているコードをそのまま貼るだけだったりして、たいしてオリジナルではないんですけどね…それでも、何もやらないよりはかなり差別化にはなっています。（やりすぎるとスティンガー5の機能的なよさがなくなるかもだけど）
スマホの下部に何を表示するのか？
下部にフッターメニューを固定！ とか言ってもなにを表示するの？という感じだと思います。要はこれを表示するのです。
半透明の便利機能メニューです。いま、間違えて便器離農メニューって打ってしまいましたが、実際には便器ではなく便利なのでご安心ください。
「前の記事、次の記事、ホーム、TOPへ戻る」こんな感じの、いつでも押せたほうが便利なボタンを表示しておくわけです。スマホで見た際に、一番下か一番上にさりげなくこういうのが表示されているブログやサイトは多いです。企業のサイトやブログだと、ロゴと検索窓表示宇するケースも結構あるようです。
…そしてこれ、意外と邪魔にならないです。というか、場合によっては気付きもしないので、これが邪魔で見なくなる人はいないんじゃないかと思います。
下部に広告が固定であると邪魔臭いのですが、広告より場所も取ってないし、見た目も控え目で、なによりも広告じゃないから邪魔臭くないのです。おならは臭いけどハーブはいい匂いなのと同じです。まったく同じだよ。
参考にしたサイト
私は自力では文字の色や背景の色を変える程度しかカスタマイズができません…。あとはソーシャルボタンを設置するくらいですね。かつてはHSPという簡単なプログラミング言語をやってもいたのですが、htmlに関してはさっぱりです。徐々に勉強しようとは思っていますが、映画製作や作曲の鍛錬のほうが優先なのです…。
とにかく！
そんな状況なので、すでに述べた通り、今回もカスタマイズはほかのブログなどを参考にして、ほぼそのまま真似することになります。色とかをちょいと変えるかどうか程度です。
http://shufulife.com/footer-menu/
こちらのちゅんこさんのブログが非常にわかりやすく、ほかのカスタマイズに関しても色々と参考にさせていただきました。もう、こちらのブログを見ればそのまま実装できると思います。
Wordpressのダッシュボードから「外観」→「テーマ編集」→「style.css」と「footer.php」に上記記事のコードを貼り付けるだけです。
真実の報告：実装したらこうなる
ジャーン！
下部のメニューが、スクロールしてもずっと付いてくるので、飽きて前後の記事にいくのも簡単。トップに戻るのも簡単。ホームページに戻るのも簡単。と、いうわけですね。
更に、これに「カテゴリー」や検索窓を表示することもできるので、そういうカスタマイズをしたい方は、先ほどのブログやほかの方のブログを調べてみると色々載っていますよ！
ちなみに、TOPページだとちゃんとこうなります。
ちゃんと、前の記事とか次の記事が表示されないようになっています。同様に、最新記事だと「次の記事」を非表示になっています。かゆいとこどに手が届きますね！ボリボリですね＾＾
ちょっとカスタマイズ
最後に色を変えるカスタマイズ方法をお教えします。これくらいは私もわかります。
ul.footer_menu li a {
border: none;
display: block;
color: #666;
text-align: center;
text-decoration: none;
}
上記コードの「color: #666;」の部分を変えれば、文字やアイコンの色を変えることができます。
たとえば…
こんな感じです。
目立ちすぎる色だとうるさいので、意外と配色が難しいですがお試しあれ。
ちなみに、下記のブログでは2015/9現在、このメニューを導入し、文字とアイコンの色を青にしています。ブログ全体の配色トーンを統一しているので、青にしたことで引き締まって見えます。（スマホからご覧ください。）
まとめ
便利なメニューを付けてデザイン性もアップすれば、自然とPV数も上がるはずです。
あとは、記事の内容が役に立つもの、面白いものであればブログはどんどん良いものになるはずです。
ブログ道を究めましょう！
by回転男
ちなみに、まじめにカスタマイズをするなら、こういった書籍でhtmlの基礎を学ぶのがお勧めです！