【はてなブログ】カテゴリーの設置について

f:id:Kawan0116:20210521131013p:plain

かわんです。

はてなブログでブログを運営する際、デザインをいじりたくなりますよね~。

僕は、デザインをいじりまくりです。

一応、デザインテーマを自作。

ただ、デフォルトのCSSが存在しているみたいで、もし、そこについてCSSを書くときは上書きするようにしています。

そんな感じですが、今日は以前に引き続き、カテゴリーについて書いてみたいと思います。

カテゴリーをタグ風にする

カテゴリー表示は簡単ですね。

標準であれば、一列に並びますよね。

それで問題ないんでしょうけど、僕的にはちょっといじりたいと思いました。

CSSはこう書いた

CSSはこんな感じで書きました。

.hatena-module.hatena-module-category ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 1.5em;
}

基本的に、上のCSSで大丈夫でした。

これでタグ風に出来ます。

あとはタグ風になったモノに関して、タグをより分かりやすくる為にCSSをこんな感じで書きました。

.hatena-module.hatena-module-category ul li a {
    display: block;
    border: 1.25px solid #fff;
    border-radius: 0;
    margin-right: 0.35em;
    padding: 4px 8px;
    padding-bottom: 2px;
    margin-bottom: 0.4em;
    color: #fff;
}

.hatena-module.hatena-module-category ul li a:hover {
  background: #000;
  border: 1.25px solid #000;
  color: #fff;
}

僕が使っているデザインテーマで実現出来たモノ。

他のデザインテーマは分かりません。

1時間程度で出来る

CSSを知っている方なら1時間もあれば十分かと思います。

CSSを書く際、ターゲットとなるHTMLタグを見つける必要があります。

見つけるのが結構手間ですけどね。

HTMLタグが分かれば、あとはそれに向けてCSSを書くだけ。

僕の場合、HTMLタグを見つけるのに20分程度、CSSで残りの時間を使うという形です。

バックアップを取ってから作業することにしている

基本、ローカルでCSSを書いて、本番環境にアップします。

本番環境にアップする前に、既に書いて公開しているCSSをローカルで保存して作業します。

本番環境にアップしてデザインが崩れた場合、すぐにバックアップしたCSSを使えるので便利。

出来るだけレイアウトが崩れる時間を短くするという形です。

今のカテゴリー表示、好きだ

今のカテゴリー表示が好きです。

基本、シンプルなモノが好きなので、アイコンを付けたりということはないですね。

デザインは引き算だと考えています。

「何を付けるより、何を付けないか」という感じです。

今のデザインは、出来るだけ余計なモノを排除しています。

さいごに

カテゴリーは必要なのか・・・。

そんな疑問が湧いていますが、とりあえず、試験的に導入しています。

あまり効果がないと思ったら、カテゴリーの表示は取り止めます。

今のところはそんな感じです。