「はてなブログ」サイドバーのカスタマイズ

こんにちは。Madoriです _φ(･_･

今回のカスタマイズ記事もお知らせ＆備忘録なので、HTMLやCSSの記述はありません。

大幅なカスタマイズではありませんが、気分転換も兼ねて現在のテーマ「UNDER SHIRT」により合いそうなデザインに変更してみました。

今までのサイドバーのデザイン、実は「SOHO」を利用していた時からずっと変えていなかったのです。

Before

白い囲み枠が浮いて見えていたのと、プロフィールとブログ説明などを一緒にしたほうがいいかな!?と考えていました。

クリックまたはタップすると大きく表示されます

After

画像の枚数が多くなってしまいましたが、カスタマイズ後のサイドバーです。

背景色が活きて、満足しています。

クリックまたはタップすると大きく表示されます

変更箇所

検索（Search）

検索窓の文字を日本語表記「記事を検索」から英語表記「Search entries」にしました。

理由は、個人的な好みです。

アルファベットの方がフォントが美しいので。

プロフィール（Profile） 

白い囲み枠を外し、プロフィール画像を丸くしました。

参考にしたのはこちらの記事です。

www.foxism.jp

また、プロフィール欄に下記も表示させました。

• 簡単なブログ説明
• 「詳しいプロフィール」のリンク
• 「当ブログについての詳細」のリンク
• フォローボタン

フォローボタンの大きさを少し小さくしました。

カテゴリ（Category）

縦に長くなってきたので、横に並ぶようにカスタマイズしました。

また、記事内と同様にカテゴリ名の前に「#」を入れてタグのようにしてみました。

参考にしたのはこちらの記事です。

fa11enprince.hatenablog.com

月間アーカイブ（Archive）

表示形式を「リスト」から「カレンダー」にしました。

これは、どちらかというと自分用のカスタマイズです。

カレンダーのデザインもカスタマイズしました。

イメージは「無印良品」のようなシンプルなカレンダー。

参考にしたのはこちらの記事です。

www.du-soleil.com

フッター のカスタマイズ

今まではシンプルに

「Copyright ©¡el BLANCO! All rights reserved.」

のみでした。

その上に、

• お問い合わせページ
• プライバシーポリシー

を、設けました。

また、丸い画像をクリックするとTopページが表示されるようにしました。

フッターデザインは、愛用しているテーマ「UNDER SHIRT」をデザインされた rokuzeudonさんのブログ を参考にさせていただきました。

美しいデザインのブログです！

blog.rokuzeudon.com

「読者になるボタン」を記事下に

サイドバーカスタマイズではありませんが・・・

記事上とサイドバーの「はてなブログアイコン」からも読者登録ができますが、やはり記事下にもあった方がいいかな？

と、思い設置してみました。

あちこちに色々なフォローボタンがあると鬱陶しいので、記事下には「読者になるボタン」のみ設置しました。

いつも参考にさせていただいている、シロマさんのカスタマイズ記事です。

www.notitle-weblog.com

今後のカスタマイズ

グローバルメニュー

スマホメニューの子カテゴリを折りたためるように表示させたいです。

グローバルメニューには様々なデザインがあるので、色々試してみたいです。

階層化

ゆっくり時間があるときに行う予定です。

着せ替え

今は薄いグレイッシュピンクですが、季節や気分に合わせて背景色を変えてみたいと思います。

数あるブログの中から、当ブログ「¡ El Blanco !（エル ブランコ）」を訪れていただきありがとうございました。

Madoriでした (´ｰ｀)