コピペ一発！はてなブログのサイドバーにあるカテゴリをオシャレにしよう！

こんにちはHTML・CSSが全然分からないサタン (@needs_blog_com) です。

ブログをカスタムしたい！ってよく思うんですがHTML・CSSが分からないんですよね、そんな方っていっぱいいると思うんですが、そういう時どうしてますか？やはりコピペカスタムですよね笑

コピペ一発でカスタム出来るって素晴らしい・・・

今回はこんな感じにカスタムしてみましたのでご覧ください！

カテゴリがおしゃれに

サイドバーにあるカスタム欄のビフォーアフターをご覧ください！

Before

ちょっと寂しいですよね、なのでちょっと色を付けてあげましょう！

コピペでカスタムしたのがこちら

After

なんということでしょう・・・そっけない文字だけのカテゴリが華やかなグリーンの背景により一瞬でおしゃれになりました笑

【SPONSORED LINK】

やり方

やり方は超絶簡単です！簡単2ステップ

 ステップ1

まずはこちらをコピー

/* カテゴリー */

.hatena-module-category .hatena-module-body ul.hatena-urllist li {

    float: left;

}



.hatena-module-category .hatena-module-body ul.hatena-urllist li a{

    margin: 0 5px 5px;

    color: #fff;

    padding: 5px;

    background-color: #3cb371;

    text-decoration: none;

}



.hatena-module {

    clear: both;

    overflow: hidden;

}

 ※文字色変えたい場合

7行目　#fff　の部分をお好みの色に変更して下さい。

 color: #fff;

※背景色変えたい場合

9行目　#3cb371　の部分をお好みの色に変更して下さい。

 background-color: #3cb371;

お好みの色はコチラで探せます！

WEB色見本 原色大辞典 - HTMLカラーコード

ステップ2

デザインCSSにペースト！

デザインCSSの場所はコチラ

デザイン→カスタマイズ→デザインCSS

簡単でしょ？

まとめ

これであなたもコピペカスタムの虜ですね！どんどんブログをカスタマイズしていきましょう笑

関連

www.needs-blog.com

あっ！そういえば20〜30個近くカテゴリ分けしてたんですが、今日から5つに絞りました！すごくスマートになちゃった笑

カテゴリ整理は色々役立つらしいので是非やってみて下さい！時間かかりますがそこは我慢・・・

SEOに強くなり、アクセスアップにつながるかもよ〜

参考：ブログ記事のカテゴリー整理は絶対にやるべし！それだけでアクセスアップに繋がるよ！