ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

スマートフォン対応

ページ内遷移するとドロワーメニューが閉じない@jQuery

ハンバーガーメニュー(ドロワーメニュー)でページ内リンクをタップすると、ページ内の位置は変化するのですが、その上に展開しているメニュー(ハンバーガー)が閉じず、コンテンツが見えないという不具合に遭遇。 確認のためのデモページを用意する余裕が…

投稿本文にYoutube動画の共有URLを埋め込むカスタマイズ@WordPress

*写真は本文とは関係ありません(Oisixで購入した「ケール」とチーズのサラダです、美味しかったです) WordPressの投稿本文にYoutube動画の共有URLを記述すると、自動でiframe要素に変換され、フロント側(訪問者が閲覧する)に動画の再生ウィジェットが埋…

スマートフォン対応のカルーセルスライダー「CarouFredSel」@jQueryプラグイン

画像のスライドショーだけでなく、コンテンツスライダーとしても使えるカルーセルスライダーのjQueryプラグイン「CarouFredSel」がとても便利だったので備忘録として残しておきます。(レスポンシブ対応でスマートフォンにも使えます) 高さが異なる要素にも…

レスポンシブ(スマフォ対策)向けのJSの振り分け

ブラウザのウィンドウサイズで判別して読み込むjsファイルをスマートフォン、 PCで振り分ける。 実装例はATOMSさん。 atoms-inc.com ページ読み込み時にふわっと内容を出現させる別のjsが、なぜかスマホサイズだと(折りたたみハンバーガーメニューと干渉し…

img要素のheight:autoの指定(IE8対応)@CSS

レスポンシブWebデザインとか(その他の場合でも)でimg要素の実際のサイズ(width, height)をcssで上書きしてデバイスサイズや親要素の大きさに対応させる場合があります。(別にimg要素のwidth, heightの指定を上書きでない場合でも) 幅を指定して(%に…

スマートフォン向けに表示内容を出し分ける@WordPress

WordPressにはバージョンが3.4から用意されている「wp_is_mobile」っていう関数があって、これを使えば簡単、お手軽にPC向け、スマフォ(スマートデバイス)向けにコンテンツの出し分けが出来ます。 /* スマートフォン向けの内容 */ /* PC向けの内容 */ …