どうも、たつとら(@tatsutora6) です。
記事数が多いブログの場合、探している記事を見つける際にカテゴリーやアーカイブ、新着順から記事を探すのが面倒な時が多々ありますよね。
探したあげくに見つからなかった時のストレスは半端ではありません。
そういう時に必要となってくるのがキーワードを検索する「検索窓」
「はてなブログ」ではなくともブログには普通設置してありますが、PCの場合は大体サイドバーに設置してあります。
▼こういうやつ▼
しかしながら、スマホの場合は記事の下（いわゆるフッター部分）にあるので読者の方は気づかずに見過ごす可能性があります。
という事でお気づきの方もいると思いますが、ボクのブログではスマホ表示の際に検索窓をタイトル下に設置することにしたので、今回はその設置方法について書いてみます。
検索窓をタイトル下に設置する方法
はてなブログの検索窓のコード
まず、はてなブログの検索窓のコードですが下記のようになります。
<div class="hatena-module hatena-module-search-box">
<div class="hatena-module-title">
</div>
<div class="hatena-module-body">
<form class="search-form" role="search" action="自分のサイトのURL/search" method="get">
<input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required>
<input type="submit" value="検索" class="search-module-button" />
</form>
</div>
</div>”自分のサイトのURL”の部分は人それぞれで、ここには自分のサイトのURLが書かれています。
とりあえず、このコードをタイトル下に持っていきたいのでコピーします。
ただ、サイドにある検索窓は残し設置する検索窓のデザインも変えたいので、先ほどのコードのクラス名を変更します。（そのままコピーするとデザインCSSを変更する場合、サイドのデザインも変わってしまいます）
<div class=”クラス名”>
今回はクラス名の頭に”top_“を付け、下記のコードに変更しました。
<!-- タイトル下の検索窓 -->
<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="自分のサイトのURL/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>これをタイトル下に表示させたいので、このコードを【デザイン】＞【カスタマイズ（スパナのアイコン）】＞【ヘッダ】＞【タイトル下】の中に貼り付けます。
スマホのみに表示させる
また、スマホのみに表示させたいので下記のコードを【デザイン】＞【カスタマイズ（スパナのアイコン）】＞【デザインCSS】の中に貼り付けます。
/*タイトル下の検索窓*/
.top_hatena-module-body
{
display:none
}
@media only screen and (max-width: 767px){
.top_hatena-module-body
{
display:block
}
}このコードの
display:none
は検索窓を隠しますという表示で、その下の
@media only screen and (max-width: 767px)
の部分は、横幅767px以下の画面の場合は以下のコードの内容を実行しますという事です。
つまり、タブレットが767px以上なので、それ以下の画面（スマホ）の場合は以下になりますという事ですね。
display:block
このコードは検索窓を表示させるという事なので、スマホ表示の場合は検索窓が現れるという事になります。
スポンサーリンク
デザイン用のCSSコード
ただ、このままでは見た目（デザイン）も変なので、下記のコードを再び
【デザイン】＞【カスタマイズ（スパナのアイコン）】＞【デザインCSS】
の中に貼り付けます。
.top_hatena-module hatena-module-search-box{
width: 100%;
}
.top_hatena-module-body{
text-align: center;
background-color: #2c2c2c;
height: 52px;
}
.hatena-module-search-box .top_search-module-input {
padding: 11px;
border: none;
outline: none;
height: 40px;
width: 90%;
background-color: rgb(195, 195, 195);
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(https://cdn.blog.st-hatena.com/images/theme/search.png) no-repeat right center;
border: none;
outline: none;
text-indent: -9999px;
position: absolute;
opacity: 0.5;
margin-top: 18px;
margin-left: -30px;
}
そうすると、現在スマホで表示されているような検索窓が表示されました。
もちろん、PCの場合は隠れています。
検索窓を設置する際、このコードの中にある
background-color: #2c2c2c;
などは
: #2c2c2c;
以下の数値を変えることで色を変更できるので自分のブログにあう色に変更しましょう。
最後に
現在は、ホームページやブログはPCよりもスマホからの閲覧が主流なのでスマホでの使い勝手を良くするに越した事はありません。
今後もいろいろ試しながらスマホページのデザインも考えていこうと思います。
では、また。
▼アフィリエイトを始めるならオススメはこちら
