ちょっと差がつくはてなブログの簡単カスタマイズ

あのブログよりもちょっと差がつくはてなブログの簡単なカスタマイズをご紹介します。
ブログをちょっとカスタマイズするだけで自分のブログに愛着がわくかもしれませんよ。

検索ボックスを見やすく

はてなブログでサイドバーに表示できる「検索ボックス」（デザイン→カスタマイズ→サイドバー→モジュールを追加→「検索」）で文字を入力する時（フォーカス時）にちょっとだけ見やすくします（このブログの検索ボックスで確認してみてください）。

検索ボックスの「記事を検索」を消す

検索ボックスに文字を入力する時に「記事を検索」を消します。
文字を入力するタイミングで検索ボックスの「記事を検索」の文字色を検索ボックスの色（背景色）と同じにします。

(デザイン→カスタマイズ→「デザインCSS」にコードを入力)

CSS
input::placeholder {
    color: #000;
}

input:focus::placeholder {
    color: #fff;
}

参考になるブログ・Webサイト

placeholderをCSSだけでフォーカス時に消す方法

CSSだけで、フォームのinputタグにフォーカスするとplaceholder（プレースホルダー）を非表示にすることができます。 フォームの使い勝手も向上するので、Webサイトに実装しておきたいテクニックです。 jQuery等を使用して、フォーカスした瞬間にプレースホルダー…

amelog

検索ボックスの枠線を強調

検索ボックスに文字を入力している時に枠線を強調するようにします。
サイドバーの検索ボックス「.search-form」と検索したあとに表示される検索ボックス「.search-result-form」を指定して検索ボックスの枠線の色を変更しています。

(デザイン→カスタマイズ→「デザインCSS」にコードを入力)

CSS
.search-form:focus-within,
.search-result-form:focus-within {
    border-color: #000;
}

参考になるブログ・Webサイト

CSSで子要素のinputがフォーカスされたときに親要素の枠線を…

子要素の input type="text" をフォーカスしたときに親要素のボーダー（枠線）を変える CSS のコード 親要素の focus-within を指定します。

Irohabook

“あわせて読みたい”を表示

はてなブログに “あわせて読みたい” という機能（リンク）を追加する方法はいろいろあるとは思いますが、はてなブログの「関連記事を記事下に表示する」（デザイン→カスタマイズ→記事→「関連記事を記事下に表示する」）の “関連記事” というタイトルを “あわせて読みたい” に変更するのが一番簡単ではないかと。CSSかJavaScriptかお好きなほうで。

（デザイン→カスタマイズ→「デザインCSS」にコードを入力)

CSS
.hatena-module-related-entries .hatena-module-title {
    font-size: 0;
}

.hatena-module-related-entries .hatena-module-title:after {
    content: "あわせて読みたい";
    font-size: 15px;
}

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

JavaScript
<script>
    document.getElementById('entry-footer-secondary-modules').getElementsByClassName('hatena-module-title')[0].textContent = 'あわせて読みたい';
</script>

参考になるブログ・Webサイト

関連記事と記事下の順番を変えたり、いろいろカスタマイズ

はてなブログに自動で「関連記事」が表示され始めたので、前回サラッと見てみました。それで、その時は「関連記事が記事本文の直下にあって使いにくい、カスタマイズした記事下と入れ替えたい」みたいに書きましたが、あっさりできたので共有します。

FOXISM

ブログをすばやく表示

はてなブログで体感的にブログが早く表示されるように見えるかもしれないやり方です。
ブログが表示されるときに一番はじめに読み込まれるhtml要素と次に読み込まれるbody要素の背景色（background-color）をブログのメイン画面（id="container"）の背景色（ブログで一番大きさが広い部分の色）と同じにするだけ。色の変化がないので早く見える！？

(デザイン→カスタマイズ→「デザインCSS」にコードを入力)

CSS
html,
body {
    background-color: #eee;
}

#container {
    background-color: #eee;
}

ただ、このままだとシンプルすぎるので、自分のブログではブログが表示されたあとにJavaScriptでbody要素の背景色を書き換えています。

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

JavaScript
<script>
    document.body.style.backgroundColor = '#000';
</script>

おわりに

「はてなブログ カスタマイズ」で検索してもブログが更新されなかったり新しい記事が少なかったりでさびしい。ひと昔前はカスタマイズに熱心なブログがたくさんあったのに...。