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

Gobble up pudding

プログラミングの記事がメインのブログです。

MENU

はてなブログに施したカスタマイズ内容まとめ

スポンサードリンク

f:id:fa11enprince:20140517013817j:plain
はてなブログProにしていることもあってせっかくだから、
カスタマイズガシガシしてやろうと思い、
カスタマイズしてみました。

6時間くらいかけていろいろいじりました。
これまでに施した内容をまとめようと思います。
ちなみに私はCSSとJavaScriptが大の苦手です。
あんまり勉強する気が起きない上に、
JavaScriptなんて特にデバッグ大変なんですよね。あれ。
突き詰めると難しいし。表面的には簡単なように装っていますが。

カスタマイズ準備編

CSSをある程度覚える

JavaScriptは必須ではないですが、CSSの知識をつけないとちょっと辛いです。
意外と知らない!?CSSセレクタ20個のおさらい|Webpark
こことか見て勉強しましょう。ここだけでは足りないか…。

非公開の実験用のブログを作成

いきなり公開しているブログにカスタマイズを施してもよいのですが、
多々失敗することがあるので、できれば非公開のブログをもう一個
作ってしまいましょう。それを実験台としていじればOK!
できる限り実際に公開しているブログと設定を合わせましょう!

ブログのページを保存する

ブログのページを保存しましょう。
そうするとテンプレートのCSSが読めますので変更が楽ちんになります。
保存をすると、40c97ee30310bb64ce6f8d90469ca8408d0b812e.css
のような名前のファイルがありますので、それを見ると、
ふむふむできるかもしれません。help.hatenablog.com
をよく読むとさらにふむふむできるかもしれません。

使うテンプレート(デザインのテーマ)を決める。

私の使っているテーマは「オールド・ブルー大根」です。
オールド・ブルー大根 - テーマ ストア - はてなブログ
シンプルで記事の幅が広めなのが気に入っています
(もちろん記事幅はいくらでも変更できるけど……)。

カスタマイズ実践編

開発者ツールを使って調べる・試す

基本はブラウザの開発者向けのツールを使います。
FirefoxでもChromeでも良いです。どちらも同等に高機能です。
Firebugは時代遅れだからやめておきましょう。
Firefoxの場合は……nelog.jp
要素が何なのかマウスのクリックで知ることができたり、
CSSの継承関係がわかったり、
CSSをダイレクトに書き換えて結果を知ることができます。
例えばこんなことができます。
f:id:fa11enprince:20150719063145p:plain

そしてコードを書いて修正する

というのは半分冗談で、できる人はそれなりにいると思いますが、
時間がかかる。ここでやるべきことはググることです。
偉大な先人がいるはずです。
僕らのためにいばらの道を先に切り拓いてくれた先人が……。
適用したカスタマイズとその参考にしたサイトを紹介します。

人気記事モジュールを追加

chiroru.hatenablog.com

グローバルメニュー追加

www.yukihy.com

スマホ版にトグルメニュー追加

www.yukihy.com

SNSボタン改造

www.yukihy.com

スマホ版から不要なものを消す

konoyono.hateblo.jp

スマホ版の見出し改造

tsukuruiroiro.hatenablog.com

テンプレートのCSS(デザインテーマ)の定義を微修正する

どうしてもテンプレートだとずれてしまう要素がいくつかあるものなので、
ブラウザの開発者ツールでCSSの要素を微修正して出来上がりです!

ゆきひー (id:ftmaccho) さんのブログがなければここまでできませんでした。

こんな感じでカスタマイズが簡単にできます!皆さんもゼヒ ^^) _旦~~