今までいろいろとはてなブログをカスタマイズしてきて、特にシェアボタンなどはいろんなところで使われているようでありがたいです！
数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。
カスタマイズいろいろ系記事
見出し
見出しを変えるとブログの印象がかなり変わりますよね。上の記事では無機質なデザインに限定しているので、他人と被るなどの心配はご無用です（良い言い方）。
SNSシェアボタン関係
表示も早くなるということで、かなり多くの人に使っていただいています。ありがとうございます。
最重要なシェア数表示部分は、「寝ログ」運営者のわいひらさんのおかげであり、僕はそれをはてなブログでも使えるようにいじっただけなのですが、褒めてください笑。
他のデザイン
ボタンのデザインも数種類用意しています。
細長くすることで記事上にもシュッとおさまるようにしたデザインです。あんまり使われてません。
3D風ボタンです。フラットデザインが流行っているとか言われますが、ダントツでこれが一番使われてます。
吹き出しにしてその中にシェア数が表示されるパターン。意外と使われるか！？と思いきや全くでした。吹き出しってこうやって出来てるのか！と作りながらわりと感動。
SNSフォローボタン
ついでにフォローボタンのも作りました。ボタンは「はてな購読」「Twitter」「Feedly」の３つです。何も考えずにやったので、フォントサイズがシェアボタンと合ってないですね…。近々修正するかもしれません。
トグルメニュー関係
スマホ版のみ
スマホ版でグローバルメニューのボタンがせまい（&足りない）と感じている方は、トグルメニューにすると多くのカテゴリを表示させることができます。
ボタンの反応が文字だけでなく横幅いっぱいになってしまっているので、近々修正します。
PCと両立してレスポンシブにする
ブラウザサイズが広いときはグローバルメニューで、ブラウザサイズが狭くなったら自動でトグルメニューに変わるというカスタマイズです。他のと比べてちょっと難易度は高め。
はてなブログは優秀なレスポンシブテーマが多いのですが、あんまりレスポンシブにしたブログを見ません。その理由の一つにグローバルメニューの扱いがやっかいだからというのがあるのではないかと勝手に思っています。
アドセンス中央配置
記事の中でアドセンスを中央に配置するという、それだけのものです。センタータグを入れるだけですし、このセンタータグもよくよく調べてみると、あんまり好ましくないらしいです^^;。
スマホのヘッダーに個性
簡単さだけを売りにしたコピペ一発カスタマイズ。後々見るとあんまりオシャレではないかも…。
記事中に背景をつけて見やすくする
ブログに多くの画像を入れて目の休憩所みたいにしている方は多いですが、できることなら画像はあんまり入れたくないところ。
自分が強調したいところに色をつけたりするだけで、見易さは格段にアップするのではないかと思います。
Milliard関連記事プラグイン関係
関連記事表記にMilliard関連記事プラグインというものを使わせていただいています。その関係です。
これは関連記事プラグインをサイドバーに入れ、スクロールしている間、サイドバーに固定されるというカスタマイズです。WordPressっぽくなります。
プラグインをリスト表記にしたとき、スペースが広く開いているのが気になりました。
２列にしたほうが良いなと思ったのでやってみたら、結構おさまりが良くなった気がします。
その他いろいろなカスタマイズ
その他いろんなカスタマイズです。細々としているのでまとめました。できることは、
- フォントの変更
- トップ画面のみのフッターを消去する
- 画像をセンタリングして線でくくる
- サイドバーの見出しのデザイン
- タイトル付近の色関係
- リンクの色を青にする
- 「続きを読む」の横幅を変える
- サイドバーが下に回り込んだときに、２列になるようにする
- レスポンシブ採用時の余白・文字の大きさの調整
などです。特にリンク色は青か他の色かで、クリック率が違うようなデータがあったような気がします。特にこだわりがないのであれば、やっておいたほうが良いような気がします。
構成図
初めてGoogleディベロッパーツールを触ったときに、見方を練習するついでにはてなブログの構成図を作りました。ある程度デザインができる人向けで、全てを書いているわけではないですが。一応貼っておきます。
配置関係
文字関係
色の変更なんかはこれを見てやれば、あまり知識がなくてもできると思います。
勉強法
当然、本業の方に比べればなんてことのないものですが、何もできない人からすると大きな一歩だったりします。ブログをカスタマイズしていく過程でHTML、CSSの知識をつけることができました。
自分でできるようになると楽しいので、ぜひ参考になればと思います。
４月の終わりぐらいに「Progate」というサービスを使い始めたのがきっかででした。本当におすすめです。
8/3現在レベルはこんな感じです。いつになったら頭抱えるのやめるんだろう。
まとめ
以上でカスタマイズ終了です。また新しいカスタマイズをやり次第、この記事も更新していく予定です。
不具合や助言などがありましたら、教えてくださると助かります！