読者です 読者をやめる 読者になる 読者になる

NEEDS

「NEEDS」を運営しているサタンです!高知県在住の20代男子がブログで情報発信しつつ、みんなのニーズを叶えていきます。連絡先 needsblog@gmail.com

SPONSORED LINK

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

BLOG-ブログ

SPONSORED LINK

f:id:needsblog:20161028002831p:plain

 

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

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

 

 

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

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

 

 

カテゴリがおしゃれに

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

 

Before

f:id:needsblog:20161028002831p:plain

 

 

 

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

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

 

 

After

f:id:needsblog:20161028003014p:plain

 

 

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

 

【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に強くなり、アクセスアップにつながるかもよ〜

 

 

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

 

 

SPONSORED LINK