世界一楽しいうつ病の世界

うつ病はすごいんだ!普通の人たちが見ることのできない世界を見れるんだ!楽しもうぜ!!

初心者視点ではてなブログのスマホページが見にくかったので見やすくカスタマイズしてみました

にちぇ!カマス(@kamasu_blog)です!

 

 

 今日のお品書き

 

 

自分のブログが見にくいし醜い!!

 

自分は、ブログを書いたり見たり、レイアウトとか弄る時は全部PCから触っていたため、スマホでどう表示されているかなんてあまり気にしていなかったんですよね。

 

でも、アナリティクスを見てみると、PCとモバイルの比率がぴったり50%くらいなんです。

 

こ~れはちょっと気にかける必要があるなと思い、自分のブログを携帯から見てみたんですが・・・・・・

 

これがまぁ~~~~見にくい!!!

 

具体的に言うと

 

  • トップページのはてなブログの主張がはげしい
  • 文字が小さい
  • 目次や見出しが分かりづらい
  • せっかくカテゴリに分けて書いてるのにカテゴリ表示がない
  • フッターがゴチャゴチャしている

 

などなど。

 

自分が「こういうブログなら読みやすいな」って思っているブログとは大きくかけ離れていました。

 

いや、1か月経って気づくんかよっていう・・・・・・笑

 

 

なので今日は、色々他サイト様を参考にして改善に取り組んでおりました。

 

 

会社でちょっとイジってたため、HTMLやCSSの知識は少しあったので特に大きな苦労はしませんでしたが、それでもかなり勉強になった1日でした。

 

 

追尾してくるはてなアピールとフッターの余計な宣伝を消す

まず画像を見て頂きたいんですが、これめっちゃ邪魔ですよね笑

 

f:id:abura-and-rigami:20180319222725j:plain

 

いくら下にスクロールしても着いてくるはてなアピール笑

 

