アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】カテゴリーのデザイン変えてみた

どもども。

カテゴリって1記事に複数つけられるのね。(最近知ったぜ

とりあえず修正

以下はSCSS表記ですが、sassmeisterっていうサイトを使えば以下のコードを通常のCSSに変換してくれるので、デザインCSSに直接貼り付けたい場合は使ってみてください。

.categories {
    margin: .5em 0;
    font-size: .9rem;
    a {
        margin-right: .5em;
        /* ここから追加 */
        padding: 5px;
        border-radius: 10%;
        background: #FF7E00;
        color: #fff;
        opacity: 0.8;
        text-decoration: none;
        &:hover {
            color: #FFFF;
        }
        &::before {
            display: none;
        }
    }
}

おなじみのBoilerplate でデザインCSSに反映させる。

結果

Before

before

After

after

背景オレンジ色になり主張が強くなった。

カテゴリ別に色分けしたら見やすいかな

(得意のタグクラウド)

カテゴリー

とりあえずやってみる

配色はこんな感じでやってみる

  • 育児
  • 技術
  • ブログ運営

スクリプトを追加

ここかなぁ。

設定>詳細設定>検索エンジン最適化>headに要素を追加

ここにスクリプトを追加してみます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script type="text/javascript">
    $(document).ready( $ => {
        $('.archive-category-link, .entry-category-link').each((i, elem) => {
            const text = $(elem).text() 
            let bg_color = '#555'
            switch (text) {
                case '育児': bg_color = '#DE7A22'; break;
                case '技術': bg_color = '#1E434C'; break;
                case 'ブログ運営': bg_color = '#20948B'; break;
            }
            const style = {
                color: "#FFF",
                background: bg_color,
            }
            $(elem).css(style)
        })
    })
</script>

.archive-category-linkが一覧画面に表示されるタグで
.entry-category-linkが記事内で表示されるタグ をとってきています。

switchでタグ名を判定して色を設定します。

結果(カラー)

Before

カラーBefore

After

カラーAfter

意外と1発でうまくいった。
ぱっと見で見分けがつくようになったと思います(強い気持ち

記事

記事ページ内の表示も問題なさそうです。

おわり

Javascript使えるならなんでもできるやんけ
以上!

スポンサーリンク