タイル状に可変グリッドレイアウトを簡単に実装できる、今や定番のjqueryプラグインといえば「Masonry」。 しかし、このMasonryには配置したアイテムを指定したタグを持つもののみ表示するフィルター機能や、目的別に並べ替えるソート機能がありません。 「Masonry」プラグインのこれらの弱点を補ってくれる代替のプラグインとして有名なのが、「isotope」というjQueryプラグインがありますが、こちらは商用利用の場合はライセンス料の支払いが必要となってしまいます。 そこで今回紹介するのは、フィルター機能もソート機能も搭載した可変グリッドレイアウトを実現し、レスポンシブにも対応した、無料で商用利用も可能なJavascriptプラグイン「Muuri」(GitHubはこちら)。 MITライセンスで、IE9〜をサポートしています。 なお、Masonryは単体で利用可能で圧縮された状態のフ
ブログで旅行系や趣味系だと写真を多く使いますよね。 この写真を普通に挿入すると縦に並んで不格好だったりします。 そして、プラグインでギャラリー機能を使うのですが、、、 そこで今回紹介するプラグインMeow Gallery Blockは スタイリッシュなギャラリーになります。 普通の縦横に同じサイズの写真が並ぶギャラリーでなく 違ったサイズでもタイルのように並べるギャラリーになります。 また、数種類のスタイルがあるので好きなスタイルが使えますよ。 ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。 Meow Gallery Blockとは 有効化することで投稿記事作成時に 写真をタイルのように並べてギャラリーを作成できるようになります。 素材となる写真はどんなサイズでも使うことができ、 タイル形式に並べるスタイルは6種類から選ぶことができます。 また、このギャラリーは高機
作成:2014/06/2 更新:2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク 1.マスク・キャプション 2.円形キャプション 3.全画面+オーバーレイ 4.ストライプの背景 フルスクリーン系 5.スライド+フルスクリーン 6.全画面背景動画 7.パララックス 8.フルスクリーンにフィット 9.背景画像をブラウザごとに最適化 10.メガメニュー 画像可変 11.画像で枠線を表現する 12.半透明+フィルタ 13.文字以外を透明にしてレイヤーさせる 図形 14.ループ+ローディング 15.3Dボックス 16.矢印ナビ 画像切り抜き 17.六角形 18.卵型+星形
WordPressの「これが困った!」 WordPressで困っていることはありませんか? サーバー移転/エラー解消/カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 「WordPressでネットショップを作ってほしい。プラグインてのを使えば簡単なんでしょ」という要望。たまにクライアントさんからあります。それについて、ちょこちょこっとプラグインの紹介も含めて書いてみたいと思います。 WordPressのプラグインとは プラグインは、WordPressの素(す)の状態にはないいろいろな機能を追加できる便利な仕組みのことですね。確かに、ネットショップ用のよくできたプラグインがいくつかあります。「Welcart」や「WooComerce」とかです。 WooCommerceの使い方はわりと簡単だけど日本語対応とかは? Welcart Home ショッ
Tweet WordPressには投稿画面でアイキャッチ画像を指定できる便利な機能がありますが、テーマによってはこのアイキャッチ機能を停止してあることがあります。 そこで今回はアイキャッチ機能を有効化する方法とアイキャッチ画像をテンプレート内に挿入する方法について紹介いたします。 アイキャッチ画像とは アイキャッチは直訳すると「目を掴む」となんともホラーな感じですが、おおよそその通りで記事を見た時に最初に目につく画像のことをアイキャッチ画像といいます。画像を使って記事の内容を一目で伝えるために設置する場合が多いと思います。 よくブログの冒頭にその記事を象徴する画像が置いてありますよね。アレです。この記事で言うと、上の猫ちゃんの画像みたいなやつですね。 アイキャッチ画像を設置する理由 アイキャッチ画像を設置する理由は、人によって様々あると思いますが、以下のような理由からだと思います。 記事の
Google Calendar Eventsは、以前使ったことがあるGoogle Calendar Widgetに近い。Google Calendar Widgetは、3つしかカレンダーフィードを取り込めなかったので、使用を止めたが、Google Calendar Events はいくつでも取り込め、しかもキャッシュ機能がついているので、表示のもたつきを少なくできる。機能自体もこちらのほうが豊富。 (実際に導入して見て) コンサデコンサのトップページのサイドバーに導入した。トップページなので、負担を軽くするために表示する情報を最小限にしてある。 (カスタマイズ:二日分だけ表示する方法) ウイジッドでは、直近、何件まで表示できるという設定がある。しかしこれでは、直近、二日間分(今日、明日)だけ表示といったことができない。 これを実現するための設定方法のメモ。(ver 2.0では対応していませ
デモ Premium Theme with Page Animation Chess Skin with Blinds Animation Gothic Template with Domino Effect Metro Skin with Rotate Effect Elegant Design with Basic linear Animation Geometric Skin with Ken Burns Animation Surface Layout with Blur Animation Vernisage Design with Stack vertical Transition Plastic Template with Squares Animation Flat Style with Slices Animation Studio Layout with Fade An
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く