実り多き人生

「早起き&朝活」で人生を変えたい人を応援するブログ

【はてなProカスタマイズ】ブログのスマホ版をおしゃれにしたい私が参考にした記事5選!

スポンサーリンク

f:id:ookiminori:20160107044334j:plain

ここ数日間ブログのカスタマイズ(主にスマホ版)にのめりこんでいます。

 

一応先に注意書きしておくと、スマホ版の主なデザインは「はてなpro」じゃないと変更できないようです。

proの特典は色々あるけど、私的にこれが一番使える気がします。このブログもスマホで読んでくれてる人が70%以上ですからね。

初期の何にもやってない頃よりは、だいぶオシャレ&見やすいスマホ画面になったんじゃないかな、と思ってます。

 

今日は、そんなスマホ版のどんなところをカスタマイズしたのかを、参考にさせて頂いた記事とともに紹介します!

目次

トップページの記事一覧デザイン変更

こんな感じになりました↓

f:id:ookiminori:20160107045559p:plain

 

記事一覧の日付部分と、画像の大きさ変更&枠付けをしてみました。

参考にしたのは、前回のカスタマイズでもお世話になったこの記事。

tsukuruiroiro.hatenablog.com

この記事が「はてなProだったらスマホ版のデザインもこんなにかっこよく出来るんだ!」って気づけたきっかけでした。

それにしても、何度見てもLiterally、おしゃれすぎる…。

 

スマホ画面に複数メニューバーを設置

f:id:ookiminori:20160107031844p:plain

 ↑このブログの下に固定されてる黒いメニューバーですね。

 

元々スマホ版にはメニューとか何も設置してなかったので、ブログの回遊率を上げたくてこのバーを設置してみました。

設置してからのここ数日で、同じカテゴリの記事が複数読まれたり、人気記事の伸び率がグンと増えたので、このメニューバーが役に立ってるのかも!と喜んでます。

 

とはいえ、今のところカテゴリ自体が私の中でまだきっちり整理できてない状態です。「早起き」「ブログ」「サレ妻」などカテゴリ別の記事も数が溜まってきたけど、上手くカテゴリ分け出来てない感が…。

今後は分かりやすく整理して、読者のみなさんがピンポイントで欲しい記事を探せるようにしたいです!

 

複数メニューバーの設置に参考にした記事はこちら。

www.yukihy.com

ゆきひーさんのカスタマイズ記事は、最近めちゃくちゃ読み漁ってます。

すっごく丁寧に分かりやすくカスタマイズ方法を教えてくれるから、ど素人の私でもデザインができるんです!ほんとありがたい! 

 

あとはこのメニューバー、後ろの記事が少し見えるように色を半透明にしたいんだけど、これはどうすればいいんだろう…。

こういう小さいところがカスタマイズやりだすと気になって、さらに没頭してしまうんですよね~。楽しい。

 

「ヨメレバ」ボタンのカスタマイズ

オススメの本を紹介するのに、「ヨメレバ」を使っています。

Amazonもkindleも楽天も一緒にまとめて紹介できる超!便利ツールなんですが、入会しているEllora Bloggers Club のエローラさんにもアドバイスを頂き、このボタンをパッと見で分かりやすいようにカスタマイズしました。

f:id:ookiminori:20160107034749p:plain

 

このボタンを設置してから、特にkindleでの売り上げが増えました!

やっぱりみんなkindle派なんですね…私もそろそろ本気で欲しい…。

 

ヨメレバボタンのカスタマイズに参考にさせて頂いた記事はコチラ。

akiueo.hatenablog.com

こういう、コピペだけで素人にも簡単にカスタマイズが出来るようにしてくれる人って、本当にありがたいですね。

 

ちなみにこのヨメレバボタンのカスタマイズは、cssを「デザイン設定」のどの部分にコピペすればいいのか最初分かりませんでしたが、色々自分なりに試行錯誤して見つけました。

 

素人がやったことなので確実とはいえませんが

「デザイン」→「スマホ」→「フッタ(pro)」→「ページャ下」に、下記のようにコピペすれば、私の場合は上手くいきました!

<style type="text/css"> ここの上の記事のcssコピペ   </style>

 

「引用」デザインのカスタマイズ

スマホ版の「引用」って、デフォルトだと左側にグレー線が入ってるだけなんですよね。

もうちょっと目立たせたいと思ったので、こちらの記事を参考にちょこっと変えてみました。

www.warorince.com

この記事にある「引用デザイン1」に変更した後がこれ。

f:id:ookiminori:20160107040518p:plain

ほんのーり、薄い感じが主張しすぎない感じで気に入ってます。

ちなみに画像のマザーテレサの言葉は私が一番好きな名言の一つです。今年も心にこの5行を刻んでおこう…。

 

上のワロリンスさんの記事の、「不要な要素を削除」っていう項目も近々やってみようと思ってます。よく見るとスマホ版って要らないボタンや記述が色々ついちゃってますもんね。

 

SNSフォローボタンの設置

あんまり使いこなせてないけど、Twitterもやってます。

スマホ版でのフォローボタンがなかったので、記事下に設置してみました。

f:id:ookiminori:20160107040921p:plain

 

マルっとしてかわいいデザインに一目ぼれでした!

 

これもさっき紹介した「複数メニューバー」でお世話になったゆきひーさんの記事から!

www.yukihy.com

可愛いボタン、ありがとうございます!!

 

このブログ「実り多き人生」の更新情報を知りたいって方は、この記事の下にも上の可愛いマルっ子ボタンつけてますんで、

ポチットオ願イシマース!(←売り込み下手)

 

終わりに

4日間ほど記事を書かずにデザインのカスタマイズや過去記事の修正などをずーっとやってました。

記事も更新したいな…と最初は思いつつも、

「たまにはがっつりカスタマイズに専念することも必要」ってエローラさんが以前書いていらっしゃったのを思い出したので、そこからは心置きなく没頭しました!

 

結果的に、依然と比べるとちょっとおしゃれー&読み手にとっても読みやすいデザインになったのでは、と思ってます。

まだまだまだまだ改善点はたくさんあるんだけど、それを考えて実行するのがまた楽しい~。

ので、これからもこのブログの進化を楽しみにしててくださいねッ。

 

あ、カスタマイズが気になる方は、この記事もどうぞ!

www.minorijinsei.com

それでは、今日も実り多き一日を!