はてなブログのデザインをカスタマイズ

ここ数日、ちまちまとブログのデザインをカスタマイズして遊んでいました。
いじったところの備忘録ついでにカスタマイズ方法をご紹介したいと思います。

【目次】

以前は以下のテーマをデフォルト設定のままインストールしてただけでした。

Written – テーマ ストア – はてなブログ

とてもシンプルなのが気に入ってたのですが、
ちょっと気分転換にいろいろいじってみたくなったのです。

元がシンプルな分、カスタマイズするには良い状態でした。

ブログタイトルに画像を使ってみます。

Before

After
我が家のお猫様です(ΦωΦ)
なんかこれだけでずいぶんリッチになった気がしますね。

何をいじったの？

デザイン設定画面のカスタマイズタブから
「ヘッダ」と「デザインCSS」を変更しました。

まずは「ヘッダ」のタイトル画像のところに使用する写真をアップロードします。
その後、画像のどの部分を使うかの選択を行います。

元の写真の形は関係ないですが、最終的に横長の写真になるので、
構図は考えて写真を選びましょ〜。

次にCSSを適用します。

「ブログの説明」（タイトルの下）の文字が太字になっていて見づらいので、
太字を解除したいと思います。

以下のコードを追加。

サイドバーは細々とした変更です。

やったことは主に２つ。

何をいじったの？

「サイドバー」と「デザインCSS」を変更しました。

まずは「サイドバー」の最新記事モジュールの編集画面を開いて、
“サムネイル画像を表示する”にチェックを入れます。
画像の大きさはお好みで変更できます。
デフォルトの100×100だとちょっと大きい気がしたので90×90にしてみました。

次に各モジュールのタイトルアイコンですが。
別にそのままでも良かったのだけれど、
一番下の「欲しいもの」だけアイコンがないのです！！

既存で用意されているモジュールにはアイコンが付いていたのですが、
HTMLモジュールにだけは付かないっぽい。
ベースにしているテーマを変えればいいのかもしれませんが、
ここはちょっと強引に直すことに。（別のテーマを探すのがめんd…）

CSSに以下のコードを追加して、アイコンの代わりに”○”を表示させました。

Before

After

何をいじったの？

これはCSSをいじっただけです。以下のコードを追加。

Before

After

何をいじったの？

こちらもCSSをいじっただけ。以下のコードを追加。

ちなみに、目次はmarkdown記法を使って

という感じで書くと自動生成されるやつです。

Before

After

何をいじったの？

これもCSSだけ。以下のコードを追加。

見出しはmarkdown記法で

のように書いてます。

いかがだったでしょうか？
ちょっと変えるだけでずいぶん印象が変わったような気がしませんか？

僕はデザインのセンスがないので、
ベースのテーマにちょっと手を加える程度しかやりませんでしたけど、
やる気とセンスがあれば、結構細かいところまでカスタマイズ出来そうですね。

今後もちょっとずつ手を加えて行きたいと思います。

(｡･ω･)ﾉｼ