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

かきのマネー

お金と良いモノ

【HTML/CSS】はてなブログのカスタマイズたのしー!【かんたん】

ブログ運営 雑記

スポンサーリンク

blog

こんにちは!かきたろー(@kakitaroo_)です。

 

ブログのカスタマイズにハマってきました。

昔ちょっとしたホームページを作ったことがあるのでHTML/CSSの知識が少しはあります。JavaScriptはあんまりわかりません。

ゼロから作るのはちょっと厳しいので、いろんな人が「コピペ一発!」って紹介してくださってるやつをちょこちょこいじっています。

このブログでやってるカスタマイズと、参考にさせていただいたページを紹介していきます。

 

PC

テーマ

stripeというテーマを使っています。

柿の色と相性が良くて気に入っています。

見出しのCSSもデフォルトで気に入ったのでそのままです。

ナビゲーションメニューは、作者のMinimal-Greenさんが載せてくれているものを使っています。

design.syofuso.com

二重読み込みを避けるため、直接編集を加えました。

少し速くなったような気がします。

 

シェアボタン

www.yukihy.com

みんなご存知、ゆきひーさんの記事を参考にさせていただきました。

シェアボタンだけでなく、いろいろ使わせていただいています。

 

ヨメレバ・カエレバ

www.tsubasa-note.blog

つばささんのツールがすごいです!

CSSわからない人でも、簡単にボタンの色や形がカスタマイズできます。

スマホ版でcenterが抜けているところがあったので、自力で追加しました。

 

目次

www.yukihy.com

またまたゆきひーさん。

 

更新日時

www.tsubasa-note.blog

こちらは、つばささんの記事を参考に色を少しいじりました。

stripeには投稿日時に時計アイコンがつくようになっているので、そのままコピペだと重複してしまう箇所を消しました。

 

アドセンス

www.hitode-festival.com

孫引きになっちゃいますが、わかりやすくまとまってるのでヒトデさんの記事を。

記事の中に自動で配置できるようになります。

 

関連記事サイドバー固定

www.no-overtime-day.com

佐伯さんのコードを使わせていただいて、関連記事モジュールを固定しています。

一番下のモジュールを変えれば好きなものを固定できますよ。

ただし、アドセンスの固定は違反です。 

 

サイドバータブメニュー

www.hiroseyonaka.com

廣瀬夜中さんの記事を参考に6つを切り替えられるようにしました。

お問い合わせもここにあるんですが、わかりにくいですかね…?

 

スマホ

レスポンシブではなく、スマホ用にHTMLを設定していますが、見出しのCSSなどはPCと同じものを使っています。

Chromeのデベロッパーツールを使えば、テーマがどんなCSSを使っているか確認できます。

 

スマホデザイン

www.ituore.com

shunさんのこの記事から必要なところを選んで使わせていただいています。

トップページがとても見やすくなりました。

 

追尾メニュー

www.yukihy.com

ゆきひーさんのこの記事から。

はてブをつけるあとで読むボタンと、読者になるボタンに変更して、下にあるとうざいので上に固定してみました。

 

はてなの見出し問題

はてなブログの見たままモードでは、大見出しがh3タグになってしまう問題があります。

大見出しはh2にしたいところ。でもHTMLで編集するのはめんどくさい。

shiromatakumi.hatenablog.com

Chrome限定ですが、シロマティさんの拡張機能を使えば、見たままモードでも簡単にh2タグをいれることができます。

 

他に参考にしたブログ


 いろんな人からアイデアをいただきました。

 

まとめ

現在やってるカスタマイズはだいたいこのくらいです。

日々いろんな人のブログを見て、随時改善していこうと思います。

jQueryコピペでばんばん使ってますけど、全然わからないのでわかるようになりたい。

 

直近の課題はAMPでのカスタマイズですね。

よくわからないので、まだAMP対応にしていないです。

AMPのほうが検索順位が優遇されるという話ですので、早めに対応したいですね。

 

それと、はてなには早くSSL化してほしい。

スポンサーリンク