• このエントリーをはてなブックマークに追加

ブログの上部に固定メニューバーを設置しました。

CSS と HTMLのカスタマイズ

コピペでいけるかと思いきや、全くそうはならなかった。

以下のサイトをベースにいろいろググりました。

ちょっとしたTips

スクロールしてもついてくるためには、 position: fixed を使います。

     position: fixed;

画像を重ねて表示するときは、最上位に表示される画像を指定しないと、期待した画像が見えない。z-indexを使って調整。

z-index: 999;
z-index: 900;

アイコンを表示させる場所は、1000pxに収めたいけれども、固定バーは画面全体に表示したい。

divとidで2段階に表示を分けることで実現。

.stickey_sns {
     width: 100%;
}

#stickey_footer {
     width: 1000px;
}

Googleカスタム検索の設置

Googleカスタマイズ検索は、デフォルトのままだとカッコ悪いのでCSSでスタイルを変更しました。

<form action="http://www.google.co.jp/cse" id="cse-search-box">
   <div>
      <input type="hidden" name="cx" value="******" />
      <input type="hidden" name="ie" value="UTF-8" />
      <input type="text" name="q" size="40"/>
      <input type="submit" name="sa" value="検索" />
   </div>
</form>
  • id: cse-serch-box 検索全体をカスタマイズするID
  • type: text 検索ポックス
  • type: submit 検索用アイコン

と要素が定義されているので、この値をいじるようにCSSを記述すればよいですね。

以下のサイトを参考に、自分でもいじってみました。

ソーシャルアイコンの設置 IcoMoon

ソーシャルアイコンは、無料で使えるものがたくさん配布されています。

今は、画像アイコンよりも、Webアイコンフォントが流行りらしいですね。

レスポンシブやらアイコンフォントやらフラットやら!2013年の気になる技術やデザインを試してみたリニューアル手順! | バンクーバーのうぇぶ屋

というわけで、IcoMoonというサイトを使ってアイコンフォントに挑戦!・・・とおもったけど、設置方法わかんなかったから、結局画像アイコンで妥協した。。。そのうち再挑戦します。

このサイトにアクセスして、ほしいアイコンをクリックして、ダウンロードするだけ。とってもカンタン。


Result

Links