【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

【はてなブログ】検索ボックスのカスタマイズ方法【簡単3ステップ】

どうも、ブログ運営者のポチ(@sunrise_033)です。

うさぎ
はてなブログの検索ボックス(検索窓)を別のデザインにしたいんだけどどうすればよいの?「検索」の文字を取り除いてスッッキリした見た目にしたい。

そんな疑問に答えます。

この記事では、はてなブログの検索ボックス(検索窓)をカスタマイズする方法を見ていきたいと思います。

下記が完成した検索メニューです。

f:id:sanrisesansan:20200820160515j:plain

カスタマイズといっても、通常の検索ボックスの代わりに新しい検索ボックスを作り貼り付けることで対応しています。

その手順を見ていきます。

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。
目次

検索ボックスをカスタマイズしようと思った経緯

はてなブログには、サイドバーに元から検索ボックス(検索窓)がついてますよね。

f:id:sanrisesansan:20200820160831j:plain

こんなやつです。

僕のサイトでは、サイドバーの見出しに色をつけているので、検索ボックスのなんかバランスがイマイチになってしまいました。

ポチ

なんか、枠が大きすぎてイマイチ・・。

そこで、サイドバーのタイトルを空白にすれば良い!と思いつきました。

f:id:sanrisesansan:20200820162210j:plain

が、実は検索ボックスはタイトルを空白にすることができませんでした。

それ以外でも「リンク」、「アーカイブ」、「プロフェール」などはタイトルを空白にできないようになっています。

それならば、

検索ボックスを新しく作成して貼り付けてしまおう!

と考えました。

【3ステップ】検索ボックスをHTMLでサイドバーに貼り付ける

流れを先に書きます。3ステップできます。

・サイドバーの「検索」を削除
・モジュール追加で「HTML」にHTMLコードを貼り付ける
・「CSSデザイン」にCSSコードを貼り付ける

では、見ていきましょう。

初めにサイドバーの検索を削除します。削除してもモジュールの追加で戻すことができるので心配いりません。

つぎに、「管理画面」「カスタマイズ」→「サイドバー」「モジュール追加」「HTML」に下記のコードを貼り付けて適用します。

f:id:sanrisesansan:20200820163031j:plain

貼り付けるコード↓

<!-- タイトル下の検索窓 -->
<div class="top_hatena-module hatena-module-search-box">
<div class="top_hatena-module-title">

</div>
<div class="top_hatena-module-body">
<form class="top_search-form" role="search" action="https://www.sunrise033.com/search" method="get">
<input type="text" name="q" class="top_search-module-input" value="" placeholder="記事を検索" required>
<input type="submit" value="検索" class="top_search-module-button" />
</form>
</div>
</div>

赤文字の部分は自身のサイトURLを入れます。

「placeholder=〇〇」の部分は好きな言葉に変更してください。

さいごに、「カスタマイズ」「CSSデザイン」に下記のコードを貼り付けます。

f:id:sanrisesansan:20200820162938j:plain

貼り付けるコード↓

.top_hatena-module hatena-module-search-box{
width: 100%;
}
.top_hatena-module-body{
text-align: center;
background-color: #fff;
height: 52px;
}
.hatena-module-search-box .top_search-module-input {
padding: 11px;
border: none;
outline: none;
height: 25px;
width: 90%;
background-color: #e6e6e6;
border-radius: 40px;
margin-top: 6px;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
.top_search-module-button {
width: 20px;
height: 20px;
background: transparent url(<a href="https://cdn.blog.st-hatena.com/images/theme/search.png">https://cdn.blog.st-hatena.com/images/theme/search.png</a>) no-repeat right center;
border: none;
outline: none;
text-indent: -9999px;
position: absolute;
opacity: 0.5;
margin-top: 18px;
margin-left: -30px;
}

これで完成です。

あとはサイドバー画面をスワイプさせれば好きな場所に持っていけます。

f:id:sanrisesansan:20200820163116j:plain

このサイトでは2番目の位置に持ってきています!

まとめ

色々とコードをいじるので少し難しく感じますが、少しわかれば簡単に検索ボックス(検索窓)をカスタマイズして取り付けることができます。

(コード初心者のボクができるので。)

是非、興味あったら活用してみてください。

NEXT→記事内の「目次」をカスタマイズする

最後まで読んでいただき、ありがとうございます。

あわせて読みたい
はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

 

ポチ
この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

↓「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

カスタマイズ性の高いテンプレートやSEO対策機能で、プロフェッショナルなブログを作り、ブログの魅力と集客力を高めましょう!

\ サーバーやインストール不要、2年版でお得!

\ はてなPROで出来るカスタマイズまとめ

コメント

コメントする

目次