毎日毎日暑いと、もはや出掛ける気力も無いのでブログが捗ります(笑)本日は、ワードプレスでピンタレスト風レイアウトに挑戦してみよう!の巻です。UIの使い方」の続きになります。こちらを読んでからの方がより分かりやすいと思いますので、ぜひ目を通してみてくださいませ(^^)ゞさて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。masonryって石工[れんが工]職、石[れんが]造りの建造物、石造建築っていう意味なんですね。目次1.masonryの公式サイトからjsファイルをダウンロードする2.htmlにmasonryを呼び出す記述を書く3.masonryでレンガ状に並べたい箇所のcontainerを作る4.cssで見た目をデザインする1.masonryの公式サイトからjsファイルをダウンロードするそれではまず、masonryの公式サイトでjsファイルをダウンロードしましょう。適当な場所に保存してください。ご自分のFTPへ行きます。お使いのテーマファイルの中にjsフォルダの無い方は、新たにjsというフォルダを作り、先ほどダウンロードしたmasonry.pkgd.min.jsファイルをアップロードします。私の場合、パスはこんな感じです。↓...wp-content/themes/twentyfourteen-child/js/masonry.pkgd.min.jsそのjsフォルダ内に、任意の名前をつけたjsファイルを一つ作ります。私の場合はmasonryで作ったgalleryページということでmasongallery.jsとしました。(今、jsフォルダの中にはふたつのファイルが入っている状態ですね。)パスはこんな感じです。↓...wp-content/themes/twentyfourteen-child/js/masongallery.js今後このファイルにに必要な設定を書いていきます。2.htmlにmasonryを呼び出す記述を書く次にhtmlへmasonryを呼び出す記述をしますが、今回はワードプレスでの説明になりますので、該当するphpファイルに記述をします。UIを使って作成しました。したので、この直下にmasonryでレンガ状に並べたいコンテンツ用のdivを作りたいと思います。探してその直下に作ります。-->FTPへ行き、先ほど作ったjsファイルに以下のように記述します。isAnimated:true,});});↑ここでitemSelector(表示させる画像)にクラス名を付けます。ここでは.galleryとしました。#masonrycontainer、.galleryの部分はご自分で付けたID名、クラス名にそれぞれ差し替えてくださいね。4.cssで見た目をデザインするPC、スマホ、タブレットでの表示をfirebugなどで確認しながらcssで整えていきます。↓下記はPC用の記述例になります。並べる画像(.gallery)にCSSで枠などを装飾しました。出来上がりのイメージはメニューからgalleryをクリックしてみてください。ポイントは.galleryのwidthの%です。widthを48%くらいにすると、一つの画像の幅がコンテナ全体の幅の約2分の1になりますから、画面には2つの画像が並ぶことになります。/*コンテナの中で一つの画像の占める幅。この%だと4つの画像が並べて表示できる。%を変えてためしてみよう。rgba(0,0,0,0.2);}ここまでの設定で、まだうまく画像が表示されない場合があります。いうことで次回は、masonryで画像が重なって表示されてしまう場合の対処法についてです。少々お待ちくださいませ!以上、masonryでピンタレスト風レイアウトその壱でした。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。