hatenahotaru

競プロとゲームをしていません

はてなブログのデザインをいじりました

やったこと

テーマBrooklynを入れる。

レスポンシブデザイン化。

ヘッダーを適当な画像に差し替え。

フォント変更。

ナビメニュー追加。

ナビメニュー、サイドバー、見出し、更新日時のスタイル変更。 色はマチカネフクキタルの色を色トレスしている。

コードブロックの色をMonokai化、行番号追加、言語名表示、スタイルを微調整。

ヘッダー フッター デザインCSS

ヘッダー

<!-- はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG
https://www.notitle-weblog.com/brooklyn/ -->
<div id="global-menu">
  <ul class="global-menu-list">
    <li><a href="https://atcoder.jp/users/machikane">AtCoder</a></li>
    <li><a href="https://github.com/hotarunx">GitHub</a></li>
    <li><a href="https://twitter.com/hotarunx">Twitter</a></li>
    <li>
      <a
        href="https://hotarunx.hatenablog.com/archive/category/%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0"
        >競技プログラミング</a
      >
    </li>
    <li>
      <a href="https://hotarunx.hatenablog.com/archive/category/Game">Game</a>
    </li>
  </ul>
</div>

フッター

<script>
  var codeBlocks = document.getElementsByClassName("code");
  [].forEach.call(codeBlocks, function (e) {
    if (!/lang/.test(e.className)) {
      return;
    }
    var sourceCode =
      e.innerHTML.slice(-1) === "\n" ? e.innerHTML.slice(0, -1) : e.innerHTML;
    var lines = sourceCode.split(/\n/);
    var codeBlock = "";
    lines.forEach(function (line) {
      line += line === "" ? "\n" : "";
      codeBlock += '<div class="code-line">' + line + "</div>";
    });
    e.innerHTML = codeBlock;
  });
</script>
<script type="text/javascript">
  window.addEventListener("load", function onLoad() {
    window.removeEventListener("load", onLoad);
    var codes = document.querySelectorAll("pre.code");
    var len = codes.length;
    for (var i = 0; i < len; i++) {
      (function () {
        var code = codes[i];
        // select all on double click
        code.addEventListener("dblclick", function () {
          var range = document.createRange();
          range.selectNodeContents(code);
          var selection = document.getSelection();
          selection.removeAllRanges();
          selection.addRange(range);
        });
      })();
    }
  });
</script>

デザインCSS

/* <system section="theme" selected="6653586347155924442"> */
@import url("https://usercss.blog.st-hatena.com/-/theme/6653586347155924442.css?version=7d22d39cbefb6e22ebe8456f8029586e21c3eb3f");
/* </system> */

/* フォント */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "MS PGothic", sans-serif; /* フォントの種類 */
}

/* ナビメニュー */
#global-menu {
  /* メニュー全体 */
  background-color: #3d89e9; /* ⑥両サイドの背景色 */
  border-bottom: 2px solid #3d89e9; /* ⑦下部のラインの太さと色 */
}
.global-menu-list li a {
  /* 通常時 */
  background-color: #3d89e9; /* ⑧メニューの背景色 */
  color: #ffffff; /* ⑨メニューの文字色 */
  font-size: 16px; /* ⑩メニューの文字のサイズ 最小値:10px */
  padding: 8px; /* ⑪メニューバーの文字の高さ 22+設定値×2 px */
}
.global-menu-list li a:hover {
  /* マウスオーバー時 */
  background-color: #dddddd; /* ⑫メニューの背景色 */
  color: #3d89e9; /* ⑬メニューの文字色 */
}

/* サイドバーの見出し */
.hatena-module-title {
  /* 四角部分 */
  color: #ffffff; /* ①文字色 */
  font-size: 16px; /* ②文字サイズ */
  background: #3d89e9; /* ③背景色 */
  border: 2px solid #3d89e9; /* ④枠線:太さ 線種 色 */
}
.hatena-module-title a {
  /* (リンク有)の文字 */
  color: #ffffff; /* ⑤文字色 */
}
.hatena-module-title:before {
  /* 吹き出しの枠線 */
  /* display: none; /* ⑥非表示にする */
  border-top-color: #3d89e9; /* ⑦枠線:色 */
}
.hatena-module-title:after {
  /* 吹き出しの背景 */
  /* display: none; /* ⑧非表示にする */
  border-color: transparent; /* 一度全体を透明にする */
  border-top-color: #3d89e9; /* ⑨背景色 */
}

/* 見出し1 */
.entry-content h3 {
  /* 四角部分 */
  color: #ffffff; /*  ①文字色 */
  font-size: 23px; /* ②文字サイズ */
  background: #3d89e9; /* ③背景色 */
  border-left: 12px solid #f8a717; /* ④左側の線:太さ 線種 色 */
  border-bottom: 2px solid #f8a717; /* ⑤下側の線:太さ 線種 色 */
  padding: 7px 10px 5px 10px; /* ⑥文字と枠の間の余白 上右下左の順 */
}
.entry-content h3:before,
.entry-content h3:after {
  /* 吹き出しの背景 */
  /* display: none; /* ⑦非表示にする */
  border-color: transparent; /* 一度全体を透明にする */
  border-top-color: #f8a717; /* ⑧背景色 */
}

/* 見出し2 */
.entry-content h4 {
  color: #111111; /* ⑨文字色 */
  font-size: 21px; /* ⑩文字サイズ */
  background: #f5f5f5; /* ⑪背景色 */
  border-left: 6px solid #f8a717; /* ⑫左側の線:太さ 線種 色 */
  border-bottom: 2px solid #f8a717; /* ⑬下側の線:太さ 線種 色 */
  padding: 0px 10px 0px 10px; /* ⑭文字と枠の間の余白 上右下左の順 */
}

/* 見出し3 */
.entry-content h5 {
  color: #111111; /* ⑮文字色 */
  font-size: 19px; /* ⑯文字サイズ */
  background: #ffffff; /* ⑰背景色 */
  border-left: 4px solid #3d89e9; /* ⑱左側の線:太さ 線種 色 */
  border-bottom: 2px dashed #3d89e9; /* ⑲下側の線:太さ 線種 色 */
  padding: 0px 6px 0px 6px; /* ⑳文字と枠の間の余白 上右下左の順 */
}

.date a {
  background-color: #f8a717;
}

/*Monokai*/
.entry-content pre.code {
  background-color: #272822; /*背景色*/
  color: #f8f8f2; /*テキスト*/
}
.synComment {
  color: #75715e;
} /*コメント*/
.synSpecial {
  color: #e6db74;
} /*特殊文字*/
.synType {
  color: #66d9ef;
} /*型*/
.synPreProc {
  color: #f92672;
} /*プリプロセッサ*/
.synStatement {
  color: #f92672;
} /*ステートメント*/
.synIdentifier {
  color: #f8f8f2;
} /*識別子*/
.synConstant {
  color: #ae81ff;
}

/* コードブロックの背景色変更 */
pre.code {
  font-size: 90%;
  margin: 0 0 1.5em 0;
  padding: 0 0 0 0;
  border-radius: 2px;
}

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

/*code-lineクラスの数でカウント*/
.code-line {
  counter-increment: linenumber;
}

/*偶数行のみ背景色を適用*/
.code-line:nth-child(even) {
  background-color: #111111;
}

/*行番号を擬似要素として表示*/
.code-line::before {
  content: counter(linenumber);
  display: inline-block;
  color: #ccc;
  text-align: right;
  width: 35px;
  padding: 0 15px 0 0;
}