CSSだけでレスポンシブで画像ナビゲーションをテキストに切り替える
グローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。
そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。
- 投稿日
- 更新日
グローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。
そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。
このブログでjQueryでTwitter APIを使用する方法をいくつか紹介してきましたが、2012年10月現在、今までの方法が使用できなくなりました。
とりあえずの解決策です。
FacebookページのウォールはFeedを出力しています。
これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。
局地的にしか使用できませんが、管理画面などで画像一覧を表示させて選択するとテキストエリアにパスを挿入するプラグインです。
Code Mirrorというテキストエリアを快適にするプラグインに対応しています。
ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。
といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。
以前、PHPでページャーを作成しましたが、それのjQuery版を作成しました。
あまり用途ないかもしれませんが、Ajaxでいろいろしたい場合Javascriptで表示できた方が便利かなとか。
Table(表)に情報量が多い表を入れようとすると改行がたくさん入り、読みにくくなってしまうことがあります。
そこで、普段は最小限の項目を表示してjQueryでマウスオーバーすると詳細な情報が表示されるということをしてみます。