6/152024-06-15当サイトのコンテンツは広告が含まれる事があります。こまったくん読んだ本をまとめた記事を書いたんだけど、1ページにまとめたので欲しい情報を探すのが大変な気がするんだよね。ブラウザのページ内検索をすればいいんだけど、知らない人もいるかも知れないし、何か良い方法はないかな。レッドページ内検索できるボックスを設置してみたらどうかな?このページで解決すること・出来ることコピペだけでページ内検索できるボックスを独自に設置できるようになる。ブログやメディア運営している方の中にはユーザに「ページ内検索」をして貰いたい、もしくは「ページ内検索」した方がユーザー体験が良くなる為、文章でアナウンスされている方もいらっしゃるのではないでしょうか。アナウンス内容としては、パソコンやスマホのブラウザに搭載されている「ページ内検索」機能の利用を促す形になっていると思います。今から紹介するコードを使って検索ボックスを記事内に設置すれば、あえてアナウンスをしなくても、検索ボックスよりページ内検索出来るようになります。画像をタップ/クリックで拡大ちなみに、このメディアではパソコン分解ナビで、同様の検索ボックスを利用しています。投稿ページに標準で個別のCSS,JSの入力欄があるテーマの場合は、HTML、CSS、JavaScriptのコードをWordPressのそれぞれ指定の場所に入力しましょう。プラグインで同様の機能を追加している場合でも問題ないです。ちなみに個別の入力欄は投稿ページの下部にある場合が多いと思います。HTMLコードを挿入このコードは検索ボックスをページ内に表示する為のHTMLコードです。HTMLは「カスタムHTML」を使って、任意の場所の入力しましょう。基本的にはページの上部に設置で良いかと思います。id="searchbutton">検索</button></div></div>画像をタップ/クリックで拡大CSSコードを挿入このコードはページ内検索ボックスに装飾を加えるCSSコードです。CSSは投稿ページ下部にある「CSS用コード(もしくはそれに準ずる項目)」に入力しましょう。auto;}画像をタップ/クリックで拡大JSコードを挿入このコードはページ内検索ボックスの機能を提供するJavaScriptのコードです。JavaScript(JS)は投稿ページ下部にある「JS用コード(もしくはそれに準ずる項目)」に入力しましょう。空の入力を無視します。「カスタムHTML」でコードをまとめて挿入する個別のCSS/JSの入力欄がない場合は、検索ボックスを設置したい場所に「カスタムHTML」で下記コードを挿入しましょう。空の入力を無視します。#CCCCCC;」を変更しましょう。10px;」を変更しましょう。#ffe46f;"」を変更しましょう。他のCSSやJavaScriptと干渉する場合があります。コード利用に伴い生じたいかなる問題に関しても、当サイトは責任を負いかねますので、ご注意ください。あとがきカスタム投稿を作るまでもないが、1ページをデータベース的に利用している場合などに活用できると思いますので、よければご活用ください。情報戦隊ジョウシスジャーズ様々なプロフェッショナルが集結した情報戦隊ジョウシスジャーズ!ITに不慣れな方から情シス担当の方まで、年齢や立場に関係なく、お困りごとを解決!なるべくシンプルな解決方法をご提案します。