ショウジンブログ on Hatena

“お芝居をしないと、この社会では異邦人として扱われるほかない”

レスポンシブWebデザイン

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

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

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

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

レスポンシブ対応のカルーセルスライダー「slick」@jQuery

レスポンシブWebデザインに対応したカルーセルスライダーを実現するjQueryプラグイン「slick」です。 配布元 kenwheeler.github.io 納品案件でも一度使いましたが、かなり使い勝手が良いです。 とくにブレイクポイントを指定して一度に表示するスライドの枚…

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

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

ブロック要素の高さを揃える(レスポンシブ対応)@jQuery

ブロック要素の高さを揃える(合わせる)のに大変便利、重宝しているjQueryのライブラリです。 *to-Rさんのこちらで詳しく紹介されています blog.webcreativepark.net すでに多くの紹介記事がインターネット上にはあるので「今更」感はありますが、自分用の…

MasonryからFreetile.jsに変更@jQuery

グリッドレイアウトで要素をタイル状に敷き詰めるのにjQuery Masonry(NHKスタジオパークで知名度がグンと上がったあれですね)を使って実装を進めてたんですが、自分の設定がうまくないのかWebkit系ブラウザ(とくにSafari)で表示が崩れてしまい、その原因…