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

はてなロゴ

いつも何かないかと、はてなブログのカスタマイズについてネットでいろいろ調べていますが、何もないので目立たない地味な部分までちまちまとカスタマイズしてしまいました...。

検索ボタン

検索ボタンをマウスオーバーしたときにボタンの色と背景色を反転するようにしました。

ボタンの背景色を白に、ボタンをホバー（hover）したときに「filter:invert(100%)」を設定して（「mix-blend-mode:difference」でもOK）、ボタンを白黒反転します。

ただ、検索ボックスの角を丸くしているのでホバー時にボタンの背景色がはみ出してしまいます。検索ボックスに「overflow:hidden」を設定することで、はみ出た部分を表示させないようにしました。

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

CSS
.hatena-module-search-box .search-form {
    overflow: hidden;
    position: relative;
}

.hatena-module-search-box .search-module-button {
    background: #fff url(https://blog.hatena.ne.jp/images/theme/search.png) no-repeat center;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
    right: 0;
}

.hatena-module-search-box .search-module-button:hover {
    filter: invert(100%);
}

CSSのborder-radiusで子要素がはみ出す

親要素にborder-radiusが指定されているものの、子要素のimgがはみ出してしまい、結果として左側だけ角張ってしまっています。

プログレスバー

ヘッダの下にページの読み込みと連動しないなんちゃってプログレスバーを設置しました。

ブログの幅に合わせてバーの長さを「#container」の疑似要素「before」に設定します。
（バーを画面いっぱいに表示したいときは「#container」を「body」に変更します）

バーの表示スピードは「animation」のアニメ時間と「@keyframes 」の0%「width」で調整します。また、アニメが滑らかになるようにアニメ速度を「linear」にしています。

※ プログレスバーが一瞬で消えるのはブログの設定ではなく通信環境が速いということ！

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

CSS
#container {
    position: relative;
}

#container:before {
    content: "";
    position: absolute;
    top: 0;
    background: #f00; /* プログレスバーの色 */
    height: 3px; /* プログレスバーの高さ */
    animation: bar 0.3s linear;
}

@keyframes bar {
    0% {
        width: 30%;
    }
    100% {
        width: 100%;
        opacity: 0; /* プログレスバーを消す */
    }
}

ページローディングのプログレスバーをCSSアニメーションで…

ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。

概要のクリック

カテゴリー（アーカイブ）の記事一覧で記事の概要をクリックできるようにしました。
（リンク範囲をサムネイル画像から記事の概要まで広げました）

サムネイル画像のリンク「entry-thumb-link」の疑似要素「before」にリンクの大きさを設定します。サムネイル画像の位置や幅に合わせて「position」の「top」や「bottom 」で調整します。

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

CSS
.archive-entry {
    position: relative;
}

.entry-thumb-link:before {
    content: "";
    position: absolute;
    top: 110px;
    bottom: 20px;
    left: 0;
    right: 0;
}

aタグの範囲を広げる方法「3つ」あればなんとかなる

テキストリンクや画像にリンクをするだけでなく、ひと固まりになった要素全体にリンクの枠を広げることも多くなりました。枠組みの中の写真やテキストがひと固まりになった要素のどこを触ってもマウスオーバーさせてリンクする、というのがその…

まとめ

はてなブログをカスタマイズし続けてきましたが、細かいことを気にしてたらキリがない。あとできることはダークモードの切り替えと自分でデザインテーマを作成することくらい？