幻魔ナイトブログ

主に絵、音楽、プログラミングなどについて書きます。

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

html/css プログラミング デザイン

f:id:MahiroN:20200921171305j:plain:w400

　　

※2020年4月30に更新しました。

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

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

※ベースとなるテーマとして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;
}

★追記(2020年4月30日)

この記事を書いてから色々とブログデザインを変更していたため。ここに書いておきます。

  • メイン
/* <system section="theme" selected="6653586347155924442"> */
/* @import url("https://blog.hatena.ne.jp/-/theme/6653586347155924442.css"); */
/* </system> */

/* 共通設定 */
/* <system section="background" selected="ddeaed"> */
body {
    /*#ddeaed*/
    background: #ddeaed;
}
/* </system> */

/* フォントを読みやすいものにするにする */
.entry-content {
    font-family: 'Karla', 'YuGothic', "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", 'Meiryo','Noto Sans JP','Meiryo UI','Osaka','Avenir';
}

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

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


/* サブメニューの背景調整 */
#box2 {
    background: white;
    padding: 2em 1em;
    border-radius: 10px;
}

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

/* コードブロックの背景色変更 */
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;
}

/*関連記事 見出し*/
.hatena-module-related-entries .hatena-module-title {
    padding: 7px;
    text-align: center;
    color: #75bda2;
    border-bottom: solid 2px #75bda2;
    font-size: 19px;
    margin-bottom: 3px;
}

/*1枚のカードの背景など*/
li.urllist-item.related-entries-item {
    margin: 12px 0;
    padding: 0 10px 0 0;
    background: #f4f4f4;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(3, 3, 3, 0.18);
    border-bottom: none;
}

/*関連記事の画像まわり余白調整*/
.urllist-with-thumbnails li .urllist-image {
    margin: 0 10px 0 0;
}

/* 関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
    padding-top: 9px;
    text-decoration: none;
    color: #525252;
    font-weight: bold;
    display: block;
}

/*関連記事のタイトルホバー*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover {
    color: silver;
}

/* 関連記事の説明*/
.urllist-entry-body.related-entries-entry-body {
    color: #8f8f8f;
    font-size: 13px;
    margin-top: 3px;
}

.urllist-date-link.related-entries-date-link {
    position: relative;
}

/* 関連記事の日付*/
.hatena-urllist .urllist-date-link a {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    background: #3a7682;
    color: #fff;
    line-height: 1;
    padding: 4px 5px;
    margin-bottom: 3px;
    font-size: 10px;
    font-style: normal;
    text-decoration: none;
}

/* 関連記事の説明文を非表示に*/
.urllist-entry-body.related-entries-entry-body {
    display: none;
}

/* 見出しの追加修正 */
.hatena-module-related-entries .hatena-module-title {
    border: none;
    background: #3a7682;
    color: white;
    border-radius: 10px;
}
/* 見出しの吹き出し入らないので消す(関連記事の見出しのみ)*/
.customized-footer .hatena-module-title:before {
  display:none;
}

/* 記事作成日付の色をと大きさと形を変更する */
.hatena-urllist .urllist-date-link a {
    padding: 0.1em 0.5em;
    border-radius: 10px;
    background: #3a7682;;
}

/* 記事背景を用紙っぽくする */
.entry-inner {
    background: white;
    border: 1em;
    padding: 1em 3
    em;
    border-radius: 10px;
    /* box-shadow: 0 0 black; */
}

/* タイトルカスタマイズ */
#blog-title {
    padding: 0;
}

/* bootstrapの色拡張 */
.bg-lavender {
    background-color: #e6e6fa;
}
.bg-lightsteelblue {
    background-color: #b0c4de;
}
  /* bootstrap 文字サイズ */
.display-6 {
    font-size:
     2.5em;
}
.display-7 {
    font-size: 2.0em;
}
.display-8 {
    font-size: 1.5em;
}
/* フッターデザイン */
#bottom-editarea {
    border:10px;
 
    border-top-color:gray;
    background:white;
    padding-top:1em;
}
#bottom-editarea>p {
    text-align:center;
}
/* PC用の設定 */
/* 文字の大きさを調整 */
@media screen and (min-width:1080px){
    .entry-content {
        font-size:17px;
    }
    .entry-content h3 {
        font-size:22px;
        font-weight: bold;
    }
    .entry-content h4 {
        font-size:20px;
        font-weight: bold;
    }
    .entry-content h5 {
        font-size:18px;
        font-weight: bold;
    }

    /* 記事部分に余白を持たせる */
    article {
        padding: 30px;
        border-radius: 10px;
        background: white;
    }
    /* 境界の白い線を除去 */
    #main {
        border-right: 0;
    }
    /* 最低限のマージンを左右に追加 */
    #main {
        margin-left:1.5em;
    }
    #box2{
        margin-right:1.5em;
    }

    /* 一覧をカードにして表示 PC*/
    .archive-entry.autopagerize_page_element {
        display:inline-block;
        width: 100%;
        margin:0em;
        background:white;
        padding:1em;
        border-radius:0px;
    }
    .archive-entry.autopagerize_page_element .archive-entry-header{
        display:inline-block;
        width:81%;
    }
    
    .archive-entry.autopagerize_page_element .entry-title-link {
    }
    
    .archive-entry.autopagerize_page_element .entry-description {
        display:none
    }
}

