クロワッサンシカゴのねごと

クロワッサンシカゴ(Croissant Chicago)の公式ブログ。




はてなブログのカスタマイズのご紹介

f:id:croissantchicago:20170715040017p:plain
今回は、はてなブログでブログをカスタマイズをする際に
参考にした記事などをご紹介したいと思います。
HTMLやCSSなどを少しでも知っておくと
さらに自分好みにアレンジできると思います。

① このブログのテーマ

f:id:croissantchicago:20170715022453j:plain

Simple Gray - テーマ ストア

「Simple Gray」を使わせてもらっています。
2カラムレイアウトのシンプルなテーマです。
レスポンシブデザイン(スマホ対応)です。

② 記事下部に便利なものを追加

f:id:croissantchicago:20170715023455p:plainMinimal-Greenさんの記事を参考にしました。
ガーリーなデザインにしたい方におすすめです。
記述した場所は「記事の下」「デザインCSS」です。

ガーリーなSNSボタン

「この記事が気に入ったらフォロー」バナー

あわせて読みたい」関連記事表示

f:id:croissantchicago:20170715025504p:plain池田仮名さんの記事を参考にしました。
関連記事のカテゴリを切り替えることも可能です。
記述した場所は「記事の下」です。

③ サイドバーに便利なものを追加

わたしはサイドバーの配置をころころ変えるので
一番"これ"と定まらない場所です。
アルバムの無料配布を一番上に配置しています。
はい、みなさんダウンロードお願いしますm(_ _)m

プロフィール部分をおしゃれに

えむしてっくさんの記事を参考にしました。
プロフィール画像を大きめに表示できます。

Twitterウィジェットを追加

モジュールを追加するだけなので簡単かと思います。
てつさんの記事がわかりやすいかと。

④ 記事のタイトルのデザイン調整

northgeekさんの記事を参考にしました。
記事タイトルと記事の間にボーダーができたので
ちょっぴり読みやすくなった感じです。

⑤ グルーバルメニューを設置する

すりゴマさんの記事を参考にしました。
そのままだと味気ないのでCSSでアレンジしています。CSSでhover属性を付与してあげれば、
マウスを乗せた時にアニメーションするのでおしゃれにできます。

⑥ ページTOPボタンの設置

ブログの頭に一気に戻るためのボタンを右下に設置します。
本テーマには最初から付いているので、
シームレスに移動するJavaのみ設定すると良いかと。

まとめ

というわけでかなり雑になってますが、
このブログで使っているカスタマイズをまとめてみました。
参考になれば幸いです。

それでは!

広告を非表示にする