My,WebNote - 備忘録 -

「楽して稼ぐ」才能が皆無。貧乏暇なしを身を持って実践し、趣味のために働くキモオタ・ワーカーホリック。 絶賛「艦これブログ」となりつつある今日この頃・・・・。

WordPress ブログ・パーツ ブログ

【2018年版】サイト内検索用『カスタム検索(Google)』WordPress設置方法・枠線の消し方

投稿日:

wordpress_custom_main

 

どうも、白夜霧(@KiRi_Byakuya)です。

今回はブログのサイト内検索用として有名なGoogleの「カスタム検索」の設置方法についての自分用の覚書。

WordPress標準のウィジェットでもいいんですが、googleの方が使い勝手いいかな?という単純な理由で設置してみました。

スポンサーリンク

Ad_336x280

設置手順 / サイト・カスタム検索

  1. Googleアカウントを準備
  2. カスタム検索で検索スクリプトを作成。
  3. 自分のブログに設置して完了。

設置するメリット・デメリット

メリット

検索窓から検索すると検索画面に広告が表示されて収益アップ。

 

デメリット

スクリプトを読み込んでから表示されるため、WordPressの標準のウィジェットよりも表示が遅い。

 

KiRi

そもそもサイト内検索を一番使ってるのって、管理人の自分の気がする(´・ω・`)

 

 

検索スクリプトを作成する / サイト・カスタム検索

Step1:カスタム検索にアクセス

カスタム検索を開き、「Add」ボタンを押す。

カスタム検索_google_サイト内検索_ブログ_006

 

Step2:検索サイトを設定する

「検索するサイト」「言語」「検索エンジンの名前」を入力して「作成」を押す。

「検索するサイト」は自分のサイト・ブログ用の検索窓なら自分のブログのURL。※複数設定可能。「言語」は日本語の記事しか無いなら日本語。「検索エンジンの名前」はスクリプトにつける判別用の名前なので、貼り付けた先にでは表示されません。取り敢えずサイトの名前問題なし。

カスタム検索_google_サイト内検索_ブログ_007

 

Step4:コードを取得

「作成」を押す、しばらくすると画面が切り替わりスクリプトの作成が完了。「コードを取得」を押す。

カスタム検索_google_サイト内検索_ブログ_008

 

 

Step5:コードをコピー

灰色の部分のコードを全てコピー。

カスタム検索_google_サイト内検索_ブログ_011

 

Step6:ウィジェットに取得したコードを貼り付ける。

WordPressの「外観」→「ウィジェット」→「カスタムHTML」を自分の設置したい部分に追加して、取得したコードを貼り付ける。

カスタム検索_google_サイト内検索_ブログ_010

カスタム検索_google_サイト内検索_ブログ_012

 

Step7:完了

ウィジェットを保存して検索窓が表示されている事を確認して完了。

カスタム検索_google_サイト内検索_ブログ_001

 

デザインは「検索エンジンの編集」の「デザイン」で変更可能です。※変更した場合は、コード張り替え必須です。

カスタム検索_google_サイト内検索_ブログ_005

 

 

おまけ 検索窓の枠線を消す / サイト・カスタム検索

カスタム検索_google_サイト内検索_ブログ_002

 

検索窓を囲む枠線が邪魔、というか気に入らないのでCSSを追加して消してみました。

「外観」→「カスタマイズ」→「追加CSS」を開いて下記コードを全部コピペして下さい。多分消えます。

 

CSS追加前 ※枠線あり

カスタム検索_google_サイト内検索_ブログ_001

 

CSS追加後 ※枠線なし

カスタム検索_google_サイト内検索_ブログ_003

 

追加してもうまく行かねぇぞ!どうすんだ!」という人は自分で頑張って下さい(´・ω・`)

 

Ad_336x280

Ad_336x280

  • この記事を書いた人

白夜霧

現役のIT土方・社畜・カフェイン中毒者。趣味のために生き、趣味のために金を稼ぐ。趣味はアニメ、マンガ、ゲーム、車、料理、etc・・・。何となく「艦これ」を始めたら、どっぷりハマってしまい、攻略記事なんかを偉そうに投稿しているおっさんです。最近新しいブログを立ち上げ、こき使われています『吾輩は群馬である。』。こちらも宜しくお願いします m(_ _)m

オススメ記事

面白いオススメアニメランキング 1

アニメヲタク歴約10年以上、白夜霧(@KiRi_Byakuya)です。   みなさん、メリークリスマス。 如何 ...

Fire_TV_Stick_新型_レビュー_31 2

  どうも白夜霧です。 以前記事を上げた新型「Amazon Fire TV」と「Fire TV Stick」の比較記事を ...

3

Amazon「Fire HD 8」 タブレット 2017年 Newモデルを買ってみた。艦これもサクサク動くねぇ~。

-WordPress, ブログ・パーツ, ブログ
-, ,

Copyright© My,WebNote - 備忘録 - , 2018 All Rights Reserved.