ページの表示領域が狭くなりますし、何より「俺はてなブロガーですけど???( ⊙´◞౪◟`⊙)」っていう謎アピールが前面に押し出されてる感じがしてちょっと嫌でした。

 

ま、ツイッターは『カマス@はてなブログ』って名前でバリバリ宣伝してますけどね!W

 

あと本当に何のために存在しているか分からなかったのはこのフッターにある開発ブログ等に飛ぶリンク。

 

これは単に邪魔でしかないので消せるもんならすぐに消したかったです。

 

なのでサヨナラ!!!!削除!削除!削除!

 

すると

 

f:id:abura-and-rigami:20180319223146p:plain

 

追尾式はてなアピールは消え

 

f:id:abura-and-rigami:20180319223157p:plain

 

謎リンクもこの通り!!!

 

 

個人的にはかなりスッキリしました。

 

ヘッダー画像はまだ作ってないので仮です。調子乗った画像でスミマセン・・・・・・。

 

 

カテゴリーを追加してみた

 

これが本当は1番嫌だったかも知れません。

 

折角記事を書くときにカテゴリに分けて書いてるのに、スマホから見た場合だと全くカテゴリ分けされてないんですよね。

 

それどころか、カテゴリ別の記事を見ることも出来ない。

 

そんなの「この人、他にこの話題でどんな記事書いてるんだろ?」ってなった時に簡単に拾えないとすぐ他のページいっちゃいますよね。

 

ってか僕ならそうします。

 

なので早急に取りつけました。

 

f:id:abura-and-rigami:20180319223818p:plain

 

赤線の枠内をタップすると、画像下部のようなメニューが開いて、カテゴリー別に記事一覧を表示することが出来ます。

 

しかも、カテゴリーを追加すると自動的にこのメニューの中にも追加されていくという優れもの!!!

 

こちらの記事を参考にさせていただきました。

 

平伏奉ります。

 

www.ituore.com

いまのままでは単純にパクっただけなので、デザインはいじりたいですね笑

 

このトップページ用とは別に、ページ下部にもカテゴリ分けを追加。

 

f:id:abura-and-rigami:20180319234011p:plain

 

こちらは、記事を読んでいただけた方がそのままスムーズにカテゴリ別の記事に飛べる用に作成しました。

 

これは1個1個完全にCSSの手打ちなので、カテゴリを追加するたびにこちらにもタグを追加しないといけないのが多少面倒ですが、まあそんなにもカテゴリを増やす予定は無いのでオーケーです。

 

正直、カテゴリ別に記事が読めるというのは、僕がそのブログを読むうえでかなり重要な指標なので、導入されていない方は多少手間をかけてでも導入した方が良いかもしれません。

 

ペーペーの僕が言うのもなんですが、絶対に直帰率が下がると思います。

 

 

目次を見やすくオシャレにしてみた

 

はてなブログ初期の目次って

 

  • こんな感じで
  • 黒丸に見出しが書いてあるだけで
  • 見た目的にも目次なのか単なる箇条書きなのかわかりにくかったり
  • するじゃないですか

 

なので、CSSイジるのは怖くて思いとどまっていたんですが、思い切って弄ってみました。

 

f:id:abura-and-rigami:20180319234106p:plain

 

枠で囲って、目次ですよってわかるようにしてみました。

 

こちらの記事を参考に他のサイト等も色々組み合わせたのですが、そのまま使うとレイアウトが崩れたため、自分の朧げな過去の記憶を引っ張り出してきて試行錯誤の末なんとか見られる形になりました笑

 

llewevil.hatenablog.com

他にも、カスタマイズの仕方やサンプルを公開されている方はたくさんいますね。

 

色々な方のやり方を組み合わせて見やすくオシャレになるといいですね。

 

 

見出しも見やすいようにしてみました

 

同じように、見出しもデフォルトの状態だと

 

ただ大きい文字に下線を引いただけみたいな感じ

 

 

だったので、こんな感じに枠取りしてみました。

f:id:abura-and-rigami:20180319225653p:plain

まあこのページでも使ってるので画像を張る必要は無いですけど一応・・・・・・。

 

これによって真っ白だったページの部分部分に締まりが出来て、良い感じにメリハリが付けられるようになった印象です。

 

今流行りの、『前書き→小出し→小出し→小出し→まとめ』みたいな記事は個人的には見にくくて嫌なんですが、見やすいって言ってる人が多いのとSEO対策にも有効らしいので、まあうまく付き合っていこうとは思います。

 

どうせ使うなら、良い形で有効活用したいですしね。

 

この見出しの装飾は個人的に当たりでした。

 

 

記事一覧画面の細かいところを微カスタマイズしてみた

 

まず画像を見てください

 

f:id:abura-and-rigami:20180319230258p:plain

 

やばくないすか?今日貼る画像の最後にして初めてペイントで図形と文字と塗りつぶし使いましたよ笑

 

コイツ・・・・・・戦いの中で成長してやがる・・・・・・!!!

 

まあそんな事はどうでも良くて、記事一覧画面がかなり真っ白で、記事と記事の境目が分からなかったんですよね。

 

「どれが記事?」みたいな。

 

画像が貼ってあるとまだ分かりやすいんですけど、画像がないページ同士の間はどこが境目か分かりにくかったんです。

 

そこで、日付のバックグラウンドを塗りつぶして明確に。

 

これによって記事の境目が分かりやすくなりました。

 

 

ついでに、サムネイル画像(?)の四隅も、スクエアからラウンドに変更。

 

こんなちっちゃい事でもかなり柔らかな感じが出ますね。

 

iPhoneとかのアイコンもそうですが、今はラウンドの時代ですからね。臨機応変に行きますよ、僕は。

 

まあ僕は男なんで四角いデザインでも良いと思いますけど、女性っぽさを前面に押し出したいブログなんかは、こういう小ネタだけで全然印象変わると思うのでお勧めですね。

 

 

文字サイズを大きくしてみた

 

これは、ちょっと調べてみるといろんな人が

 

「はてなブログは文字が小さい文字が小さい」

 

って言っているので、デフォルトの文字を少しばかり大きくしてみました。

 

なんでも、はてなブログの初期文字サイズは14pxらしいです。

 

一般的には16~18pxくらいが見やすいと言われているらしいですよ。為になりますねぇ~。

 

なので、ちょちょっとスマホページのCSSに文字サイズを指定して終了!

 

別に検索すればすぐ出ると思いますが、親切な僕がコードを乗っけといてしんぜよう

 

『設定』→『デザイン』→『スマートフォン』→『記事』内の『記事上』の欄に以下のコードを張り付けて、○○のところを好きな数字に変えるだけです。

 

<style type="text/css">
.entry-content {
font-size:〇〇px;
}
</style>
 

 簡単ですね!これだけで読みやすくなるって言うならやらないほうが損ってなもんです!

 

どうすか?簡単なやつだけ自分で紹介するスタイル笑

 

さっきも言ったけど、16~18pxくらいがオススメらしいですよ~。受け売りですが( ⊙´◞౪◟`⊙)

 

 

ひとまず完成

 

どうでしょうか。今日弄った大まかな部分はこれくらいだったんですが、CSSなんてほぼほぼ忘れていたのでなかなか時間がかかってしまいました。

 

でも、弄る前に比べたらかなり見やすくなったと思います。

 

これからもどんどん良いところは吸収して、見る側にも快適に見て頂けるようなサイトにしていきたいですね。

 

皆さんはどうでしょうか。

 

ほんのちょっとしたストレスや、僅か1回の余分なタップすら人を離れさせてしまうらしいです。

 

時々、自分のブログが見やすいかどうか。時代に置いて行かれ過ぎては無いかどうか。

 

客観的に見てみるのも良いのかもしれませんね。

 

自分では気づけないことも多いので、友人がいたら友人。いなければツイッターなどで知り合った人にでも一度客観的な目で見づらいところは無いかなどチェックしてもらえたら良いですね。

 

僕も、ブログ歴1か月の初心者として、謙虚に、大胆に頑張っていこうと思います。

 

 

最後になりますが、カスタマイズで参考にさせていただいた色々なサイトの運営者様。本当にありがとうございました。では皆さん、今日も1日お疲れさまでした。

 

ではでは、皆さん今日も一日お疲れさまでした。

 

貴重なお時間ありがとうございます。

 

 

~~~最後まで読んでいただいてありがとうございます~~~

 

読者登録や、ブログランキングのクリックをしていただくと励みになりますので、もし今回の記事が良かったと思って頂けたなら、是非よろしくお願いします。


人気ブログランキング

 

ツイッター(@kamasu_blog)も始めましたので、色々情報交換やお話など出来れば嬉しいです( ⊙´◞౪◟`⊙)何かお気づきの点などあればお気軽に!!!