約 1 分で読めます

はてなブログのレイアウト備忘録（特にZenn風コードブロック)

まいかい書き直してはなぜ消してしまったんだ。。。と嘆くので備忘録として記事にしておく。

CSS

記事ページやら見出しとかのデザイン修正が主なので、僕の使用してるMinimalismっていうテーマに結構依存すると思っている。
デザイン > カスタマイズ > デザインCSSに記述。

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

* {
  font-family: "Noto Sans JP", sans-selif;
  font-weight: 500;
}

.entry-content table th,
.entry-content table td {
  border: none
}

/* ヘッダー */
h1#title a{
  content: url(/images/fotolife/20240313052618.png);
  display: inline-block;
  vertical-align: middle;
  height: 60px;
}

header#blog-title {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
  background-color: #86cfcf;
}

@media screen and (min-width:600px) {
.entry-content {
  font-size:16px;
}
h1#title a {
  height: 100px;
}
}

/* 細かい調整 */
.entry-content code {
  background-color: #215aa012;
}

/* テーブル */
.entry-content table th {
  background-color: #edf2f7;
  font-weight: 700;
  border: 1px solid #d6e3ed;
}

.entry-content table td:not(pre.code table td) {
  border: 1px solid #d6e3ed;
  font-weight: medium;
}

/* 引用 */
.entry-content blockquote{
  border: none;
  margin: 1.4rem 0;
  border-left: 3px solid #8f9faa;
  padding: 2px 0 2px .7em;
}

/* 見出し */
h1 {
  text-align: center;
}

h2 {
  font-size: 1.5rem;
  padding-bottom: .3em;
  margin-top: 2.3em;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid #d6e3ed;
  font-weight: bold;
}

h3 {
  font-size: 1.3em;
  margin-top: 2.25em;
  margin-bottom: .5em;
  font-weight: bold;
}


#main {
  line-height: 1.8;
  margin-top: 10px;
}

/* サイドバー */
#box2 {
  margin-top: 10px;
  box-shadow: 0 0 10px #e7e3e3;
  padding: 8px;
  border-radius: 8px;
}

a.entry-see-more {
  padding: 5px 10px;
  border-radius: 999px;
  background-color: #86cfcf;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: block;
}

/* 記事一覧の見出し */
.page-archive .entry-thumb {
  width: 320px;
  height: 180px;
}
.page-archive .archive-entries .archive-entry {
  margin-bottom: 1em;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #cad9d8;
}

コードブロック

参考にさせてもらったページは
はてなブログのコードブロックにテーマを設定する（シンタックスハイライト） - OREMATOPEE
完全にZennのページ見ながらレイアウト盗んできました。
あと、自分なりにコピー機能もつけた。

設定 > 詳細設定 > 要素にメタデータを追加に貼り付ける

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/base16/tomorrow-night.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/erb.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/plaintext.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre.code').forEach((block) => {

    hljs.highlightBlock(block);

    var copyButton = document.createElement('button');
      copyButton.className = 'copy-button';
      copyButton.innerHTML = '<img src="https://static.zenn.studio/images/copy-icon.svg" width="20" />';
      copyButton.onclick = function() {
        var codeElem = this.parentNode.querySelector('code') || this.parentNode;
        var textArea = document.createElement('textarea');
        document.body.appendChild(textArea);
        textArea.value = codeElem.textContent;
        textArea.select();
        document.execCommand('copy');
        this.innerHTML = "Copied!";
        setTimeout(() => {this.innerHTML = '<img src="https://static.zenn.studio/images/copy-icon.svg" width="20" />'}, 1000);
        document.body.removeChild(textArea);
      }
      block.appendChild(copyButton);

    var classes = block.classList;
    if(classes.length > 0){
      if(classes[1].indexOf(':')){
        var values = classes[1].split(':');
        var filename = values[1];
        if(filename){
          block.setAttribute('data-filename', filename)
          block.classList.remove(classes[1]);
          block.classList.add(values[0]);

          var filenameEle = document.createElement('div');
          filenameEle.classList.add('filename');
          filenameEle.append(document.createTextNode(filename));
          block.parentNode.insertBefore(filenameEle, block);

          var adjustmentEle = document.createElement('div');
          adjustmentEle.classList.add('code-block-filename-adjustment');
          block.parentNode.insertBefore(adjustmentEle, block);
        }
      }
    }

    // ちらつき解消
    block.classList.add("visible");
  });
});
</script>
<style>
/* ファイル名表示 */
.filename {
  max-width: 100%;
  background: #323e52;
  color: #fff;
  font-size: 0.8em;
  height: 24px;
  line-height: 24px;
  padding: 0 6px 0 8px;
  font-family: monospace;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: fit-content;
}

.code-block-filename-adjustment {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #1a2638;
}

.copy-button {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: 8px;
  background-color: #1a2638;
  opacity: 0;
}

.copy-button:hover {
  opacity: 1;
  transition: opacity 300ms ease
}

/* ちらつき解消 */
.entry-content pre.code {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.entry-content pre.code.visible {
  opacity: 1;
}
pre.code {
  position: relative;
  border-radius: 4px;
  background-color: #1a2638;
  border: none;
  line-height: 1.2;
}
pre.code span {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
</style>