読者です 読者をやめる 読者になる 読者になる

いつもマイナーチェンジ!

普段の生活をほんの少しだけ便利で楽しくする情報を

はてなブログのカスタマイズ! 特にモバイルページには手を加えておこう!

ブログ関連 ブログ関連-カスタマイズ

僕がこの連休中にやったこと。

それは、はてなブログのカスタマイズでした。

連休って、どこに行っても混んでますし、かといって何もせずにテレビ見たり、ネットしたり、本読んだり、ではつまらない。

そんな時にブログのカスタマイズってちょうどいいんですよ。

やり出すと結構時間がかかりますからね。

ということで、僕がやったカスタマイズを書いておきます。

 
f:id:mayoi_inu:20150506180757j:plain

 

今回のカスタマイズのスタンス

とにかくモバイル用ページの調整です。

これにつきます。

今やPCからよりもモバイルでのアクセスのほうが多い時代です。

ここをしっかりやっておいて損はないのです。

ちなみに、これから書くカスタマイズをやるためには、ほとんどの場合、有料版である「はてなブログPro」の契約が必要です。

Proは広告をはずせる等のメリットもありますが、僕は「モバイル用ページをカスタマイズできる」点が一番のメリットだと思ってます。

これを機会にProを検討してみるのも良いかと思います。

 

【モバイル版】ヘッダ画像の変更

f:id:mayoi_inu:20150506161740j:plain

 
ブログの顔にもあたるヘッダ画像が、なんだか味気ないので変えてみました。
少し色がついただけですが、それでも結構印象が変わるように思えます。

 

参考にさせて頂いた記事

 
モバイルページのカスタマイズを検索すると、ほぼトップに表示されるほど有用な記事なので、知っている方も多いかと思います。

こちらの記事には、この他にも、

  • フォントをオシャレにする
  • 記事中の見出しを変える
  • 記事一覧のデザインにメリハリをつける

なども書いてあります。
数は少ないですが、この記事の凄いところはモバイルページのCSS設定方法が書いてある事
この方が最初の発案者じゃないのでしょうかね。
この方法により、いろんなカスタマイズができるようになったんですよ。
すばらしいの一言です。

 

【モバイル版】メニューの表示

f:id:mayoi_inu:20150506163202j:plain

 
メニューをつけました。

こういうメニューの良いところは、
 ①自分のブログのメインジャンルがひと目で分かる。
 ②別のページをアクセスしてくれる可能性が上がる。

あたりだと思います。

僕の場合はPC版のメニューには11個のカテゴリを並べているのですが、モバイル版にそんなにたくさん表示させても見にくいだけです。
なので、厳選して4つだけ表示するようにしました。

 

参考にさせて頂いた記事

 
モバイル版だけではなく、PC版のメニュー設置方法も書いてありますので、興味のある方はそちらもいかがでしょうか。
あと、絵文字フォントなんてものも使えるという事を、この記事で知りました。 (こんなの「」)
いろいろあるんですねぇ。

 

【モバイル版】フッタ部の「はてな広告」(?)を消した

f:id:mayoi_inu:20150506164712j:plain

 
ページ下の大部分を使っていたのを全て削除しました。
ただし、これをやるには、有料版である「はてなブログPro」の契約が必要なようです。
参考記事にも書いてありますが、この件について著者様がはてなへ質問したようで、「ProはOK、無料版はNG」と回答をもらっているとの事です。

 

参考にさせて頂いた記事

 
きちんとはてなへ確認をとっているのがすばらしいですね。
これが「ある」のと「ない」のとでは全然違います。
安心して使えますね。

 

【モバイル版】「あわせて読みたい」の設置

f:id:mayoi_inu:20150506165706j:plain

 
PC版には設置していたこの機能も、モバイル版は放置状態だったんですよね。
でも、自動的にサイト内リンクをブログカードで表示してくれるので、別の記事を読んでもらえる可能性が高まります。
必須といっていいのではないでしょうか。

 

参考にさせて頂いた記事

 
この方は、はてなブログのカスタマイズの第一人者ではないでしょうか。
参考になる記事も多く、ありがたいです。

 

【PC版】目次の追加

f:id:mayoi_inu:20150506170446j:plain

 
タイトル下に目次が出るようにしました。
他のブログでも結構見かけますよね。
この機能のスゴイところは、自動で作成してくれるところです。
指定した見出しの数を検索して、設定数以上だった場合のみ自動で表示してくれます。
僕は「中見出しが5つ以上ある場合」に設定しています。

これは必要かと言われると、必ずしもなくても良いものかもしれません。
ですが、これを見れば、おおよそどんな内容が書いてあるか分かりますので、訪問者側にとっても意味ありなのかな、と。
少なくともしばらくは、このまま設置しておこうと思っています。

 

参考にさせて頂いた記事

 
とても参考になる記事だったのですが、ブログ自体はほとんど更新されていないのが残念です。

 

【PC版】引用表示の変更

f:id:mayoi_inu:20150506172324j:plain

 
引用表示はずっと気になってたんですよ。
イマイチ強調性がなかったので、もっと目立つようにしたいなぁと。

ちなみにモバイル版でも似たような変更はできたのですが、逆に見にくくなったのでそのままに変えないことにしました。

 

参考にさせて頂いた記事

 

あとがき

  “まよい犬  

結構やった気でいたのですが、書いてみると6つだけだったとは。

意外と少ないものですね。

まぁ、この他にも吹き出しやら、アドセンスコードやらの変更もしましたので、時間的にはそっちのウエイトが大きかったかもしれません。

でも、ここまでやるとだいぶ変わったので、自分では満足してます。

調べきれずにやりきれなかった事もありますが、また別の機会にやろうと思います。

というところで、今日はここまで。

こんな記事も書いています