ブログの上部に固定メニューバーを設置しました。
CSS と HTMLのカスタマイズ
コピペでいけるかと思いきや、全くそうはならなかった。
以下のサイトをベースにいろいろググりました。
ちょっとしたTips
スクロールしてもついてくるためには、 position: fixed を使います。
position: fixed;
画像を重ねて表示するときは、最上位に表示される画像を指定しないと、期待した画像が見えない。z-indexを使って調整。
z-index: 999;
z-index: 900;
アイコンを表示させる場所は、1000pxに収めたいけれども、固定バーは画面全体に表示したい。
divとidで２段階に表示を分けることで実現。
.stickey_sns {
width: 100%;
}
#stickey_footer {
width: 1000px;
}
Googleカスタム検索の設置
Googleカスタマイズ検索は、デフォルトのままだとカッコ悪いのでCSSでスタイルを変更しました。
<form action="https://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