/* スマホの場合 */
@media screen and (max-width:1080px){
/* 容姿と画面の余白調整 容姿はばを変えることで対応 */
    #content{
        width: 98%;
    }
/* スマホの場合の文字の大きさを調整 */
    .entry-content {
        font-size:16px;
    }
    .entry-content h3 {
        font-size:18px;
        font-weight: bold;
    }
    .entry-content h4 {
        font-size:17px;
        font-weight: bold;
    }
    .entry-content h5 {
        font-size:16px;
        font-weight: bold;
    }
    /* 記事背景を用紙っぽくするのところの幅をスマホに合わせる */
    /* 下のarticle設定とかぶるのでコメントアウト */
    /* .entry-inner {
        border: 0.3em;
        padding: 0.3em;
    } */
    /* 記事部分に余白を持たせる */
    article {
        padding: 0.3em;
        border-radius: 7px;
        background: white;
    }


    /* 一覧をカードにして表示 スマホ*/
    .archive-entry.autopagerize_page_element {
        display:inline-block;
        width: 100%;
        margin:0em;
        background:white;
        padding:1em;
        border-radius:0px;
    }
    .archive-entry.autopagerize_page_element .archive-entry-header{
        display:inline-block;
        width:51%;
    }

    .archive-entry.autopagerize_page_element .date.archive-date {
        margin-bottom:0;
    }
    
    .archive-entry.autopagerize_page_element .entry-title-link {
        font-size:0.7em;
    }
    .archive-entry.autopagerize_page_element .archive-entry-body {
        display:inline-block;
    }
    
    .archive-entry.autopagerize_page_element .entry-description {
        display:none;
    }
}
  • トップページをカード型にする
/* PCのみトップページカード型 */
@media (min-width: 768px){
.page-index .archive-entries {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
  /*カード*/
.page-index .archive-entry{
  background :#fff2be;   /*カードの背景色*/
  width: 46%;   /*横幅（２カラム）*/
  padding-top:210px;   /* 上間隔（アイキャッチ画像分空ける） */
  padding-left:7px;    /* 左間隔 */
  padding-right:7px;   /* 右間隔 */
  padding-bottom:10px; /* 下間隔 */
  position: relative;
  box-shadow: 1px 1px 4px #cccccc;
  transition: .3s;
  border-radius: 4px;
}
/* アイキャッチのサムネイル */
.page-index .entry-thumb {
  width: 100%;   /* アイキャッチサムネイル横幅 */
  height: 200px;  /* アイキャッチサムネイル縦幅 */
  background-position: center center;
}
.entry-thumb-link:hover {
  opacity:0.7;
}
/* アイキャッチ */
.page-index .entry-thumb-link{
  display: block;
  width: 100%;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px 4px 0 0;
}
/* 記事タイトル */
.page-index .entry-title{
  padding : 5px 0px 0px 5px;  /* タイトル上下に間隔 */
}
/* 記事の概要 */
.page-index .entry-description{
  display : none;
}
/* 日付 */
.page-index .date{
  padding-top:2px;  /*上間隔 */
  padding-left:7px; /* 左間隔 */
}
/* カテゴリ */
.page-index .archive-entries .categories {
  position :absolute;
  top:4px;      /* 上間隔 */
  left:4px;     /* 左間隔 */
  z-index:1;  /* アイキャッチの上に配置 */
}
/* カテゴリラベル色(記事) */
.categories a {
    background: #ffc0cb;
    color: #000;
    border-radius: 0.2em;
}
/* カテゴリラベル色(archive) */
.page-archive .categories a {
    background: #ffc0cb;
    color: #000;
    border-radius: 0.2em;
}
/* はてなスター */
.star-container {
  display : none;
}
}

参考サイト

© 2020 幻魔ナイトの色々日記 All rights reserved.

お問合わせはこちら