kamenokoki.com

【61日目】検索ボックスを作成-3

Posted:  Last Update:

サイトの作成を開始して61日目。一昨日から検索ボックスをサイトに入れ込もうと作業をしています。昨日は検索ボックスをおしゃれにした後、fontawsomeを導入する方法を検討しているうちに時間が来てしまいました。今日はとにかく検索ボックスを完成させることを目標にして、fontawsomeは後日改めて時間をとろうと考えています。

検索ボックスを検索ページにも入れる

昨日は検索ボックスをヘッダー下に入れまして、今現在、検索ページはこのようになっています。

2020.10.30 検索ボックスを検索ページにも入れる-作業前

このページにも検索ボックスを入れてみたいと思います。既に作ってある画面右側の検索ボックスをとりあえずコピペ。そしてスタイルシートを変更しました。ここはこれでいいかな?

2020.10.30 検索ボックスを検索ページにも入れる-作業前

スタイルシートはこんな感じです。

#searchbox img{
width: 1em;
height: auto;
vertical-align: middle;
}

#searchbox2{
margin: 30px auto 30px auto;
border: none;
}
#searchbox2 input[type="q"]{
border: 1px solid silver;
width: 70%;
height: 3.0em;
padding: 0 0 0 1em;
}
#searchbox2 button{
width: 4em;
cursor: pointer;
border: 1px solid #008000;
background-color: #FFFFFF;
color: #008000;
overflow:visible;
height: 3.0em;
border-radius: 20px;
text-align: center;
}
#searchbox2 img{
width: 1em;
height: auto;
vertical-align: middle;
}

ヘッダーデザインを考える

デザインでこれまでも散々足踏みしていますが、今回も足踏みしそうな予感がします…。

とりあえず、厚すぎるヘッダーの緑の帯部分をなくす作業から。と思ったのですが、作業しているうちにもう少し変更したくなりました。結果、こんな感じでモノクロ感を強くしてみることに。

2020.10.30 ヘッダーデザインを考える

検索ボックスは、クリックで表示するように変更しました。クリックすると検索ボックスが表示されます。やりすぎかな?

2020.10.30 ヘッダーデザインを考える-2

さらっと書いてしまいましたが、いろいろいじくりまわすのに1.5時間かかっております…。検索ボックス、今日中に完成するでしょうか?

やはりFontawesomeが必要

さて、ヘッダのリンクを黒くしたので、画像も白黒反転させないといけません。やはり、fontawesomeを導入します!

今日はちゃんと使い方を確認しよう。IcoMoonからダウンロードする際に、いろいろと設定が必要です。

一つ一つ確認しながら進めて行ったら、10分ほどでできてしまいました。昨日は1時間ほどだらだら検索していたのに、いったい何をしていたのか…。早速フォントを入れてみました。ついでに読み込みが遅いtwitterもフォントに変更しておきます。

うわぁ、一気にそれっぽくなった気がします。恐れずに最初から黒を使えばよかった。

2020.10.30 やはりFontqwesomeが必要

ちなみに、少し前はこんな感じだったので、随分な違いです。

2020.10.30 10月22日のサイト画像

完成!

検索ボックスを開いた時の真緑は再考の必要がありそうですが、ひとまず完成ということでいいのではないでしょうか?

本番環境に移植していきましょう。今日はファイルにまたがって編集しているので、いつもの移植より緊張する…。

よし!無事に完了しました。今日はここまでにしたいと思います。明日はロードマップの次にうつります!

おまけのロードマップ

ロードマップで進捗を見ると、こんな感じになっています。

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

亀の子に連絡

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

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告