たつブロ

福岡在住のWebデザイナーが福岡の食べ歩きのグルメを主にブログ関係や仕事について、更には気になった事などを雑多に綴るブログです。

【はてなブログの検索窓】をスマホ表示の際にサイドバー以外にも表示させてみよう

【はてなブログの検索窓】をスマホ表示の際にサイドバー以外にも表示

どうも、たつとら(@tatsutora6) です。

 

記事数が多いブログの場合、探している記事を見つける際にカテゴリーやアーカイブ、新着順から記事を探すのが面倒な時が多々ありますよね。


探したあげくに見つからなかった時のストレスは半端ではありません。


そういう時に必要となってくるのがキーワードを検索する「検索窓」


「はてなブログ」ではなくともブログには普通設置してありますが、PCの場合は大体サイドバーに設置してあります。

 

▼こういうやつ▼

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の場合は隠れています。

PC表示

 

検索窓を設置する際、このコードの中にある

 

background-color: #2c2c2c;

 

などは

: #2c2c2c; 

 

以下の数値を変えることで色を変更できるので自分のブログにあう色に変更しましょう。

www.colordic.org

最後に

現在は、ホームページやブログはPCよりもスマホからの閲覧が主流なのでスマホでの使い勝手を良くするに越した事はありません。


今後もいろいろ試しながらスマホページのデザインも考えていこうと思います。

 

では、また。 

  

 

スポンサーリンク

 

アフィリエイト始めるなら

初心者でも安心のサポート!アフィリエイトを始めるならA8.net

 

もしもアフィリエイト

 

こちらも合わせてお読みください

www.tatsublo.net

 

www.tatsublo.net

 

www.tatsublo.net