jQuery

MovableTypeの投稿一覧をJSON書き出し、ランダム表示させる

2017.07.302024.01.29

MovableTypeでは用意されているMTタグで基本的なことは簡単にできるのですが、逆に凝った事をやろうとすると非常に難しい。例えばランダム表示はプラグインで実装できるようなのですが、ノンプラグインでもJSONファイルに書き出すことで実装可能です。

html5のdata属性をcss/scss/jsで利用する

2017.03.122024.01.29

以前から知ってはいたけどいまいち有効な利用方法が分からなかったdata属性。使わなくてもwebサイトは作ることができるので、必要性を感じずこれまで使わずにいましたが、調べてみると結構色々とできるようなのでサンプルをまとめてみました。

簡易イメージスライダーなどに使える！jqueryでclassをスイッチさせる方法

2016.07.092024.01.29

jqueryでお馴染みのカルーセルプラグインですが、ちょっとした用途でプラグインは少なからずかかる手間など考えると少し躊躇してしまう場合があります。というわけで、エフェクトはCSS3に任せて、jquery側はclassのスイッチだけにとどめるコンセプトでイメージスライダーにも使えるコードを書いてみました。

Jqueryでlightbox風モーダルウィンドウを作ってみた

2016.06.122024.01.30

プラグインで広く利用されているlightboxですが、ちょっとした用途にプラグイン導入は重かったり、カスタマイズが簡単にできるようにと思い、jqueryの理解を深める一環として自分なりにコードを組んでみました。ギャラリーでの使用を前提にしてありますので、画像のタテヨコ比が変わっても対応出来るように作ったら意外にソースが長くなってしまいました･･･

CSS3のtransform:skewでナナメに変形した時の表示位置を制御する

2016.05.162024.01.30

時々見かけるナナメに配置された画像やボックスの表現をしてみたくてtransform:skewプロパティを触ってみたのですが、表示位置が変わってしまって意図した位置に配置ができません。このズレを修正すべく自分なりに調べて解決法を探ってみました。

Lightbox2のモーダルウィンドウを任意のサイズにカスタムする

2016.04.022024.01.30

画像のモーダル表示で便利なLightboxですが、デフォルトではウィンドウサイズの幅または高さに合わせて画像サイズが決定します。これはこれで便利なのですが、例えばサイトのキャプチャなど縦長の画像の場合に長辺が圧縮されて非常に見ずらくなってしまいます。なので今回、Lightbox2で表示される画像を任意の横幅で可変できるようにカスタマイズしてみました。

メニューの子カテゴリをjqueryでフワッと表示する

2016.03.172024.01.30

前回親カテゴリから子カテゴリを出力しましたが、今回はそのソースからマウスホバーで子カテゴリを表示する処理です。 CSSでも同じ様な動きができますが、今回はjqueryでシンプルにやってみます。

jqueryでスクロール時にポップアップするメニューを設置する方法

2016.02.272024.01.30

記事を見て興味を持った方が同じカテゴリの記事を参照する際のユーザビリティの向上と導線強化のため、スクロールに追従するトップメニューを導入しました。当サイトのメニュー作成にあたってヘッダー部に固定されたメニューと、任意のスクロールポイントで出現するメニューの２つを用意。よく見かけるのは下にスクロールすると消えるものですが、あまり頻繁に動きすぎると閲覧していて気が散ると思ったので任意のスクロールポイントだけの制御にしてあります。