【59日目】検索ボックスを作成-1

サイトの作成を開始して59日目になりました。昨日は記事を書くのに手いっぱいでサイトの作成は進められませんでした…。でも、時間をとったおかげで大作です！読んでやってください。「お問い合わせページはGoogleフォームで簡単作成！必要な手順を全て解説！」

ロードマップで進捗確認

ロードマップで進捗を見ると、こんな感じになっています。一昨日は検索ページの作成が一応完了したのですが。今日はサイトマップページに取り掛かるか、もう少し検索ボックスを充実させるか考えています。

• 準備 - サイトの全体像を決める
• 使用するプログラミング言語を決めて環境を整える
• サイトの基本構造を作って公開する
• 収益化に最適なサイトにアップグレードする
• コンテンツを充実させる（他の作業と同時進行）
• サイトを見てもらえるようにサーチエンジンに登録する
• sitemap.xmlとRSSを作成する
• コンテンツに合わせてサイトを修正、スマホにも対応する
• お問い合わせページを作る
• 検索ボックスを作る　←いちおう完成？
• サイトマップページを作る
• 個人情報に関するページを作る
• SEOとセキュリティについて調べ、対応する
• GoogleアドセンスとAmazonアソシエイトの申し込みをする
• ローカルで簡単に入力ができるようにフォームを作る
• フォローアップ - より収益化に向いたサイト構造に変更する

一昨日の日記の横幅がおかしい

今日の作業に入る前に、ひとつ気付いてしまったことが…。どうも一昨日の日記の幅がおかしいんですよね。Google Chromeの「検証」で見ると、横幅が微妙にスマホの画面からはみ出しています。画像で見るとこんな感じです。

画像が原因か？

他の要素は大丈夫なのに、日記の中に含めた画像が大きく表示されていることが分かりました。画像の横幅は「max-width: 100%;」とスタイルシートに設定してあって、画面幅以上にはならないはずなのですが…。

スタイルシートの画像の横幅を「max-width: 95%;」にしても駄目。枠が悪さをしているのではないかと「box-sizing: border-box;」という設定もくわえてしまいましたが、やっぱりだめ。ほかに何をすればいいのか…。

諦めかけたところで、そもそも画像が大きすぎるんじゃないかと思いつきました。でも、画像が重くなり過ぎないように、画像は横幅900pxに変更してるんだよな~。と思ったところで、はっとした。画像の圧縮をするのを忘れてた！画像が重くなり過ぎないように、画像は全て100kb以下になるように圧縮しています。でも、一昨日はこの作業をすっかり忘れていました。もしかして画像サイズのせいで横幅がはみ出してる？

画像を圧縮して、再度読み込み。期待したのに、全然効き目がありません。

URLが悪さをしていた

じっくり内容をもう一度精査して、やっと原因が分かりました。長いURLが悪さをしてた…。横幅いっぱいになってもURLは一語と認識されて、改行されないまま表示されています。このせいで、全体の横幅も広くなっていました。

ああ、どうしよう…。英語を折り返す設定にすると、日本語の表記がおかしくなったような記憶がある。いろいろ考えた結果、URLは全てSpanで囲うことに決めました。スタイルシートは以下のように設定して、本文中は「<span id="url">URL</span>」と書きます。

いちいちURLに対して設定するのがめんどくさいけど、横幅は治りました！

今は手打ちのタグ。ロードマップの先の方で、自動入力してくれるフォームを作る予定です。URLの記述もメモに入れておこう。

検索ボックスを再作成

一昨日検索ページを作成してからいろいろ考えて、やはり検索ボックスを全てのページにつけたいな、と思うようになりました。というわけで、一昨日ページを作ったけれど、修正します！

まずはテスト環境に今のファイルを移植。Google Programable Searchから新しいカスタム検索を作成。今度はデザインを「結果のみ」にしてみました。

次に検索ボックスを作成します。こんな感じ。

表示が大変なことになっているので、スタイルシートを設定。

表示するとこんな感じになります。

今日はここまで

表示の横幅を是正するのにだいぶ時間を使ってしまって、今日は時間ぎれになってしまいました。明日はもう少し検索ボックスを整えていきたいと思います。

記事をシェアする

亀の子に連絡

ランキング参加中！ぽちっとしてね