検索ボックスをサイドバーから削除してページ上に固定してみた。


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:97 | Leave a comment

検索ボックスをサイドバーから削除してページ上に固定してみた。

ページ上に固定で表示させているバーに検索ボックスを追加した。

このバーを実装した当初は、検索バーはサイドバーでいいかなと、なんとなく思ってソーシャルボタンだけ入れてみたんだけど・・・

「検索バーもやっぱりスクロールにひっついてきた方がいいッ!」ってことで、前回と同じサイト様のソースを参考に実装してみました。

なので、検索バーをサイドバー(ウイジェット)からは削除しました。

そうなるといままでシングルページでしか表示させていなかったソーシャルバーを、トップページなどのシングルページ以外でも表示しないとねってことで、そのあたりも変更しています。

トップページなどでは、”ツイッターのフォロー”と”facebookのいいね!”ボタンと検索バーにしました。

このページの目次

HTML

トップページなど用の”ツイッターのフォロー”と”facebookのいいね!”ボタンは、social.php同様、follow.php検索バーは、g-search.phpという別ファイルにして、テンプレートを呼び出すようにします。

シングルページでは、social.phpとg-search.phpを、その他のページではfollow.phpとg-search.phpを呼び込みます。

CSS

前回は無かった「div#header-inner」 が増えてます。

あとは、モバイルで画面が小さくなった時用のCSSをご自身の環境で要調整。

参考サイト

[wordpress][Stinger2]画面最上部に固定されたメニューバーの作り方

後記

実は、social.phpfollow.phpなどを別ファイルにしたのには理由があって、もちろん管理も楽だけど、他でも使い合まわしたいという目論見が。
近々、やってみたいのはサイト内のリンクを表示するときにsocial.phpを入れてみたいなと思ってます。
こんなやつ↓

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:97 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA