ハイライトって？

はてなブログ内で記事を検索したときに、表示された記事内に含まれている検索ワードに蛍光ペンのようにハイライトで印を付けてくれます。そのハイライトの色などが使用しているテーマによってはダサかったりします。
「ダサいなら自分で変えちゃおう！」ということで今回は検索したときのハイライトの色などをカスタマイズする方法を書いていきます！
※ダサいかどうかは関係なく、自分の好きな色にするためにね。

今のハイライトは好きじゃない！

このブログのテーマカラーは青とか藍色なのですが、初期のハイライトの色はピンク系統でまとまっています。これもこれで目立つから良いのかもしれませんが、個人的にはあまり好きではありません。

カスタマイズ用コード

ではカスタマイズするためのコードを。

.page-archive span.highlight{
    background-color: royalblue;
    color: white;
    border: solid 1px blue;
    border-radius: 5px;
    margin: 0;
    padding: 0;
}

これを「デザイン→カスタマイズ」から一番下の「デザインCSS」というところに張り付けてください。

背景色のカスタマイズ

背景色の指定は先程のコードの2行目、「background-color」で行っています。現在は「royalblue」というカラーで指定されています。
なので「royalblue」の部分に自分が背景色に指定したい色を書き込んでください。

文字色のカスタマイズ

文字色の指定は、3行目の「color」で行われています。現在は「white」になっています。
これも「white」の部分を先程の「色の指定方法」を参考にして背景色の色の指定と同じように行ってください。

枠線のカスタマイズ

枠線は4行目の「border」部分で指定されています。枠線が必要ない場合は「solid 1px blue」を消して、「none」と入力しておいてください。

角丸のカスタマイズ

角の丸は「border-radius」で「5px」に指定されています。丸みが不必要な場合は「5px」を「0」に変えておきましょう。
これも好きなサイズ感になるように数値をイジって

ください。

空白の調整

枠線のサイズをどのくらいにしたか、などによって空白がもっと必要になってくる場合があるかもしれません。その場合はmarginとpaddingで調節してください。