カスタマイズ ブログ

【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の基礎を学ぶのがお勧めです!

 

 

スポンサーリンク

     スポンサーリンク

スポンサーリンク

     スポンサーリンク

この記事がよかったら
いいね!しよう

新着記事を呆然と配信中

呆然としたい人はTwitterで回転オトエフミを…

↓ついでに回転オトエフミ制作の…

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

 ●紅葉葉 秀秀逸
 ブログ管理人。90分の自主映画を作り、音楽も全編作曲する程の創作好きです。
 趣味:筆記体を投げ倒す、座右の銘:「ラー油の上」、年齢:鳥


        

真面目なプロフィール・お問い合わせ

ぶっとびアクション映画『抜本-BAPPON-』公開中

【当ブログ制作の”本で戦う”新感覚アクションムービー公開中】
少子化で滅亡の危機に瀕した日本を、本で戦い本で救う、爽快バカアクション!
本編はこちら

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


おすすめ記事

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3 1
短文強烈堀井節!ドラクエシリーズの全名言を楽しめる「ただのしかばね」のような記事

  ドラクエを愛する人は世に数多く、ドラクエをまあまあ好きな人も数多い ...

img_2629 2
和幸!松乃屋!とんかつチェーン店の違いって?[ランキング付き・随時更新]【三文】

とんかつリミッターが外れている三文享楽です。   なんでか? それはこ ...

soup-672388_640 3
奥深すぎ!? コンソメとは一体…その由来の謎に迫る!【完成されしポタージュ】

  コンソメパンチ。   「ポテトチップはコンソメ味が美味し ...