• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › WordPress › 大きさの違う画像を綺麗に並べ替える

大きさの違う画像を綺麗に並べ替える

画像やコンテンツを隙間なく自動でアニメーションしながら並べ替えてくれます。

↓デモ : 大きさの違う画像ですが、隙間なく自動でレイアウトしてくれます。ブラウザの幅を狭くし動きを体験してみてください。

設定

https://masonry.desandro.com/ まずここからmasonry.jsをダウンロードします。

masonry.jsとは別に(例)masonry_sub.jsを作成します。

↓例)対象幅 px 固定バージョン(columnWidth: 200にし、スタイルシートは.boxにマージンを適当に付けます)

1
2
3
4
5
6
7
  $(function(){
  $('.demo_masonry').masonry({ //外側の要素を.demo_masonry
  itemSelector: '.box', //並べ替える対象を.boxとしました。
  columnWidth: 200,     //一列の幅(px)
  isAnimated:true,      //アニメーション trueまたは、false
  });
  });

↓例)上のデモが対象幅 % バージョンです(columnWidthを削除し、スタイルシートで.boxをwidth: 32%)

1
2
3
4
5
6
7
  $(function(){
  $('.demo_masonry').masonry({ //外側の要素を.demo_masonry
  itemSelector: '.box', //並べ替える対象を.boxとしました。
              //一列の幅(px)
  isAnimated:true,      //アニメーション trueまたは、false
  });
  });

ダウンロードしたmasonry.jsと、作成したmasonry_sub.jsを外部から読み込ませます。

  • サイト全体 外部JavaScriptを読み込ませる
  • ページ単体 プラグイン Custom CSS and JS
  • 最新のjQueryを読み込ませるため header.phpに↓を挿入
    1
    2
    3
    4
    <?php
    wp_deregister_script( 'jquery' );
    wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    ?>

設置

基本は↓このような感じになります。

1
2
3
4
5
6
7
8
9
10
<div class="demo_masonry">
 
  <div class="box">wordpress</div>
  <div class="box">masonry</div>
  <div class="box">jQuery</div>  
  <div class="box">並べ替え</div>
  <div class="box">コンテンツ</div>
  <div class="box">画像</div>
    
</div>

あとは、.demo_masonryと.boxをスタイルシートで調整します。

タグ: 並べ替え
カテゴリー: WordPress, JavaScript

コメントを残す コメントをキャンセル

関連記事
外部からスタイルシートの変更
特定のカテゴリに個別のCSSを適応させる
リンクの表示順を並べ替える
カテゴリの表示順を並べ替えてくれる
画面幅に合うアドセンスの自動表示
クリックで外部データを表示
人気記事
高機能でオシャレな実用的メニュー(HTMLテンプレート)
Webページ全体をフェードイン、フェードアウト
投稿、固定ページ内にウィジェットを挿入
記事の続きを読むを消す
最新記事を自動でスライドショー
コメントに画像を挿入できるようにする
指定したカテゴリIDのカテゴリ名のみ取得
フリーの高機能HTMLテンプレート
記事ごとに個別のCSSやJavaScriptを追加
特定のカテゴリに個別のCSSを適応させる
カテゴリ別に違うカテゴリ(テンプレート)を表示
タイトルや本文からタグを自動生成
画像や動画をポップアップし再生
非表示、置換テクニック
Contact Form7の送信完了画面をカスタマイズ
phpMyAdminのユーザー名とパスワードの確認方法
カテゴリー別に違うサイドバーを出す
CSS3のみで画面外からメニューをスライド表示
CSSやJavaScriptのハンドル名(id)を確認
管理画面の投稿一覧で投稿IDを表示する
アイキャッチ(サムネイル)を呼び出す
スライドショー Meteor Slides
カテゴリに別々のアイコンを表示
レスポンシブなLightbox jQuery プラグイン Strip
背景をスライドショーにする
ページごとに違うヘッダーを読み込む
コメントのメールアドレス入力覧を消す
記事をランダムに表示させる
CSS3 角を丸くする
スライドショー Skitter Slideshow
パスワードを間違えると一定時間ログインできないようにする
購読者にパスワードを変更させない
ショートコードを追加するプラグイン
管理画面の投稿一覧へアイキャッチを表示
個別にJavaScriptを振り分ける
Contact Form7に画像認証機能を追加
リンクの表示順を並べ替える
サイト全体のサムネイルサイズを変更
CSS3 ボックスシャドウ
JavaScriptで画面外からメニューをスライド表示
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2023 Plus WordPress