カスタマイズ ブログ

【WordPress】PV率アップ!画面下部に固定フッターメニューを表示しよう!

2016/03/04

赤ちゃんパソコン
ワードプレスを使い始めて数か月。最初は記事の投稿もよくわからないくらいだったのですが、徐々に慣れてきました。

そうなるとどうなるか?

人間は慣れる生き物。そして、進化する愚かな生き物です!
行きつく先は決まっています。

カスタマイズ地獄天国。

 

このブログでは2015/9現在、Stinger5を使用していますが、このテーマは優れているだけあって様々な人が使っています。というか、めちゃくちゃたくさんの人が使ってます。これを使うようになってから、「あ、今まで見てたこのブログもスティンガー5やんけ。うける~」ということがよくあります。

要は、結構デザインがかぶりがちになるのです。

それはいやだ! 創作好きの私としては色々変えたい! そう、自主映画や作曲についての記事をメインで書いているこのブログ。ブログ自体も少しはいじりたくなるというものです。
◆創作系の記事だよ


 

まあ、ブログのカスタマイズに関しては本当に最近始めたばかりなので、そんなにすごいデザインのブログにはできませんが、それでも所々いじっていき、徐々に良くなっていると思います。

…ってな状況なこのブログですが、今回はスマホで見た際に、下部に固定フッターメニューを表示してみようと思います!
要は、画面の一番下にずっとメニューが表示されるようにする…ということです。

 

※2016/3/4追記:現在ではStinger7を使用しています。

 

スポンサーリンク

トップページの記事一覧をカード式にしてみよう

するぞ~

固定フッターメニューを付ける前のスマホ画面

IMG_1753

まず、現状のスマホ画面がこちら。

まあ、そんなに悪いということもありません。地味にナビゲーションメニューも改造してるし、上部のロゴがダサい以外は問題ありません。
ですが、どうせならちょっとでもオシャレに、ちょっとでもより便利にしたいというものです。デザインがある程度オシャレな方が、なんとなくブログの信頼度が増しますし、便利な機能があればブログの回遊率も上がり、PV数も上がるはずです。少なくとも、ブログに気合を入れているのは伝わるし、ほかのブログとの差別化にもなります。

とはいっても、私のカスタマイズはほかのブログで紹介されているコードをそのまま貼るだけだったりして、たいしてオリジナルではないんですけどね…それでも、何もやらないよりはかなり差別化にはなっています。(やりすぎるとスティンガー5の機能的なよさがなくなるかもだけど)

スマホの下部に何を表示するのか?

下部にフッターメニューを固定! とか言ってもなにを表示するの?という感じだと思います。要はこれを表示するのです。

IMG_1755

半透明の便利機能メニューです。いま、間違えて便器離農メニューって打ってしまいましたが、実際には便器ではなく便利なのでご安心ください。

 

「前の記事、次の記事、ホーム、TOPへ戻る」こんな感じの、いつでも押せたほうが便利なボタンを表示しておくわけです。スマホで見た際に、一番下か一番上にさりげなくこういうのが表示されているブログやサイトは多いです。企業のサイトやブログだと、ロゴと検索窓表示宇するケースも結構あるようです。
…そしてこれ、意外と邪魔にならないです。というか、場合によっては気付きもしないので、これが邪魔で見なくなる人はいないんじゃないかと思います。

下部に広告が固定であると邪魔臭いのですが、広告より場所も取ってないし、見た目も控え目で、なによりも広告じゃないから邪魔臭くないのです。おならは臭いけどハーブはいい匂いなのと同じです。まったく同じだよ。

 

参考にしたサイト

私は自力では文字の色や背景の色を変える程度しかカスタマイズができません…。あとはソーシャルボタンを設置するくらいですね。かつてはHSPという簡単なプログラミング言語をやってもいたのですが、htmlに関してはさっぱりです。徐々に勉強しようとは思っていますが、映画製作や作曲の鍛錬のほうが優先なのです…。

