この記事では、ブログにおしゃれで可愛らしい検索ボックスを実装する方法を紹介しています。 たとえば、サイドバーに配置された検索ボックスの場所がなかなか見つからないなど、不便に感じた経験はありませんか？
このデザインを実現するために必要なCSSやJavaScriptコード、さらに外部スタイルシートとJQueryの呼び出し方法も詳しく解説されています。 デザインを崩さずに、読者に使いやすい検索機能を提供する方法について知りたい方にぴったりのガイドです。
詳細な手順やコードのポイントを追いながら、自分のブログに導入することができます。 おしゃれで使いやすい検索ボックスを実現したい方にぴったりの記事です。
Search box
見本
まずはどんなモノなのか、実装例をご覧ください。右上端に、虫メガネがチョコン、とあります笑
別サイトですが今いるこのブログ内を検索しますので、実際に適当なワードを入力して挙動がどうなるか、自由にテストしてみてください。
きっかけ
最近、ブログ（はてな）のテンプレートを1カラムのものに初めて変えてみたのですが、デザインもすごくシンプルで、使いやすく気に入っています。
が、サイドバーに置いていた検索ボックスが、1カラムのテンプレートだと記事の下までスクロールしないとたどり着けません。
Life #OFFICIAL
ニワトリ並みの私の脳は自分で書いた記事内容を忘れてしまい、「あれって、どうやるんだっけ~」とよく自分で自分のブログを検索するのですが、、
こんなとき、以前の2カラムの時のようにすぐ検索が出来ないので、、いつも（ちょっと）イラっとしています笑
忘れっぽさと怒りっぽさは年と共に比例するのでしょうか。。( >_；)/~ ｶﾅｼｲ
それはさておき、せっかく余白が左右に十分あるので、なるべくテーマデザインを崩さず、「オシャレで可愛い検索ボックスを、右端にちょこんと付けたい ！そして動かないでいて！」と思い、検索ボックスをはてなデフォルトでなく任意に設置してみようと思った次第なのです。
コード
CSS
コードとポイント
@charset "utf-8"; body{ background:#f3f3f3; } /*========= 検索窓を開くためのボタン設定 ===========*/ .open-btn1{ position: fixed; /* 絶対配置で固定。スクロールで消したい場合は「absolute」 */ top:10px; right:10px; background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/ background-size: 20px 20px; width:50px; height:50px; cursor: pointer;/*カーソルを指マークに*/ } /*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/ .open-btn1.btnactive{ background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_close.svg") no-repeat 15px center;/*閉じるアイコンを背景に表示*/ background-size: 18px 18px; } /*========= 検索窓の設定 ===============*/ /*==検索窓背景のエリア*/ #search-wrap{ position: fixed; /* 絶対配置で固定。スクロールで消したい場合は「absolute」 */ top:150px; right:20px; z-index: -1;/*最背面に設定*/ opacity: 0;/*透過を0に*/ width:0;/*横幅は0に*/ transition: all 0.4s;/*transitionを使ってスムースに現れる*/ border-radius: 5px; } /*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/ #search-wrap.panelactive{ opacity: 1;/*不透明に変更*/ z-index: 3;/*全面に出現*/ width:280px; padding:20px; top:60px; background:#fff; } /*==検索窓*/ #search-wrap #searchform{ display: none;/*検索窓は、はじめ非表示*/ } /*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後*/ #search-wrap.panelactive #searchform{ display: block;/*検索窓を表示*/ } /*==検索フォームの設定*/ /*==テキスト入力とボタンinput共通設定*/ #search-wrap input{ -webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/ outline: none; cursor: pointer;/*カーソルを指マークに*/ color: #666; } /*テキスト入力input設定*/ #search-wrap input[type="text"] { width: 100%; border: none; border-bottom:2px solid #ccc; transition: all 0.5s; letter-spacing: 0.05em; height:46px; padding: 10px; } /*テキスト入力inputにフォーカスされたら*/ #search-wrap input[type="text"]:focus { background:#eee;/*背景色を付ける*/ } /*ボタンinput設定*/ #search-wrap input[type="submit"] { position: absolute; top:10px; right:30px; background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat right;/*虫眼鏡アイコンを背景に表示*/ background-size: 20px 20px; width:30px; height: 60px; }
. 上のCSSコードを丸々、はてなブログなら「デザインカスタマイズデザインCSS」に貼り付けてください。
上のコードのポイント
/*========= 検索窓を開くためのボタン設定 ===========*/ .open-btn1{ position: fixed; /* 絶対配置で固定。スクロールで消したい場合は「absolute」 */ ＿＿ 中略 ＿＿ }
position: fixed :
検索ボックスの配置を固定しています。下にスクロールしたらそのまま流れて消すようにしたければ、fixedの部分をabsoluteに変えてください。
ここを変えたら下記の部分、テキスト入力フォームの位置も流すか固定かで統一させるために値を揃えましょう。
#search-wrap{ position: fixed; /* 絶対配置で固定。スクロールとシンクロしたい場合は「absolute」 */ ＿＿ 中略 ＿＿ }
HTML
コードとポイント
<!-- 別途必要なスタイルシート呼び出し（ 「動くWebデザインアイディア帳」様共有リンク） --> <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css"> <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/css/7-2-3.css"> <div class="open-btn1"></div> <div id="search-wrap"> <form class="search-form" name="search" role="search" action="「ブログ、サイトのURL」＋ /search" method="get" id="searchform"> <!-- ↑たとえば「https://rubirubi.hateblo.jp」がサイトのURLなら、「action="https://rubirubi.hateblo.jp/search"」と書く↑ --> <input type="text" name="q" id="search-text" class="search-module-input" value="" placeholder="search" required> <input type="submit" value="" /> </form> </div> </div> <!-- JQuery CDN 3.7.1呼び出し --> <script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
. こちらはHTMLコードを記載する場所に貼り付けてください。
上のコードのポイント
<!-- 別途必要なスタイルシート呼び出し（ 「動くWebデザインアイディア帳」様共有リンク） --> <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css"> <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/css/7-2-3.css"> <!-- JQuery CDN 3.7.1呼び出し --> <script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
これらのリンクやスクリプトですが、上の2つはボタンデザインのために必要な補足のCSSコード、3つ目はJQuery CDNのバージョン3.7.1を呼び出すコードです。
※CSSのリンクは「動くWebデザインアイディア帳」様が共有なさっているものですが、JQueryに関しては、すでに「<head>要素にメタデータを追加」などで設置済みの場合は不要です。
JavaScript（JQuery）
コードとポイント
//開閉ボタンを押した時には $(".open-btn1").click(function () { $(this).toggleClass('btnactive');//.open-btnは、クリックごとにbtnactiveクラスを付与＆除去。1回目のクリック時は付与 $("#search-wrap").toggleClass('panelactive');//#search-wrapへpanelactiveクラスを付与 $('#search-text').focus();//テキスト入力のinputにフォーカス });
. こちらはJavaScriptコードです。同様にしかるべき場所に設置しましょう。通常は</body>直前や、フッターなどに置きます。
はてなブログでしたら、「デザインカスタマイズ」から「記事下HTML」や「フッタ」に置けば機能するはずです。とりあえずお試しで通常の記事だけに置いてみるのも良いかと思います♪
※なお記事下やフッタなど、HTMLを書く場所にJavaScriptコードを配置するときは、
<script>
JavaScriptコードの内容
</script>
のように、SCRIPTタグで上下を囲まないと機能しないので、忘れずに~
おわりに
今回のコードは、全面的に「動くWebデザインアイディア帳」様のページを丸々ご参考とさせていただいております(* ᴗ ᴗ)⁾⁾
また、出来るだけ「動くWebデザインアイディア帳」様のおしゃれなサイトイメージを崩すことなきよう( ´•ᴗ•ก )💦、この記事ページの配色などは雰囲気を勝手に似させていただいておりますので、悪しからず。
この他にもたくさん *1 、カッコ良くて可愛いデザインコードが紹介されていますので、ぜひ下のブログカードをクリックして、覗いてみてくださいね。
それでは、最後までお読みいただき、ありがとうございました。
*1:
