kamenokoki.com

【60日目】検索ボックスを作成-2

Posted:  Last Update:

サイトの作成を開始して60日目です!昨日から検索ボックスをサイトに入れ込もうと作業をしています。

検索ボックスをもう少しおしゃれにする

昨日作った検索ボックスがこのようなものです。

2020.10.28 検索ボックスを再作成

いまいちおしゃれ感がないので、修正します。ボタンも角をとって、並んで見えるようなデザインにしたいな。

スタイルシートを色々と工夫。修正後はそれなりの見栄えになった気がします。

2020.10.29 検索ボックスをもう少しおしゃれにする

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

#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;
}

fontawsomeを導入すべきか

すこし気になっていたのですが、画像のサイズが48pxで大きいんですよね。今は画像を縮小表示させていますが、万が一スタイルシートを読み込めなかった時に画像が巨大になって、デザインが総崩れになってしまいます。

危機回避のために、他のブログでも頻繁に使われているfontawsomeを使ってみようかな?

さて、どうやって使うのか…。検索すると、公式サイトからダウンロードすればいいみたいです。

ダウンロードしたzipを展開して、…文字の設定ファイルが2MBもありました。他の方法はないのでしょうか。調べていたら、IcoMoonというものがありました。必要なフォントだけ設定できるらしいです。その分、ファイルサイズも小さくなるらしい。

今日はここまで

IcoMoonの使い方を調べている間に時間が来てしまいました。今日は途中で遊んじゃったし、最近あんまりサイト制作が進んでいません。明日こそは検索ボックスを完成させたいです。

おまけのロードマップ

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

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

亀の子に連絡

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

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

広告