https://simadzu.hatenablog.com/entry/petit-customize

はてなロゴ

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

検索ボックスを見やすく

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

検索ボックスのテキストを消す

検索ボックスに文字を入力するときにすでに表示されている検索ボックスのテキスト（input要素のplaceholder属性で設定したテキスト「記事を検索」など）を消します。
文字を入力するタイミングで検索ボックスのテキストの文字色を透明（または検索ボックスの背景色と同じ）にします。

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

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

input:focus::placeholder {
    color: rgb(255 255 255 / 0);
}

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

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

[初心者向け][CSS]safariで透過が黒くなる！解決法

CSSで透過グラデーションを作った時、Chromeでは問題がないのにsafariで確認するとなんだか黒くなっている…という事がありました。一度知ってしまえば注意する事が出来ますが、初めて遭遇した時は何が原因なのか辿り着くまで少し悩みました。

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

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

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

CSS
.search-form:focus-within,
.search-result-form:focus-within {
    border: 1px solid #000; /* 検索ボックスに黒い枠線 */ 
    outline: 1px solid #000; /* 検索ボックスの外側に黒い枠線 */
}

:focus-within疑似クラス

:focus-within は、ある要素内の子要素がフォーカスを持っている場合に、その親要素にスタイルを適用する擬似クラスです。通常、フォームの入力欄やボタンなどがフォーカスされた際に、そのフォーカスされた要素を囲む親要素に視覚的な変化を加え…

関連記事を見やすく

はてなブログで記事ページの下に表示できる「関連記事」（デザイン→カスタマイズ→記事→「関連記事を記事下に表示する」）をちょっとだけ見やすくします。

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

はてなブログに “あわせて読みたい” という機能（リンク）を追加する方法はいろいろあるとは思いますが、はてなブログの “関連記事” というタイトルを “あわせて読みたい” に変更するのが一番簡単ではないかと。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>

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

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

サムネイル画像のタイトルを非表示

“関連記事” のサムネイル画像にカーソルを重ねると表示されるタイトル（title要素）を表示させないようにします。これもCSSとJavaScript（jQuery）どちらかお好きなほうで。

CSSでは、サムネイル画像のクリックは「pointer-events: none」で無効に、テキストのクリックは有効のまま、「display:block」と「height」でリンク領域をサムネイル画像まで広げています。

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

CSS
.related-entries-image {
    pointer-events: none;
}

.related-entries-title {
    display: block;
    height: 100px;
}

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

JavaScript
<script type="module">
    $('.related-entries-image').removeAttr('title');
</script>

クリック・タッチを無効化するCSS「pointer-events: none;」…

皆様はpointer-eventsというCSSプロパティーやその使い道をご存じでしょうか。マイナーな部類だとは思うのですが私はこのCSSプロパティーが好きなので、今回はこのpointer-eventsの概要について少し説明した後に、実例をいくつか載せていきます

まとめ

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