Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

はてなブログのカスタマイズ(brooklyn)自分がやってきたことのまとめ(MarkDownで記事を書く人向け)

More than 1 year has passed since last update.

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

自分が今まではてなブログに行ってきたカスタマイズについてひと段落したのでここに貼ります。
自分が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;
}

参考サイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away