はてなブログの検索ボックスをちょっとだけカスタマイズ

hatenaロゴ

はてなブログをかなり久しぶりにほんのちょっとだけカスタマイズしてみました。
このブログの検索ボックス(検索窓)の角を少し丸くしただけですが。

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

CSS
/* サイドバーの検索ボックスの角を丸く */
.hatena-module-search-box .search-form {
    border-radius: 6px;
}

/* 検索結果の検索ボックスの角を丸く */
.search-result-form {
    border-radius: 6px;
}

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

検索ボックスのカスタマイズ方法【簡単3ステップ】
はてなブログの検索ボックス(検索窓)を別のデザインにしたいんだけどどうすればよいの?「検索」の文字を取り除いてスッッキリした見た目にしたい。そんな疑問にお答えします。この記事では、はてなブログの検索ボックス(検索窓)をカスタマイズする方法を詳しく解説し…

また、検索結果のハイライトの色を白黒反転にしてみました。

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

CSS
/* 検索結果のハイライトの色を変更 */
.page-archive span.highlight {
    color: #fff;
    background: #000;
    border-color: #000;
}

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

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

ついでに、タグ風のボタンで表示したサイドバーのカテゴリーの角も調整しました。
simadzu’blog - はてなブログのサイドバーのカテゴリーをボタン風に表示