今までいろいろとはてなブログをカスタマイズしてきて、特にシェアボタンなどはいろんなところで使われているようでありがたいです！
数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。
新しいカスタマイズを行い次第、この記事にどんどん付け加えていこうと思っています。
- カスタマイズ記事まとめ
- 見出しのデザイン
- SNSシェアボタン関係
- SNSフォローボタン
- メニュー関係
- スマホ版の下にいろんな固定ボタンをつける
- スマホ版の下に回遊率を高める人気記事を含めた固定メニューバー
- 記事内で一部隠しておいてスライドで表示させる
- サイドバーモジュールを組み合わせてタブメニューをつくる
- はてなブログ公式目次機能をさらに使いやすく
- カエレバ・ヨメレバのカスタマイズ
- アプリーチのカスタマイズ
- アドセンス中央配置
- スマホのヘッダーにちょっとした個性
- 記事中に背景をつけて見やすくする
- Milliard関連記事プラグイン関係
- 今の記事と同じカテゴリの記事を表示して関連記事っぽくする
- Googleフォントを使ってみる
- その他いろいろなカスタマイズ
- 構成図
- 行ってきた勉強法
- まとめ
カスタマイズ記事まとめ
見出しのデザイン
見出しを変えるとブログの印象がかなり変わりますよね。上の記事では無機質なデザインに限定しているので、他人と被るなどの心配はご無用です（良い言い方）。
SNSシェアボタン関係
旧バージョン
表示も早くなるということで、かなり多くの人に使っていただいています。ありがとうございます。
最重要なシェア数表示部分は、「寝ログ」運営者のわいひらさんのおかげであり、僕はそれをはてなブログでも使えるようにいじっただけなのですが、褒めてください笑。
新バージョン
注：上の記事は、古いものになっています。今後は、3Dボタンこちら
フラットボタンはこちら
からお願いします！
SNSフォローボタン
ついでにフォローボタンのも作りました。ボタンは「はてな購読」「Twitter」「Feedly」の３つです。何も考えずにやったので、フォントサイズがシェアボタンと合ってないですね…。近々修正するかもしれません。→修正しました！
メニュー関係
スマホ版のみ
スマホ版は、下に改良版を作ったのでそちらをお使いください。
スマホ版でグローバルメニューのボタンがせまい（&足りない）と感じている方は、トグルメニューにすると多くのカテゴリを表示させることができます。
ボタンの反応が文字だけでなく横幅いっぱいになってしまっているので、近々修正します。→修正しました！
上のトグルメニューですと、タイトル下に広告を入れたときに背景に色がついてしまうという欠点がありました。
その部分を修正したので、これからの方はこちらを使っていただけたらと思います。お手数おかけします。
グローバルメニューと両立してレスポンシブ対応にする
ブラウザサイズが広いときはグローバルメニューで、ブラウザサイズが狭くなったら自動でトグルメニューに変わるというカスタマイズです。他のと比べてちょっと難易度は高め。
はてなブログは優秀なレスポンシブテーマが多いのですが、あんまりレスポンシブにしたブログを見ません。その理由の一つにグローバルメニューの扱いがやっかいだからというのがあるのではないかと勝手に思っています。
グローバルメニュー（ドロップダウン）&トグルメニューのレスポンシブ対応
上のグローバル&トグルメニューのレスポンシブスタイルに、子カテゴリをつけれるようにドロップダウンメニューにしました。子カテゴリを使っている方は、こちらを使っていただくと美しく分かりやすくつくれると思います。
コピペで簡単につくれます。
グローバルメニュー（ドロップダウン）&スライドメニューのレスポンシブ対応
同じく子カテゴリをいれられるドロップダウンメニューと、横からのスライドメニューを組み合わせました。トグルメニューとは好みの問題でしかありませんが笑。
レスポンシブ対応な横スクロールメニュー
最近ときどき見かける、スマホで見たときに横スクロールするメニューです。
スマホ版の下にいろんな固定ボタンをつける
はてなブログのスマホ版のみ、下に各種ボタンをつけるカスタマイズです。具体的にコピペでできるのは
- SNSシェアボタン
- あとで読む系ボタン+TOPに戻るボタン
- あとで読む系ボタン+Feedlyボタン+TOPに戻るボタン
の３つです。ある程度HTMLなどが分かる方はもっと応用できると思います。
スマホ版の下に回遊率を高める人気記事を含めた固定メニューバー
はてなブログのスマホ画面は、人気記事がなかなか見辛いところにあります。上の記事では、
- HOME
- 人気記事
- カテゴリ
- トップへ戻る
ボタンを固定メニューバーとしました。人気記事とカテゴリはスライドで表示するようにしています。
上に書いたトグルメニューの応用版といったところで、回遊率アップが狙えるかもしれません。
記事内で一部隠しておいてスライドで表示させる
言葉にするのが難しいのですが、下のようなものです。ボタンを押してみてください。
サイドバーモジュールを組み合わせてタブメニューをつくる
サイドバーの情報量を多くしたいなと思ったのですが、あまりに詰め込むと長くなるのも嫌でした。
タブメニューにすると同じスペースでも多くの情報を詰め込めます！
はてなブログ公式目次機能をさらに使いやすく
はてなブログには公式の目次を自動で入れてくれる機能があるのですが、普通のリストになってしまったり、若干使いづらい面があります。
ちょっとコードを足すだけでかなり使いやすくなるので、普段目次を使っている方はおすすめです。
カエレバ・ヨメレバのカスタマイズ
アマゾン商品だけでなく、楽天やヤフーショッピングにも簡単に商品リンクを貼ることができるヨメレバ・カエレバのデザインを改良するカスタマイズです。
はてなブログ以外の方でも使えるカスタマイズになります。
アプリーチのカスタマイズ
ヨメレバ・カエレバのように統一感のある感じにしました。
アプリーチのおかげでアプリ紹介もすんなりできます。本当、サービスを作ってくださった方々に感謝です！
アドセンス中央配置
記事の中でアドセンスを中央に配置するという、それだけのものです。センタータグを入れるだけですし、このセンタータグもよくよく調べてみると、あんまり好ましくないらしいです^^;。
一応貼っておきますが非推奨。
スマホのヘッダーにちょっとした個性
簡単さだけを売りにしたコピペ一発カスタマイズ。後々見るとあんまりオシャレではないかも…。
記事中に背景をつけて見やすくする
ブログに多くの画像を入れて目の休憩所みたいにしている方は多いですが、できることなら画像はあんまり入れたくないところ。
自分が強調したいところに色をつけたりするだけで、見易さは格段にアップするのではないかと思います。
Milliard関連記事プラグイン関係
関連記事表記にMilliard関連記事プラグインというものを使わせていただいています。その関係です。
サイドバーに固定する
これは関連記事プラグインをサイドバーに入れ、スクロールしている間、サイドバーに固定されるというカスタマイズです。WordPressっぽくなります。
記事下に二列にする
プラグインをリスト表記にしたとき、スペースが広く開いているのが気になりました。
２列にしたほうが良いなと思ったのでやってみたら、結構おさまりが良くなった気がします。
今の記事と同じカテゴリの記事を表示して関連記事っぽくする
Milliard関連記事プラグインでのPage Speed Insightの計測結果が遅くなるのと、表示したい関連記事をある程度コントロールしたかったので、自分で作ってみました。
仕様は今開いているページの１つ目のカテゴリを含む記事を、ランダムに表示をするというものです。
Googleフォントを使ってみる
タイトルなどの一部にGoogleフォントを使うと、同じ雰囲気になりがちなはてなブログを一気に印象を変えることができます。
やりすぎるとブログの読み込みが遅くなるので、ちょっと変えるのがポイントだと思います。
その他いろいろなカスタマイズ
その他いろんなカスタマイズです。細々としているのでまとめました。できることは、
- フォントの変更
- トップ画面のみのフッターを消去する
- 画像をセンタリングして線でくくる
- サイドバーの見出しのデザイン
- タイトル付近の色関係
- リンクの色を青にする
- 「続きを読む」の横幅を変える
- サイドバーが下に回り込んだときに、２列になるようにする
- レスポンシブ採用時の余白・文字の大きさの調整
などです。特にリンク色は青か他の色かで、クリック率が違うようなデータがあったような気がします。特にこだわりがないのであれば、やっておいたほうが良いような気がします。
構成図
初めてGoogleディベロッパーツールを触ったときに、見方を練習するついでにはてなブログの構成図を作りました。ある程度デザインができる人向けで、全てを書いているわけではないですが。一応貼っておきます。
配置関係
文字関係
色の変更なんかはこれを見てやれば、あまり知識がなくてもできると思います。
行ってきた勉強法
HTML&CSS
当然、本業の方に比べればなんてことのないものですが、何もできない人からすると大きな一歩だったりします。ブログをカスタマイズしていく過程でHTML、CSSの知識をつけることができました。
自分でできるようになると楽しいので、ぜひ参考になればと思います。
jQuery
jQueryに関してもてこずりながらやってみました。難易度は跳ね上がるような気がします。
これからやろうという方の参考になればと思います。
４月の終わりぐらいに「Progate」というサービスを使い始めたのがきっかででした。本当におすすめです。
8/3現在レベルはこんな感じです。いつになったら頭抱えるのやめるんだろう。
まとめ
以上でカスタマイズ終了です。また新しいカスタマイズをやり次第、この記事も更新していく予定です。
不具合や助言などがありましたら、教えてくださると助かります！
