まいかい書き直してはなぜ消してしまったんだ。。。と嘆くので備忘録として記事にしておく。
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(https://cdn-ak.f.st-hatena.com/images/fotolife/k/kuu13580/20240313/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>