こんにちは！かきたろー(@kakitaroo_)です。
ブログのカスタマイズにハマってきました。
昔ちょっとしたホームページを作ったことがあるのでHTML/CSSの知識が少しはあります。JavaScriptはあんまりわかりません。
ゼロから作るのはちょっと厳しいので、いろんな人が「コピペ一発！」って紹介してくださってるやつをちょこちょこいじっています。
このブログでやってるカスタマイズと、参考にさせていただいたページを紹介していきます。
PC
テーマ
stripeというテーマを使っています。
紺色を基調としていて、柿のオレンジ色と相性が良くて気に入っています。
見出しのCSSもデフォルトで気に入ったのでそのままです。
ナビゲーションメニューは、作者のMinimal-Greenさんが載せてくれているものを使っています。
シェアボタン
みんなご存知、ゆきひーさんの記事を参考にさせていただきました。
シェアボタンだけでなく、いろいろ使わせていただいています。
ヨメレバ・カエレバ
つばささんのツールがすごいです！
CSSわからない人でも、簡単にボタンの色や形がカスタマイズできます。
目次
またまたゆきひーさん。
更新日時
こちらは、つばささんの記事を参考に色を少しいじりました。
stripeには投稿日時に時計アイコンがつくようになっているので、そのままコピペだと重複してしまう箇所を消しました。
アドセンス
孫引きになっちゃいますが、わかりやすくまとまってるのでヒトデさんの記事を。
記事の中に自動で配置できるようになります。
関連記事サイドバー固定
佐伯さんのコードを使わせていただいて、関連記事モジュールを固定しています。
一番下のモジュールを変えれば好きなものを固定できますよ。
ただし、アドセンスの固定は違反です。
スマホ
レスポンシブではなく、スマホ用にHTMLを設定していますが、見出しのCSSなどはPCと同じものを使っています。
Chromeのデベロッパーツールを使えば、テーマがどんなCSSを使っているか確認できます。
スマホデザイン
shunさんのこの記事から必要なところを選んで使わせていただいています。
トップページがとても見やすくなりました。
追尾メニュー
ゆきひーさんのこの記事から。
はてブ順の人気記事を表示するボタンを、はてブをつけるボタンに変更しました。
しおりとしての役割を果たせるように、記事上や記事下にいかずに途中でもつけれるようにしてみました。
追尾はうざいかなとも思いますが、とりあえずこれでいきます。
はてなの見出し問題
はてなブログの見たままモードでは、大見出しがh3タグになってしまう問題があります。
大見出しはh2にしたいところ。でもHTMLで編集するのはめんどくさい。
Chrome限定ですが、シロマティさんの拡張機能を使えば、見たままモードでも簡単にh2タグをいれることができます。
他に参考にしたブログ
いろんな人からアイデアをいただきました。
まとめ
現在やってるカスタマイズはだいたいこのくらいです。
日々いろんな人のブログを見て、随時改善していこうと思います。
jQueryコピペでばんばん使ってますけど、全然わからないのでわかるようになりたい。
直近の課題はAMPでのカスタマイズですね。
よくわからないので、まだAMP対応にしていないです。
AMPのほうが検索順位が優遇されるという話ですので、早めに対応したいですね。
それと、はてなには早くSSL化してほしい。