えむしとえむふじんがあらわれた

オタクな夫婦が書く日常とか思った事なんかのアレコレに思い出話とか。三人の子持ちです。

スポンサーリンク

【カスタマイズ】コピペするだけ!カテゴリーをタグ風にカスタマイズする方法

\フォロー!/
\シェア!/

f:id:mshimfujin:20160724195409j:plain f:id:mshimfujin:20160714173027j:plainこんにちはえむしです。この前のまとめの中に入れてもいいと思ったんですが、 貼り付けるにはちょっと長くなってしまったので別記事にしました。

今回はサイドバーのカテゴリーをタグっぽくする方法のご紹介です。 タグクラウド風にするやり方はまとめの方にリンクを記載しておきました。

blog.mshimfujin.net

よろしければこちらから。

今回の記事はこちらを参考に書かせていただきました。 nohack-nolife.hatenablog.com

f:id:mshimfujin:20160726114748p:plainさて、カスタマイズの為に、まずはこちらを開きます。
場所はデザイン→カスタマイズ→デザインCSSです。
そして、下記のコードをコピーそしてCSSのフィールドにペースト。
これで終わりです。
/* サイドバーのカテゴリーをカスタマイズ */
.hatena-module-category .hatena-module-body ul.hatena-urllist li {
    float: left; /* 右に寄せたければright */
}

.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
    margin: 0 5px 5px;
    color: #fff; /* 文字色 */
    border-radius: 3px; /* 角を丸めます。エッジを効かせたい場合はこの行丸ごと削除してください */
    padding: 5px;
    background-color: #1d3557; /* 背景色 */
    text-decoration: none;
}

.hatena-module {
    clear: both;
    overflow: hidden;
}

当サイトのサイドバーのカテゴリーCSSはこんな感じです。背景色だけ汎用性の高そうな青っぽい色にしています。 よろしければ参考に…。 背景色を各々のサイトに合うように変更すればこのままコードを貼っていただいて完成です。

background-color:を当サイトと同じにしたいのであれば左の数値に変更してください。

#c9c19f#1d3557

右側はデフォルトのカラーになってます。

www.colordic.org webdesignrecipes.com

色の決め方はこの辺りを参考にされると良いですよ。 参考にしてみてください。

border-radius:の部分は50%を入力すると半円になると思いますよ。 角を丸めたい方は数値を適当に入れてみて調整して下さい。 また、一部だけ丸めたい方は

cssで上だけ角丸を作る方法(border-radius上だけ) – 飲食店のホームページ制作研究所「とっつぁんブログ」

こちらを参考にされては如何でしょうか。

CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。

スポンサーリンク


2週間無料です!
まずはお試しあれ〜!

ベネッセコーポレーション 進研ゼミ・こどもちゃれんじ

その他