wordpress

MasonryをやめてCSSのcolumnにした

投稿日:

masonry column

 

不具合連続のMasonry

 

2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、

主な不具合は、

・画像と画像が重なる

・ブラウザを縮小したり拡大したりすると表示がおかしくなる

調べてみた結果、

読み込まれていない画像はレイアウトを崩して、要素が重なってしまうことがあるが「imagesLoaded プラグイン」を使うことによりこれを解決できるということで、

「imagesLoaded プラグイン」というのも設置して、jsファイルの記述も変更してみたのですが、結局うまくいかなかった。

何かが間違っているのかいろいろ調べてみましたが、、、。

残念ながら挫折しました。

そこで、cssに頼るしかない!っていうことで、

cssの「column」を使うことで、それっぽく簡単にできました!

 

超簡単にMasonry風に出来た!

 

まず、<div>でも<ui>でもかまいませんが、全体を囲んでその中に要素を入れていきます。

 

<div class="grid">
 <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div>
 <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div>
 <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div>
 <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div>
 <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div>
 <div class="grid-item"><a href="https://○○○"><img src="https://○○○.jpg"></a></div>
</div>

 
次にcssを記述していきます。
 

.grid{
  width:100%;
  min-width:100%;
  -webkit-column-gap: 6px;
  -moz-column-gap: 6px;
  column-gap: 6px;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}
.grid-item{
  display: inline-block;
  margin: 0;
  padding: 0;
  break-inside: avoid;

これで完成!

あとは、好みでcssの値を変更して試してみてください。

最初からこの方法で良かった気がします。



-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …

秒後に切り替わる

WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示

【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …

メンバー紹介選手紹介

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた①

  WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …

ワードプレスにアメブロ

ワードプレスにアメブロ

  ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …

画像の下に隙間

背景画像の下に隙間ができる【WordPress】

HOME PAGE1 PAGE2 PAGE3     何が原因なのか?   HTMLでは、下記の様にしています。 <div class="haikei&q …