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

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

    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="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