とにかく!

そんな状況なので、すでに述べた通り、今回もカスタマイズはほかのブログなどを参考にして、ほぼそのまま真似することになります。色とかをちょいと変えるかどうか程度です。

http://shufulife.com/footer-menu/

こちらのちゅんこさんのブログが非常にわかりやすく、ほかのカスタマイズに関しても色々と参考にさせていただきました。もう、こちらのブログを見ればそのまま実装できると思います。
Wordpressのダッシュボードから「外観」→「テーマ編集」→「style.css」と「footer.php」に上記記事のコードを貼り付けるだけです。

 

真実の報告:実装したらこうなる

IMG_1755

ジャーン!

下部のメニューが、スクロールしてもずっと付いてくるので、飽きて前後の記事にいくのも簡単。トップに戻るのも簡単。ホームページに戻るのも簡単。と、いうわけですね。
更に、これに「カテゴリー」や検索窓を表示することもできるので、そういうカスタマイズをしたい方は、先ほどのブログやほかの方のブログを調べてみると色々載っていますよ!

ちなみに、TOPページだとちゃんとこうなります。

IMG_1752

ちゃんと、前の記事とか次の記事が表示されないようになっています。同様に、最新記事だと「次の記事」を非表示になっています。かゆいとこどに手が届きますね!ボリボリですね^^

 

ちょっとカスタマイズ

最後に色を変えるカスタマイズ方法をお教えします。これくらいは私もわかります。

ul.footer_menu li a {
border: none;
display: block;
color: #666;
text-align: center;
text-decoration: none;
}

引用:【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ!

上記コードの「color: #666;」の部分を変えれば、文字やアイコンの色を変えることができます。
たとえば…

IMG_1758

こんな感じです。
目立ちすぎる色だとうるさいので、意外と配色が難しいですがお試しあれ。

ちなみに、下記のブログでは2015/9現在、このメニューを導入し、文字とアイコンの色を青にしています。ブログ全体の配色トーンを統一しているので、青にしたことで引き締まって見えます。(スマホからご覧ください。)

 

 

まとめ

便利なメニューを付けてデザイン性もアップすれば、自然とPV数も上がるはずです。

あとは、記事の内容が役に立つもの、面白いものであればブログはどんどん良いものになるはずです。

ブログ道を究めましょう!

by回転男

 

ちなみに、まじめにカスタマイズをするなら、こういった書籍でhtmlの基礎を学ぶのがお勧めです!

 

 



読者登録お願いします

ついについに…! 第二の目標20人に到達!!
ちょっと満足してしまいましたが、まだまだ多くの人に読んでいただきたいので、次の目標をどうするか考えることとします。


紅葉葉 秀秀逸プロフィール

▼この記事を書いた人
”紅葉葉 秀秀逸”というイマイチな名前を名乗る管理人です。月間18万PVまで来ました。
作曲・自主映画・ゲーム制作と節操なくやる創作好き。働きながらやってます。
座右の銘:「ラー油の上」 年齢:鳥

真面目なプロフィール・お問い合わせ
こんなことやってきました


この記事が気に入ったら
いいね!で最新記事をチェック

新着記事を配信中

Twitterで回転オトエフミを

更新情報のプッシュ通知を受け取る



シェアする

-カスタマイズ, ブログ   -,


おすすめ記事

1
ドラクエ5パパスの「ぬわーーっっ!!」がリメイク版でしれっと激しくなってた件を徹底考察

「ぬわー」 これを聞けば全日本人の70%は一瞬でなんのことかわかるだろう。 &n ...

2
グルメチェーン店レビュー超まとめ!【寿司、とんかつ、ラーメン…】

腹減ってますか? 減ってない方、これから減りますよ。私は減りました。 &nbsp ...

3
自主制作映画の作り方&体験談総まとめ!【無料素材・編集ソフト・ロケ地…】

上の中二病的な画像は、私が撮っている自主映画のワンシーンです。低予算、少人数でプ ...