MovableTypeの投稿一覧をJSON書き出し、ランダム表示させる
MovableTypeでは用意されているMTタグで基本的なことは簡単にできるのですが、逆に凝った事をやろうとすると非常に難しい。 例えばランダム表示はプラグインで実装できるようなのですが、ノンプラグインでもJSONファイルに書き出すことで実装可能です。
MovableTypeでは用意されているMTタグで基本的なことは簡単にできるのですが、逆に凝った事をやろうとすると非常に難しい。 例えばランダム表示はプラグインで実装できるようなのですが、ノンプラグインでもJSONファイルに書き出すことで実装可能です。
以前から知ってはいたけどいまいち有効な利用方法が分からなかったdata属性。 使わなくてもwebサイトは作ることができるので、必要性を感じずこれまで使わずにいましたが、調べてみると結構色々とできるようなのでサンプルをまとめてみました。
意外に知られていない(?)Contact Form 7で変数を送信する方法 某エンジニア系Q&Aサイトを覗いていたら、珍しく数時間回答されていない質問があったので、意外に知られていないのかなと思い記事にしてみまし...
jqueryでお馴染みのカルーセルプラグインですが、ちょっとした用途でプラグインは少なからずかかる手間など考えると少し躊躇してしまう場合があります。 というわけで、エフェクトはCSS3に任せて、jquery側はclassのスイッチだけにとどめるコンセプトでイメージスライダーにも使えるコードを書いてみました。
プラグインで広く利用されているlightboxですが、ちょっとした用途にプラグイン導入は重かったり、カスタマイズが簡単にできるようにと思い、jqueryの理解を深める一環として自分なりにコードを組んでみました。 ギャラリーでの使用を前提にしてありますので、画像のタテヨコ比が変わっても対応出来るように作ったら意外にソースが長くなってしまいました・・・
時々見かけるナナメに配置された画像やボックスの表現をしてみたくてtransform:skewプロパティを触ってみたのですが、表示位置が変わってしまって意図した位置に配置ができません。 このズレを修正すべく自分なりに調べて解決法を探ってみました。
タテヨコ比を維持したままウィンドウサイズに合わせて大きさの変わるボックス。 レスポンシブで縦横比率を固定した表示をする場合、画像ならwidth100%を指定すれば良いですが、CSSで書くボックスの場合一工夫必要になります。
乗算やオーバーレイなど、photoshopなどでお馴染みのブレンドモード(描画モード)がCSSで実現できるのは便利じゃない! ということで今回「background-blend-mode」を使って試しにグランジのテクスチャを使っていくつか表現を作ってみました。
画像のモーダル表示で便利なLightboxですが、デフォルトではウィンドウサイズの幅または高さに合わせて画像サイズが決定します。 これはこれで便利なのですが、例えばサイトのキャプチャなど縦長の画像の場合に長辺が圧縮されて非常に見ずらくなってしまいます。 なので今回、Lightbox2で表示される画像を任意の横幅で可変できるようにカスタマイズしてみました。
前回親カテゴリから子カテゴリを出力しましたが、今回はそのソースからマウスホバーで子カテゴリを表示する処理です。 CSSでも同じ様な動きができますが、今回はjqueryでシンプルにやってみます。