はてなブログカスタマイズの小ネタ3連発

はてなブログのカスタマイズの話しばかりで恐縮ですが、1本だと記事として弱いので、3本まとめて記事にしました。小ネタ3連発！

• 「404 Not Found」のページをカスタマイズした。（例：404 Not Found ページ）

記事がないページにアクセスしたときに表示される「404 Not Found」のページがあっさりしすぎなので、ちょっとしたメッセージと画像を表示するようにしました。

（デザイン→カスタマイズ→フッタにコードを入力）

jQuery
<script>
document.addEventListener('DOMContentLoaded', function() {
    if($('.no-entry')[0]) {
    	var content = '<p>ごめんなさい...。</p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20240512/20240512002250.png" width="500" height="500" alt="404" />';
        $('.entry-content').append(content);
    }
});
</script>

content = ' 404エラーページに表示する文章や画像 'という感じで追加していきます。

ソフトウェア開発日記｜はてなブログの404 NOT FOUNDページをカスタマイズする方法

－ 追記 －
jQueryを使わずにJavaScriptで表示させることにしました。

JavaScript
<script>
elm = document.querySelector('.no-entry .entry-content');
if(elm) {
    txt = '<p>ごめんなさい...。</p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20240512/20240512002250.png" width="500" height="500" alt="404" />';
    elm.insertAdjacentHTML('beforeend', txt);
}
</script>

mebee｜javascript insertAdjacentHTMLを使用してhtml要素を挿入する
leaves｜ネイティブなJavaScriptで速いDOM操作を行う方法

－ さらに追記 －
JavaScriptを使わずにCSSで表示させることにしました。

• ブログのタイトルの横に検索ボックス（検索窓）を設置する

ブログのタイトルの横の余白が大きく、さびしくなってしまったので、タイトルの横に検索ボックスを設置してみました（スマートフォンで見ると表示がカッコ悪くなってしまう）。

（デザイン→カスタマイズ→ヘッダ→タイトル下にコードを入力）

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」（絶対位置）で調整します。

Hatena Blog Theme Custom｜position:absoluteでタイトル横にSNSフォローボタンなどを並べる