【60日目】検索ボックスを作成-2
Posted: Last Update:
サイトの作成を開始して60日目です!昨日から検索ボックスをサイトに入れ込もうと作業をしています。
検索ボックスをもう少しおしゃれにする
昨日作った検索ボックスがこのようなものです。
いまいちおしゃれ感がないので、修正します。ボタンも角をとって、並んで見えるようなデザインにしたいな。
スタイルシートを色々と工夫。修正後はそれなりの見栄えになった気がします。
ちなみに、スタイルシートはこんな感じです。
#searchbar{
text-align: right;
background-color: #008000;
padding: 10px 0;
}
#searchbox{
max-width:1300px;
margin: 0 auto 0 auto;
border: none;
}
#searchbox input[type="q"]{
outline: 0;
border: none;
background-color: #FFFFFF;
height: 2.0em;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
padding: 0 0 0 1em;
}
#searchbox button{
width: 3.5em;
cursor: pointer;
border: none;
color: #008000;
outline : none;
overflow:visible;
height: 2.0em;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
text-align: center;
}
#searchbox img{
width: 1em;
height: auto;
vertical-align: middle;
}
text-align: right;
background-color: #008000;
padding: 10px 0;
}
#searchbox{
max-width:1300px;
margin: 0 auto 0 auto;
border: none;
}
#searchbox input[type="q"]{
outline: 0;
border: none;
background-color: #FFFFFF;
height: 2.0em;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
padding: 0 0 0 1em;
}
#searchbox button{
width: 3.5em;
cursor: pointer;
border: none;
color: #008000;
outline : none;
overflow:visible;
height: 2.0em;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
text-align: center;
}
#searchbox img{
width: 1em;
height: auto;
vertical-align: middle;
}
fontawsomeを導入すべきか
すこし気になっていたのですが、画像のサイズが48pxで大きいんですよね。今は画像を縮小表示させていますが、万が一スタイルシートを読み込めなかった時に画像が巨大になって、デザインが総崩れになってしまいます。
危機回避のために、他のブログでも頻繁に使われているfontawsomeを使ってみようかな?
さて、どうやって使うのか…。検索すると、公式サイトからダウンロードすればいいみたいです。
ダウンロードしたzipを展開して、…文字の設定ファイルが2MBもありました。他の方法はないのでしょうか。調べていたら、IcoMoonというものがありました。必要なフォントだけ設定できるらしいです。その分、ファイルサイズも小さくなるらしい。
今日はここまで
IcoMoonの使い方を調べている間に時間が来てしまいました。今日は途中で遊んじゃったし、最近あんまりサイト制作が進んでいません。明日こそは検索ボックスを完成させたいです。
おまけのロードマップ
ロードマップで進捗を見ると、こんな感じになっています。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 収益化に最適なサイトにアップグレードする
- コンテンツを充実させる(他の作業と同時進行)
- サイトを見てもらえるようにサーチエンジンに登録する
- sitemap.xmlとRSSを作成する
- コンテンツに合わせてサイトを修正、スマホにも対応する
- お問い合わせページを作る
- 検索ボックスを作る ←ここで足踏み
- サイトマップページを作る
- 個人情報に関するページを作る
- SEOとセキュリティについて調べ、対応する
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する