思考は現実化する

自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。

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

f:id:b204638:20180712170823j:plain

 

こんにちは。

 

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

 

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

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

f:id:b204638:20180712173906p:plain

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

f:id:b204638:20180712173921p:plain

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

 

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

 

 

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

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

「ダッシュボード」>「デザイン」>「カスタマイズ」>「{}デザイン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;
}

 

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

f:id:b204638:20180712175621p:plain

 

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

f:id:b204638:20180712173921p:plain
f:id:b204638:20180712175621p:plain

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

 

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