ブログ散歩|はてなブログのオリジナル、カスタマイズ方法&インテリア

部屋のインテリア同様、ブログをお気に入りのオリジナルデザインにカスタマイズ方法を解説。と長くブログを楽しむ、続ける方法を工夫しています。

【はてなサイドバー】のデザインをオリジナルにカスタマイズ

広告

f:id:hachi001:20180108022656p:plain

サイドバーの背景を変更する方法

だいたいのテーマで変更可能だと思います できないテーマの人はごめんなさい。 (例1)

f:id:hachi001:20171216133719j:plain

(例2)

f:id:hachi001:20171216133724j:plain

サイドバーのカテゴリーの背景に色をつける

*背景に画像を設定する方法はこちら→【はてなサイドバー】のデザインをオリジナルにカスタマイズ(背景画像編) - ブログ散歩
*コードをCSSに設定してください。
やり方はこちら→CSS てのを設定する方法 - ブログ散歩
*「#ff00ff」は例でみるように、ピンクを表しています。お好きな色を選べます。
色の選び方はこちら

全カテゴリーに色をつける

.hatena-module{
background-color: #ff00ff;
}

f:id:hachi001:20171217233559j:plain

カテゴリー「検索」に色をつける

.hatena-module-search-box{
background-color: #ff00ff;
}

f:id:hachi001:20171217233627j:plain

カテゴリー「リンク」に色をつける

.hatena-module-links{
background-color: #ff00ff;
}

カテゴリー「最新記事」に色をつける

.hatena-module-recent-entries{
background-color: #ff00ff;
}

カテゴリー「カテゴリー」に色をつける

.hatena-module-category{
background-color: #ff00ff;
}

カテゴリー「月別アーカイブ」に色をつける

.hatena-module-archive{
background-color: #ff00ff;
}

カテゴリー「注目記事」に色をつける

.hatena-module-entries-access-ranking{
background-color: #ff00ff;
}

カテゴリー「関連記事」に色をつける

関連記事に色をつけると、記事下の関連記事にも色がつきそうな気がするので載せておりません。
あしからず

色を選ぶ方法

1、Googleで「色見本 」と検索します。
2、色を選びます。
3、下線の部分が色のコードです。

f:id:hachi001:20171217235916j:plain