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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

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

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

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

サーバー名 FTP 設定方法
検索

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

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

うまくスタイルが表示されない場合は、ブラウザのリロードボタンを押してください。
スポンサーリンク
レクタングル(大)広告

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

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

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

Font Awesomeを読み込む

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

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

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

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

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

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

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

本部などにHTMLタグを書く

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

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

AddQuicktagでの利用

2016-07-04_11h50_41

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

AddQuicktagの設定例

開始タグ:

終了タグ:

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

ブラウザ拡張からの利用

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

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

Make Link設定例

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

Windows Live Writerでの設定

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

Dynamic Templateでの検索スタイル入力例

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

最近まで知らなくて損した気分、Windows Live Writerプラグイン「Dynamic Template」活用法
最近、「Dynamic Template」というWindows Live Writerのプラグインを使い始めました。 これが、ブログの...

動作確認

あとはブラウザなどで表示を確認します。

通常、パソコンでの表示は以下のようになります。

キーワード
検索

幅の狭いモバイル端末では以下のように表示されます。

幅の狭いモバイル端末で検索ボックススタイルを表示

※横幅が320px以下のスタイルは設定していません。

こんな感じで表示されるかと思います。

ただ、難点といえば、初めてこのスタイルを見た人は、「検索」ボタンがクリックできるものと勘違いして、「誤っ通してしまうけど全く動作しない」なんてことが起こるかもしれません。

ここらへんは、見た目に改良の余地がありそうです。

まとめ

今回、ちょっと個人的に「検索案内用のスタイル」を利用したかったので、スタイルを作成してみました。

アフィリエイトなどでは、個別ページに誘導したければ、「商品リンク」などの個別ページ用のリンクを作成して紹介したりします。

ただ、アフィリエイト広告の中には、「トップページへの広告用リンク」しか用意されておらず、「個別ページ用のリンク」を作成できないものもたまにあります。

例えば、A8.netのパソコン工房とかはそうです。

そんな時は、「僕の購入した機種はパソコン工房 から以下のように検索してね。」

Stl-17FG088-i5-VES
検索

みたいに書けるかなと。

というか、こういったスタイルを使うより、キャプチャを撮った方が手っ取り早いかもしれませんけど。

何はともあれ、使い方次第でいろいろな用途には使えるかもしれません。