Masonryを使ってスタイリッシュにHTMLで画像を並べたい

サイト作成で画像を綺麗に並べる必要が出てきたので良さそうなサービスがないか調べています。

そんななか画像を隙間なく並べてくれるJavascriptがあるというのでダウンロードしてワードプレスで使ってみました。

今後の備忘録的に書き留めておきます。

Masonryとは?

Cascading grid layout library

Masonryのサイト

画像やテキストを大きさを判別してタイル状に並べてくれる便利なJSです。

早速、このサイトで設定してみてどんな感じに表示されるのかやってみます。

Masorny 使ってみる

Masorny ダウンロード、WPサイトにアップロード

上記サイトにアクセスして右上のほうにある「Download」のリンクを右クリックして「名前を付けてリンク先を保存」を選びます。

名前を付けてリンク先を保存を選ぶ

以下のようなファイルがダウンロードできました。

ダウンロードするのはこのJSファイルのみ

ダウンロードするのはこのJSファイルのみ

JSファイルはワードプレスのテーマの中にあるJSファルダに保存します。

/bey.jp/public_html/wp-content/themes/simplicity/js

のパスにアップロードします。

WPからJSファイルを読み込む

masonry.pkgd.min.jsファイルをワードプレスから読み込む設定をします。

失敗したやり方

functions.php

こちらに以下のように記述しましたがなぜか?違うsmasonry.min.js(ワードプレスにもともと入っているみたい。)を読み込んだようで・・・

