はてなブログのカスタマイズの話しばかりで恐縮ですが、1本だと記事として弱いので、3本まとめて記事にしました。小ネタ3連発！
- 「404 Not Found」のページをカスタマイズした。（例：404 Not Found ページ）
記事がないページにアクセスしたときに表示される「404 Not Found」のページがあっさりしすぎなので、ちょっとしたメッセージと画像を表示するようにしました。
（デザイン→カスタマイズ→フッタにコードを入力）
JavaScript <script> document.addEventListener('DOMContentLoaded', function() { if($('.no-entry')[0]) { var content = '<p>ごめんなさい...。</p><p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20221019/20221019155726.png" width="493" height="493" alt="404"></p>'; $('.entry-content').append(content); } }); </script>
content = ' 404エラーページに表示する文章や画像 'という感じで追加していきます。
参考になるブログ・Webサイト
ソフトウェア開発日記 - はてなブログの404 NOT FOUNDページをカスタマイズする方法
－追記－
jQueryを使わずにJavaScriptで表示させることにしました。
JavaScript
<script>
elem = document.querySelector('.no-entry .entry-content');
if(elem !== null) {
text = '<p>ごめんなさい...。</p><p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20221019/20221019155726.png" width="493" height="493" alt="404"></p>';
elem.insertAdjacentHTML('beforeend', text);
}
</script>
参考になるブログ・Webサイト
mebee - javascript insertAdjacentHTMLを使用してhtml要素を挿入する
leaves - ネイティブなJavaScriptで速いDOM操作を行う方法
- ブログのタイトルの横に検索ボックス（検索窓）を設置する
ブログのタイトルの横の余白が大きく、さびしくなってしまったので、タイトルの横に検索ボックスを設置してみました（スマートフォンで見ると表示がカッコ悪くなってしまう）。
（デザイン→カスタマイズ→ヘッダ→タイトル下にコードを入力）
HTML
<div style="position: absolute; top: 102px; left: 335px;">
<div class="hatena-module hatena-module-search-box">
<form class="search-form" role="search" action="https://simadzu.hatenablog.com/search" method="get">
<input type="text" name="q" class="search-module-input" style="font-size: 14px;" value="" placeholder="記事を検索" required>
<input type="submit" value="検索" class="search-module-button" />
</form>
</div>
</div>
サイドバーの検索（モジュール）をヘッダのタイトル下に表示しただけです。
設置する位置は「position:absolute」（絶対位置）で調整します。
参考になるブログ・Webサイト
Hatena Blog Theme Custom - position:absoluteでタイトル横にSNSフォローボタンなどを並べる
- ブラウザの戻るボタンや進むボタンを使っても、スクロールの位置を復元しない
このブログの内部リンクをクリックしたあとに、ブラウザの戻るボタンや進むボタンを使っても、スクロールの位置を復元しない（常に画面の一番上に移動する）ようにしました。
（デザイン→カスタマイズ→フッタにコードを入力）
JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
history.scrollRestoration = 'manual';
});
</script>
例えば、個別記事のページでリンクをクリックして次の記事を見たあとにブラウザの戻るボタンで戻っても、元の（スクロールの）位置ではなく、そのページの一番上を表示します。
参考になるブログ・Webサイト
chocotakaの日記 - SPAでhistory backでのスクロール位置
