続きはWEBで！的な検索を促す案内を表示するためのスタイルシート

ネットを利用するものとして何かわからないことがあれば検索するのは基本です。

ただ中には、「調べようにも、なんと検索していいかキーワードがわからない」なんて方もおられると思います。

僕の場合、そういった方向けに記事を書くとき、わからない情報を調べてもらうときは『〇〇の□□についての設定方法は、「〇〇 □□ 設定」などで検索してください。』なんて書いていたのですが、もっと見た目上分かりやすくする方法はないかと、CSSを書いてみました。

例えば、「サーバーごとのFTPの設定方法」は、以下のように検索してください。

みたいに書けるようにしました。

以下では、そのWordpressでの設定方法について書きたいと思います。

うまくスタイルが表示されない場合は、ブラウザのリロードボタンを押してください。

検索を促すスタイルシートの設定方法

今回の表示スタイルをWordpress等で利用するには、以下の手順が必要です。

Font Awesomeを読み込む
style.cssにスタイルを貼り付け
本文などにHTMLタグを書く

Font Awesomeを読み込む

今回の表示スタイルには、Font Awesomeのアイコンフォントを使用しています。

ですので、Font AwesomeのCSSファイルを読み込んでない場合は、ヘッダー部分（一般的にはheader.phpとか）の<head></head>内に以下のように貼り付けてください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

既に、Font Awesomeが利用されているWordpressテーマでは、この作業は不要です。

昨今の、Wordpressテーマでは、大抵のものはFont Awesomeが使われている可能性が高いかと思います。

style.cssにスタイルを貼り付け

次に、テーマ（子テーマ）style.cssに以下のコードをコピペします。

/*******************************
* 続きはWEBで的な検索ボックス
********************************/
.search-form{
  margin: 3em 0;
  font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height: 170%;
}
 
.search-form div{
  border: 1px solid #555;
  border-radius: 2px;
  padding: 5px;
  margin-left: 10px;
  display: inline-block;
}
 
.search-form div.sform{
  min-width: 280px;
  background-color: #fff;
}
 
.search-form div.sbtn{
  background-color: #1155EE;
  color: #fff;
  padding-left: 20px;
  padding-right: 30px;
  position: absolute;
}
 
.search-form div.sbtn:after{
  content: "\f25a";
  font-family: FontAwesome;
  color: #000;
  position: absolute;
  bottom: -28px;
  font-size: 25px;
}
 
@media screen and (max-width:450px){
  .search-form div{
    padding: 3px 5px;
    font-size: 75%;
  }
 
  .search-form div.sform{
    min-width: 180px;
  }
 
  .search-form div.sbtn{
    padding-left: 5px;
    padding-right: 10px;
  }
 
  .search-form div.sbtn:after{
    font-size: 20px;
    margin-left: -10px;
  }
}

一応、狭いモバイル端末でもある程度綺麗に表示されるように、メディアクエリも書いてあります。

本文などにHTMLタグを書く

あとは、本文などを書くとき以下のようにキーワードを含めてタグを書くだけです。

<div class="search-form">
  <div class="sform">キーワード</div>
  <div class="sbtn"><span class="fa fa-search fa-fw" aria-hidden="true"></span> 検索</div>
</div>

毎回毎回、タグを書くのは面倒くさいと思うので、以下のようなツールを使うと手軽にタグを挿入できると思います。

AddQuicktagでの利用

例えば、AddQuicktagから以下のように設定してしまうとか。

開始タグ：

<div class="search-form">
  <div class="sform">

終了タグ：

</div>
  <div class="sbtn"><span class="fa fa-search fa-fw" aria-hidden="true"></span> 検索</div>
</div>

AddQuicktagの設定は、Wordpress管理画面の「設定→AddQuicktag」から行えます。

ブラウザ拡張からの利用

ブラウザから、クリック一発で作成するなら、ブラウザ拡張を使うというのも一つの手です。

Chromeなら、Create Link。Firefoxなら、Make Linkを用いて以下のように設定します。

<div class="search-form">
  <div class="sform">%text%</div>
  <div class="sbtn"><span class="fa fa-search fa-fw" aria-hidden="true"></span> 検索</div>
</div>

あとはブラウザ上で、キーワードを選択してタグを一発で作成することができます。

Windows Live Writerでの設定

Windows Live Writerでは、Dynamic Templateというプラグインを利用して、手軽にタグを挿入することもできます。

<div class="search-form">
  <div class="sform"><%= keyword %></div>
  <div class="sbtn"><span class="fa fa-search fa-fw" aria-hidden="true"></span> 検索</div>
</div>

Dynamic Templateプラグインの詳しい使い方は以下。