サイト作成で画像を綺麗に並べる必要が出てきたので良さそうなサービスがないか調べています。
そんななか画像を隙間なく並べてくれるJavascriptがあるというのでダウンロードしてワードプレスで使ってみました。
今後の備忘録的に書き留めておきます。
Masonryとは?
画像やテキストを大きさを判別してタイル状に並べてくれる便利なJSです。
早速、このサイトで設定してみてどんな感じに表示されるのかやってみます。
Masorny 使ってみる
Masorny ダウンロード、WPサイトにアップロード
上記サイトにアクセスして右上のほうにある「Download」のリンクを右クリックして「名前を付けてリンク先を保存」を選びます。
以下のようなファイルがダウンロードできました。
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”を入れたら並び替えした。
これを記述したものは以下のような表示になった。
これだと分からないので実際に画像を入れてみる。
ううん・・・あんまり綺麗に並べてくれないようです。
オプションを使って綺麗に並べられるようにやってみましょう。
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"}'>
あらら・・・余計ひどくなった(汗)右下のほうに画像が一枚吹っ飛んだ!
画像の横幅を合わせないとダメみたい。幅213pxだけで画像を並べてみる。
ワードプレスの「テキスト」のタブからオプションを書くと以下のようにクォーテーションがダブルクォーテーションに、ダブルクォーテーションが "に勝手に書き換わる。
data-masonry-options="{"columnWidth": 213,"itemSelector": ".item"}"
実際に記事のページを見ると以下のように全部ダブルクォーテーションに書き換わっている。
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枚の画像が吹っ飛んで他の画像の裏に回りこんでしまってうまく表示されていない。
現在問題解決進行中。問題解決したらこのページに追記していきます。
コメント