はてなブログのカスタマイズ

自分が今まではてなブログに行ってきたカスタマイズについてひと段落したのでここに貼ります。
自分がMarkdownモードユーザーなのでMarkdownで記事をかきhtmlなどの編集を行わなくてもそれなりの記事になるよう変更しています。

完成する記事概要

以下、私のブログです。だいたいこんな感じになります。
https://mahimahironron.hateblo.jp/entry/2019/11/09/docker-compose%E3%83%81%E3%83%BC%E3%83%88%E3%82%B7%E3%83%BC%E3%83%88

※ベースとなるテーマとしてbrooklynを使用していますが、基本、他のテーマでも問題ないと思いますが、ナビゲーションバーのカスタマイズは今回のコードでできないかもしれません。

フォントをメイリオにする

フォントを一般的に読みやすいと言われるメイリオに変更します。
記事コンテンツ内のフォントがメイリオになります。

/* フォントをメイリオにする */
.entry-content {
    font-family: 'Meiryo UI';
}

ナビゲーションバーの色変更

Brooklynは画面の上にカテゴリを示すナビゲーションバーを表示することができます。デフォルトでは黒なので、自分好みの色に変更します。
色については以下のサイトで探しましょう。
https://www.colordic.org/search

/* ナビテーションバーの色変更 */
#blog-title {
    border-bottom: 2px solid #a1dbe6
}
.global-menu-list li a {
    background-color: #a1dbe6;
}
#global-menu {
    background-color: #a1dbe6;
    border-bottom: 2px solid #a1dbe6
}

見出しのデザインを変更する（h3）

/* 見出しと見出しの文字の色を変更する、角を丸くする*/
.entry-content h3 {
    color: #ffffff; /* 文字の色 */
    background: #a1dbe6; /* 背景色 */
    border-left:0px;
    #border-color: #ffffff; /* 左の境界の色を白に変更 */ 
   /* 角を丸くする */
    border-radius: 10px;/*角の丸み*/
}

/* 吹き出し部分の色の変更 */
.entry-content h3:before {
    border-top-color: #a1dbe6
}

コードブロックを変更する

はてなブログに限った話ではないですが、コードブロックでは言語ごとの色付け(シンタックスハイライト)を行うことができます。

※シンタックスハイライトの付け方
- 念の為書いておきますがコードブロックを「```python」のように書くことで言語ごとの色付けを行うことが可能です。

/* コードブロックの背景色変更 */
pre.code{
    margin: 0 0 1.5em 0;
    padding: 1em;
    border: 1px solid #dad8d800;
    background: #efefef;
    border-radius: 2px;
}

コードブロックに言語表示

/* 言語名表示 */
pre.code::before {
    content: attr(data-lang);
    position: relative;
    bottom: 1em;
    right: 0.9em;
    background: #8e8e8e;
    padding: 0 0.35em;
    color: #ffffff;
    font-size: 90%;
    line-height: 130%;
    display: inherit;
    width: fit-content;
}

コードブロックの言語表示を言語ごとに色分け

/* 言語名ごとに色分け*/
pre.lang-yaml::before {
    background: #3f5845;
}
pre.lang-sh::before {
    background: #acc100;
}
pre.lang-python::before {
    background: #199e8c;
}
pre.lang-html::before {
    background: #ff9e26;
}

参考サイト

https://www.granfairs.com/blog/staff/make-triangle-with-css
- cssで三角形を表示する方法が乗っています。
https://saruwakakun.com/html-css/reference/box#section4
- 有名なサルワカサイトです。
http://needneoneet.blog.fc2.com/blog-entry-54.html
https://www.foxism.jp/entry/2017/09/11/165452
- コードブロックの改造方法がわかりやすかったです。ただhtmlモードむけなのか、Markdownで記事を書いただけではできないように感じました。
https://www.webprofessional.jp/category/html-css/