サイドバーのカテゴリーをリスト表示からタイル表示にする方法【はてなブログカスタマイズ】

こんにちは。

あなたのブログでは、カテゴリー表示はリスト表示ですか、それともタイル表示ですか。

はてなブログのカテゴリー表示は使用しているデザインテーマにより異なります。

私が長らく使用させていただいていたデザインテーマ「Brooklyn」では、カテゴリーはタイル表示されます。

ですがデザインテーマを変更すると、テーマによってはカテゴリー表記がリスト表示に変わってしまいます。

しかし、このリスト表記、タイル表記に比べどうしても縦長に表示されてしまいます。カテゴリー数が多いブログではかなりの長さになってしまうのではないでしょうか。

そこで今回はカテゴリーをリスト表示からタイル表示にする方法をご紹介します。

カテゴリーをリスト表示からタイル表示にする方法

カテゴリーをタイル表示にするには次のコードを

「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「｛｝デザインcss」

に記述します。

/* Categoryをタイル表示に変更（Innocent） */
.hatena-module-category .hatena-urllist {
 margin: 0 0 -6px;
 padding: 0;
}
.hatena-module-category .hatena-urllist li::before {
 content: none;
}
.hatena-module-category .hatena-urllist li {
 border-top: 0;
 display: block;
 float: left;
 margin: 0 6px 6px 0;
 padding: 0;
}
.hatena-module-category .hatena-urllist li a {
 border: 1px solid #e6e6e6;
 border-radius: 2px;
 display: block;
 font-size: 0.8667em;
 line-height: 32px;
 padding: 0 12px;
}
.hatena-module-category .hatena-urllist li a:hover {
 background-color: #f6f6f6;
 color: #333;
}

これでカテゴリーがリスト表示からタイル表示に変わります。

リスト表示と比べてみるとタイル表示の方がよりコンパクトに表示されることが一目でわかります。サイドバーをスッキリまとめたいという人は導入してみてはいかがでしょう。

※今回はデザインテーマ「ZENO-TEAL」で導入してみました。デザインテーマによってはコードのmarginなどを調整する必要があるかもしれません。

はてなブログで「サイドバーのカテゴリーをリスト表示からタイル表示にする方法」の紹介は以上です。

はてなブログ Perfect GuideBook

posted with カエレバ

JOE AOTO ソーテック社 2016-07-22