サイト内検索（Googleカスタマイズ検索）

参照：https://cse.google.com/cse/all
参考：https://www.bricoleur.co.jp/blog/archives/5167
参考：https://www.webdesignleaves.com/pr/plugins/googleCustomSearch_01.html
参照：http://www.hyuki.com/netserv/google.html
参照：http://dot-town-lab.com/laboratory/item/67
参照（アイコン）：http://techmemo.biz/css/css-icon/
実験対象バージョン：Bootstrap4、HTML5、CSS3
  1. サンプル
  2. 使用方法
  3. サンプル２
  4. 使用方法２
  5. 表示サンプル

サンプル

Googleカスタマイズ検索を登録して、デザインを変更は出来たり出来るんですが、検索枠だけ自分の自由に変更できるといいなってことで好きな形式に出来る方法を記載しました。

使用方法

Googleカスタマイズ検索から登録

https://cse.google.com/cse/allから登録します。
  1. 検索させたいURLを指定します。
  2. 「日本語」にするのが無難でしょう。
  3. 自分で分かる名前を指定します。
新しい検索エンジン
検索エンジンの編集
このままデフォルトで、「コードの取得」をして設定を取得します。
https://www.webdesignleaves.com/pr/plugins/googleCustomSearch_01.htmlに検索の設定から色々設定は可能です。
今回は、検索の部分は自分でカスタマイズしたいため設定は飛ばします。

検索部分の設定
3行目のvalue="××"の場所に今回作成した「検索エンジンID」を入れると設定できます。
検索エンジンID

サンプル２

Googleカスタマイズ検索と大して見た目は変わりませんが、検索ボタンを押した後の表記がまるで違います。

使用方法２

検索部分の設定
3行目の部分がサンプル１とは違います。
自分のサイトを追加するだけです。
GoogleのIDを取りたくない方は重宝すると思います。

表示サンプル

サンプル

デザインがいまいちと思った方用に・・・。
サンプル２のバージョンです。

HTML

                        <head>
                            
                        </head>
                        <body>
    
                        

                            
                            
                            
                            
                            
                            

                                

                                

                            

                        

                        </body>
ボタンが必要な方は、14行目のコメントアウトにしている部分に追加して下さい。

settei.css

                        /********************************************************** 
                            検索眼鏡
                        *********************************************************/
                        .search.icon {
                            color: #000;
                            position: absolute;
                            margin-top: 2px;
                            margin-left: 3px;
                            width: 20px;
                            height: 20px;
                            border: solid 1px currentColor;
                            border-radius: 100%;
                            -webkit-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                          }
                            
                        .search.icon:before {
                            content: '';
                            position: absolute;
                            top: 20px;
                            left: 10px;
                            height: 13px;
                            width: 3px;
                            background-color: currentColor;
                        }
                        /**********************************************************
                            検索
                        *********************************************************/
                        dl.search{
                            position:relative;
                            background-color:#fff;
                            border:1px solid #aaa;
                            -webkit-border-radius:6px;
                            -moz-border-radius:6px;
                            -o-border-radius:6px;
                            -ms-border-radius:6px;
                            border-radius:6px;
                        }
                        dl.search dt{
                            margin-right:40px;
                            padding:8px 0 8px 8px;
                        }
                        dl.search dt input{
                            width:100%;
                            height:24px;
                            line-height:24px;
                            background:none;
                            border:none;
                        }
                        dl.search dd{
                            position:absolute;
                            top: 1px;
                            right: 10px;
                        }
                        dl.search dd button{
                            display:block;
                            padding:10px;
                            background:none;
                            border:none;
                        }
                        dl.search dd button span{
                            display:block;
                            width:20px;
                            height:20px;
                        }