function theme_name_scripts() {
    wp_enqueue_script('masonry', get_template_directory_uri().'/js/masonry.pkgd.min.js');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

ページのソースを見ると以下の行が追加されていて、バージョンの違うMasonryファイルを読み込んでいる様子。


(ダウンロードしたのは3.3で、wp-includes/jsにあるファイルは3.1.4だった。ファイルがあるか見てみると実在していた。)

なのでfunctions.phpに書くのは諦めてheader.phpに直接書く。

header.php

<? echo get_template_directory_uri().'/js/masonry.pkgd.min.js'; ?>

これをやっても”https://bey.jp/wp-includes/js/masonry.min.js”のファイルを読み込んでしまう・・・・どういうことだ?

どうやら、wp_enqueue_scriptの1番目の引数に’masonry’があるとwp-includes/jsのファイルを読み込んでしまうみたい。

名前を変えたらあっさり読み込んだ。

うまくいったやり方

fundtions.php

function theme_name_scripts() {
    wp_enqueue_script('pkge-masonry', get_template_directory_uri().'/js/masonry.pkgd.min.js');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

これで準備OK

Masonryをこのページで使ってみる

Masonry基本形

基本的に以下のようにclassに”js-masonry”,”item”の記述があれば良いみたい。

<div class="js-masonry">
<div class="item">画像1+テキスト</div>
<div class="item">画像2+テキスト</div>
<div class="item">画像3+テキスト</div>
<div class="item">画像4+テキスト</div>
<div class="item">画像5+テキスト</div>
<div class="item">画像6+テキスト</div>
<div class="item">画像7+テキスト</div>
<div class="item">画像8+テキスト</div>
<div class="item">画像9+テキスト</div>
</div>

親DIVにどちらかを入れる。子DIVににitemを入れるが省略できるみたい。

SPANでもできるみたいだったけど、やってみたらぜんぜん並ばないのでDIVしか反応しなさそう。

  • id=”container”
  • class=”js-masonry”

2つあるようだけどid=”container”は入れても反応せずclass=”js-masonry”を入れたら並び替えした。

これを記述したものは以下のような表示になった。

画像1+テキスト
画像2+テキスト
画像3+テキスト
画像4+テキスト
画像5+テキスト
画像6+テキスト
画像7+テキスト
画像8+テキスト
画像9+テキスト

これだと分からないので実際に画像を入れてみる。

Galaxy S2 外観とかは綺麗な状態ですが・・・
UNIFLAMEユニセラTG-III
DSC00681
唐戸市場 好きな寿司を取る
 
DSC_0134
オーリーの練習
グロッシープレミアムカーボン
アッチッチの曲に合わせて風船
Galaxy S2 SIMスロットが悲惨な状態に(T_T)
炭おこし 順調に火がついた
炭焼き ユニセラ TG-III 横から見た姿 完成度高い
LOADED RACE GLOVE LEATHER L-XL プラスティックはマジックテープで取り外しできる

DSC09937
エレサスの機械 電流は痛く無くまったくビリビリを感じない
ニー+エルボーパッドTRIPLE 8 PARK 2PACK KNEE ELBOW SET L

ううん・・・あんまり綺麗に並べてくれないようです。

オプションを使って綺麗に並べられるようにやってみましょう。

Masonryのオプション

オプションはdata-masonry-optionsを外側のDIVに入れてその中にオプションを書き込む。

オプションはあまり無いみたい。

  • columnWidth:幅
  • itemSelector:”.item”
    (classの名前、並べるのを特定したい時 例:class=”play”だけを並べる場合はitemSelector”: “.play”)

以下のようにDIVで囲ってみた。

<div class="js-masonry" data-masonry-options='{"columnWidth": 213,"itemSelector": ".item"}'>

Galaxy S2 外観とかは綺麗な状態ですが・・・
UNIFLAMEユニセラTG-III
DSC00681
唐戸市場 好きな寿司を取る
DSC_0134
オーリーの練習
グロッシープレミアムカーボン
アッチッチの曲に合わせて風船
Galaxy S2 SIMスロットが悲惨な状態に(T_T)
炭おこし 順調に火がついた
炭焼き ユニセラ TG-III 横から見た姿 完成度高い
LOADED RACE GLOVE LEATHER L-XL プラスティックはマジックテープで取り外しできる

DSC09937
エレサスの機械 電流は痛く無くまったくビリビリを感じない
ニー+エルボーパッドTRIPLE 8 PARK 2PACK KNEE ELBOW SET L

 あらら・・・余計ひどくなった(汗)右下のほうに画像が一枚吹っ飛んだ!

画像の横幅を合わせないとダメみたい。幅213pxだけで画像を並べてみる。

Galaxy S2 外観とかは綺麗な状態ですが・・・
DSC00681
唐戸市場 好きな寿司を取る
オーリーの練習
グロッシープレミアムカーボン
アッチッチの曲に合わせて風船
Masonryのサイト
Galaxy S2 SIMスロットが悲惨な状態に(T_T)
炭焼き ユニセラ TG-III 横から見た姿 完成度高い
これがコチュ きゅうりくらいジューシーな食感。しょっぱくない韓国味噌を付けて食べると肉の油っこさをリセットしてくれる。たまにメッチャ辛いのがあるけど辛いの好きな韓国人は平気で食べる。
DSC09937
ニー+エルボーパッドTRIPLE 8 PARK 2PACK KNEE ELBOW SET L

ワードプレスの「テキスト」のタブからオプションを書くと以下のようにクォーテーションがダブルクォーテーションに、ダブルクォーテーションが &quot;に勝手に書き換わる。

data-masonry-options="{&quot;columnWidth&quot;: 213,&quot;itemSelector&quot;: &quot;.item&quot;}"

実際に記事のページを見ると以下のように全部ダブルクォーテーションに書き換わっている。

data-masonry-options="{"columnWidth": 213,"itemSelector": ".item"}"

ただ、オプションは効いているようで横幅合わせた画像ではすべて綺麗に整列した。

よく見ると14枚中1枚の画像が吹っ飛んで真ん中一番上の画像の裏あたりに隠れてしまっている(^_^;)

オプション入れると必ず画像が1枚どこかにすっ飛んでしまうみたいで調査中

Masonry 現状の問題点

Masonry+テーマSimplicityの謎の縦8pxのスペース

横はうまく並ぶみたいだけど縦に謎の8pxのスペースができる。
このサイトのWPテーマかプラグインのCSS?が絡んでるのかもしれない。
Fancyboxのリンク入れてもリンクなしでも同様に8pxのスペースが下にできる。

.item{line-height:0px;}

CSSでこれを指定したら縦スペース無くなった。解決!

  • オプションをつけた場合は1枚の画像が吹っ飛んで他の画像の裏に回りこんでしまってうまく表示されていない。

現在問題解決進行中。問題解決したらこのページに追記していきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする