Pages用の404エラーのページを作成し、Googleのカスタム検索のSearchboxを設置してみた。時代の最後尾を往くWebサイト。Pages用の404エラーのページを作成し、Googleのカスタム検索のSearchboxを設置してみた。try...CSSファイルに設定してみた。隙間を埋めていきます。隙間を埋めつつ、位置を調整します。Pagesで大好評運用中(本Webサイト比)の「panda大学習帳外伝」ですが、それなりにコンテンツも充実してきたので(宣伝)、404エラーのページを作ることにしました。ついでに、ただ404エラーのページを作るだけではなく、Googleのカスタム検索エンジンのSearchboxを設置することにしたのですが、レイアウトが崩れまくりで、いい感じの表示にするのに軽くハマってしまいました。この記事ではいい感じの表示にするための設定の方法について書きます。最初にGoogleのカスタム検索エンジンを作成します。Googleのカスタム検索エンジンを作成する画面には以下の手順でアクセスします。この記事では詳細な作成の手順については触れません。カスタム検索エンジンの作成手順の詳細については参考文献の記事をご覧ください。Googleカスタム検索エンジンのサイトにアクセスし、「カスタム検索にログイン」ボタン(下図の赤矢印)を押します。「検索エンジンの編集」画面に切り替わりますので、「追加」ボタン(下図の赤矢印)をクリックします。カスタム検索エンジンを作成・保存し、設置用のコードを取得します。404エラーページの作成カスタム検索エンジンが作成できて、設置用のコードを取得できたら、HTTPステータスコード404が発生した場合に表示するエラーページ(以下「404エラーページ」と書きます。ここでは、以下のようなmarkdownファイルを作成します(検索エンジンIDと思われる部分については編集しています)。以下のmarkdownファイルはpanda大学習帳外伝に最初に設置された時点のものです。Foundあなたのご指定になったURLは現在使われておりません。恐れ入りますが、URLをもう一度お確かめの上、もう一度アクセスしてみてください。ご利用ありがとうございます。本Webサイト([panda大学習帳外伝](https://sidestory.pandanote.info/))及び[panda大学習帳](https://pandanote.info/)のサイト内を検索することができます。%}上記のmarkdownファイルについて特記すべきと考えられる事項は以下の通りです。Front-matterではlayoutの記述を省略しています。AdSenseの広告を配置していないため、他のページのレイアウトを流用しても(markdownファイルの本文に明示的に広告を配置しない限り)広告は配置されないからです。リンク集では_includesディレクトリの下にあるmarkdownファイル(homelink.md)をそのままインクルードしています。上記のファイルを最初にGitHubにプッシュした時点では、カスタム検索エンジンのタグをmarkdownファイルにそのまま記述しています。try...前節のファイルをそのままGitHubにプッシュして、404エラーページを表示させてみると、Searchboxが表示されはするものの、(a)の部分のような隙間ができたり、(b)の部分のような罫線のようなものが表示されたりと、違和感ありまくりです。́・ω・`)スポンサーリンクこれらを何とかしていきます。CSSファイルに設定してみた。スポンサーリンクそこで、CSSファイルに設定を追加することによって、何とかできないか考えます。assets/css/style.scssに以下の設定を追加してGitHubにプッシュします。gcse-at-sidestoryはカスタム検索タグを囲むdivタグのidとして上記のmarkdownファイル中で指定した文字列を指定しています。1;}GitHubへのプッシュ後に404エラーページを表示させてみると...罫線のようなものは消去できましたが、上図の赤矢印の隙間の部分は残ったままとなりました。隙間を埋めていきます。次に、assets/css/style.scssに以下の設定を追加してGitHubにプッシュします。!important;}スポンサーリンクGitHubへのプッシュ後に404エラーページを表示させてみると...白くなっていた部分のうち、検索語の入力フィールドの右側と上側の部分はなくなりましたが、下側の部分は小さくはなったもののまだ残っています(上図の赤矢印(a))。検索語の入力フィールドとボタン自体が全体的に右側に寄って表示されている感じに見えます(上図の赤矢印(b))。隙間を埋めつつ、位置を調整します。assets/css/style.scssに以下の設定を追加してGitHubにプッシュします。検索語の入力フィールドの縦の長さがちょっと大きいような気もしますので、縦の長さを小さくするように設定してみます。assets/css/style.scssに以下の設定を追加してGitHubにプッシュします。!important;}GitHubへのプッシュ後に404エラーページを表示させてみると...縦の長さがいい感じに設定できました。思いながら試行錯誤しましたが、いい感じの設定にすることができました。上記の設定で様子を見たいと思います。CSSファイルで!importantの設定を使いまくりなところが気になりますが、気にしないことにします。🐼そういえば、本WebサイトにもGoogleのカスタム検索エンジンのSearchboxが設置してありますが、設置の際に上記のような設定はしなかったような気がします。PagesとWordpressの違いってことで深く追求しないことにしておきます。🐼この記事は以上です。Pagesのトップページの記事一覧をMariaDBの力を借りて作成日時と最終更新日時(のようなもの)順に並べてみた。APIを使ってGistにアップロードしたファイルのリストにひと手間かけたものを表示するページを作ったところ、割といいもの(本Webサイト比)ができた件。Pagesで構築したWebサイトのURLをAmazonアソシエイトに追加登録の申請をしたところ、3回目の申請で追加が承認された件。R732/37HKから超短焦点プロジェクターとBluetoothのスピーカーに同時に接続し、桜🌸の動画を投影してみた。ディリクレ積分をフーリエ変換を使って計算しようとしたらいろいろと出てきたので、まとめてメモ。このウィジェットの背景が黒くなってしまうことがある理由についてはこちらをクリック。AviUtlgimp-2.10.sikuliGIMP-2.10を使ってスクリーンショットを取得するためのSikuliXのスクリプト。SikuliX-2.0.1+GIMP-2.10.10の組み合わせでのみ動作確認を行っています。SolrのDataImportHandlerで7-zipで圧縮されたファイルのインポートをサポートするためのJARファイル。struts2ajaxtestStruts2でAjaxを使用するWebアプリケーションのサンプル。LANを発行するためのスクリプトのサンプル(Fedora用)。8用のNEologd入りkuromojiをビルドするためのパッチ。8.1→10にアップグレードしてみたところ、途中で電池が切れて復旧に手間取った件。APIを呼び出し、Bitcoinの価格を取得するPython3のプログラムを書いてみた。httpからhttpsへのリダイレクトを削減するためのnginxの設定。YouTube↓のボタンを押していただくとチャンネルを登録できます。見解等とは一切関係ありません。