僕がこの連休中にやったこと。
それは、はてなブログのカスタマイズでした。
連休って、どこに行っても混んでますし、かといって何もせずにテレビ見たり、ネットしたり、本読んだり、ではつまらない。
そんな時にブログのカスタマイズってちょうどいいんですよ。
やり出すと結構時間がかかりますからね。
ということで、僕がやったカスタマイズを書いておきます。
今回のカスタマイズのスタンス
とにかくモバイル用ページの調整です。
これにつきます。
今やPCからよりもモバイルでのアクセスのほうが多い時代です。
ここをしっかりやっておいて損はないのです。
ちなみに、これから書くカスタマイズをやるためには、ほとんどの場合、有料版である「はてなブログPro」の契約が必要です。
Proは広告をはずせる等のメリットもありますが、僕は「モバイル用ページをカスタマイズできる」点が一番のメリットだと思ってます。
これを機会にProを検討してみるのも良いかと思います。
【モバイル版】ヘッダ画像の変更
ブログの顔にもあたるヘッダ画像が、なんだか味気ないので変えてみました。
少し色がついただけですが、それでも結構印象が変わるように思えます。
参考にさせて頂いた記事
モバイルページのカスタマイズを検索すると、ほぼトップに表示されるほど有用な記事なので、知っている方も多いかと思います。
こちらの記事には、この他にも、
- フォントをオシャレにする
- 記事中の見出しを変える
- 記事一覧のデザインにメリハリをつける
なども書いてあります。
数は少ないですが、この記事の凄いところはモバイルページのCSS設定方法が書いてある事。
この方が最初の発案者じゃないのでしょうかね。
この方法により、いろんなカスタマイズができるようになったんですよ。
すばらしいの一言です。
【モバイル版】メニューの表示
メニューをつけました。
こういうメニューの良いところは、
①自分のブログのメインジャンルがひと目で分かる。
②別のページをアクセスしてくれる可能性が上がる。
あたりだと思います。
僕の場合はPC版のメニューには１１個のカテゴリを並べているのですが、モバイル版にそんなにたくさん表示させても見にくいだけです。
なので、厳選して４つだけ表示するようにしました。
参考にさせて頂いた記事
モバイル版だけではなく、PC版のメニュー設置方法も書いてありますので、興味のある方はそちらもいかがでしょうか。
あと、絵文字フォントなんてものも使えるという事を、この記事で知りました。
（こんなの「」）
いろいろあるんですねぇ。
【モバイル版】フッタ部の「はてな広告」（？）を消した
ページ下の大部分を使っていたのを全て削除しました。
ただし、これをやるには、有料版である「はてなブログPro」の契約が必要なようです。
参考記事にも書いてありますが、この件について著者様がはてなへ質問したようで、「ProはOK、無料版はNG」と回答をもらっているとの事です。
参考にさせて頂いた記事
きちんとはてなへ確認をとっているのがすばらしいですね。
これが「ある」のと「ない」のとでは全然違います。
安心して使えますね。
【モバイル版】「あわせて読みたい」の設置
PC版には設置していたこの機能も、モバイル版は放置状態だったんですよね。
でも、自動的にサイト内リンクをブログカードで表示してくれるので、別の記事を読んでもらえる可能性が高まります。
必須といっていいのではないでしょうか。
参考にさせて頂いた記事
この方は、はてなブログのカスタマイズの第一人者ではないでしょうか。
参考になる記事も多く、ありがたいです。
【PC版】目次の追加
タイトル下に目次が出るようにしました。
他のブログでも結構見かけますよね。
この機能のスゴイところは、自動で作成してくれるところです。
指定した見出しの数を検索して、設定数以上だった場合のみ自動で表示してくれます。
僕は「中見出しが５つ以上ある場合」に設定しています。
これは必要かと言われると、必ずしもなくても良いものかもしれません。
ですが、これを見れば、おおよそどんな内容が書いてあるか分かりますので、訪問者側にとっても意味ありなのかな、と。
少なくともしばらくは、このまま設置しておこうと思っています。
参考にさせて頂いた記事
とても参考になる記事だったのですが、ブログ自体はほとんど更新されていないのが残念です。
【PC版】引用表示の変更
引用表示はずっと気になってたんですよ。
イマイチ強調性がなかったので、もっと目立つようにしたいなぁと。
ちなみにモバイル版でも似たような変更はできたのですが、逆に見にくくなったのでそのままに変えないことにしました。
参考にさせて頂いた記事
あとがき
結構やった気でいたのですが、書いてみると６つだけだったとは。
意外と少ないものですね。
まぁ、この他にも吹き出しやら、アドセンスコードやらの変更もしましたので、時間的にはそっちのウエイトが大きかったかもしれません。
でも、ここまでやるとだいぶ変わったので、自分では満足してます。
調べきれずにやりきれなかった事もありますが、また別の機会にやろうと思います。
というところで、今日はここまで。
こんな記事も書いています
- はてなブログで吹き出しを使おう！（その２）モバイル版の吹き出しCSS作成。 - いつもマイナーチェンジ！
- はてなブログで吹き出しを使おう！ CSSでの実装方法を勉強したので解説します。 - いつもマイナーチェンジ！
- ブログの文章を蛍光ペンでマーキングしたように表示する方法 - いつもマイナーチェンジ！
- 【ブログ小技】僕がやったブログの初歩的カスタマイズ（その４）ソーシャルボタンのズレ修正など - いつもマイナーチェンジ！
- 【ブログ小技】僕がやったブログの初歩的カスタマイズ（その３）ヘッダ画像下の空白除去など - いつもマイナーチェンジ！
- 【ブログ小技】僕がやったブログの初歩的カスタマイズ（その２） - いつもマイナーチェンジ！
- 【ブログ小技】僕がやったブログの初歩的カスタマイズ - いつもマイナーチェンジ！