過去のセットリストやフライヤーが一目で見られるギャラリー風のページ頻度の少ないGigですが、過去のセットリストやフライヤーが一目で見られるギャラリー風のページが欲しいなと思っていました。最近は、フライヤーもFacebookとお店用に毎回自分で作るようになりましたし、セットリストもそれなりに毎回考えるし、せっかくなので残しておきたいところです。ミュージシャンならTOPページにしてもかっこいいと思います。そこでレンガ状、ブロック状に自動でコンテンツを並べてくれる、おしゃれなjQueryプラグインMasonryを入れてみることにしました。賢威でカスタマイズ私のこのブログは賢威で作られています。1カラムの固定ページを作って、そのページでのみ、MasonryJSを読み込ませるカスマイズを行います。賢威は簡単に「このページだけ1カラム」にできるから本当に便利・・・もちろんレスポンシブカスタマイズ手順1カラムの固定ページを作成Masonryの公式サイトからJSをダウンロードして自サーバーにアップロードMasonry実行JSを書いて自サーバーにアップロードMasonryを動かすために固定ページ用の設定を入れる固定ページの記事に並べたいコンテンツを書くCSSでデザイン調整それではカスタマイズを始めます。1カラムの固定ページを作成ダッシュボードの「固定ページ」ー「新規追加」からページを追加します。私の場合はサブコンテンツも表示したくなかったので「コンテンツエリア」でどちらも「表示しない」にしました。あとで必要なのでアドレスバーに表示されている記事IDとなる数字をメモっておいてください。この場合なら記事IDは「873」です。Masonryの公式サイトからJSをダウンロードして自サーバーにアップロードMaosonryの公式サイトからJSをダウンロードします。「masonry.pkgd.min.js」という名前のファイルです。そのままサーバーにアップロードします。アップロード先は「賢威テーマフォルダ」の「js」フォルダです。Masonry実行JSを書いて自サーバーにアップロード下記のコードを書いて、masonryt.jsというファイル名で保存します。それからさきほどと同じ、「賢威のテーマフォルダ」の「js」フォルダにアップロードします。ファイル名ですが、こちらもあとで読み込み指定のときに合っていればなんでもいいです。上記コードのハイライト部分、#container_msnryというクラス名が、ここからMasonryにするよ、というマーキングになります。私のページでいうと、この大きな赤い枠線のdivがMasonryになります。‘.post’,」がMasonryで並べる、画像とかpタグとか、各部品用のクラス名になります。このクラス名で指定していない部品は、レンガ状に並べられない、ということですね。「columnWidth」の次の数字は、任意で変える必要があります。各部品の横幅サイズの指定です。あとでCSS設定するときに合わせれば、このクラス名はなんでもいいです。Masonryを動かすために固定ページ用の設定を入れるMasonryのJSを実際動かす設定を入れていきます。賢威のテーマフォルダ直下の「footer.php」の、「この行は削除しないでください」の直前の行に次のハイライトされたコードを追記します。//この行は削除しないでください。?>ちょっと説明もうお察しかと思いますが、「get_the_ID」のあとの数字は手順1でメモった記事IDに置き換えます。JSを読み込んでるだけですが、Masonryを使わないページではまったく不必要なコードで、ページ表示が遅くなるだけですので、Masonryの固定ページでだけ読み込ませます。実装はただ、これだけです(笑)固定ページの記事に並べたいコンテンツを書くいよいよ固定ページに記事で、レンガ状に並べたい部品を書いて行きます。並べたいものは、pタグで囲んで、class=”post”を書いたらMasonryのJSが勝手に並べてくれます。ダッシュボードで固定ページの編集ページに行き、まずはMasonryの囲いとなるdivを記載します。class="container_msnry"></div>それから並べたい部品をで書いていきます。class="post">部品3</p></div>と言う具合です。私の場合は画像とセットリストの文字が各部品なので、こんなかんじになっています。各部品の横幅サイズについて私の場合、各部品の横幅はだいたい200~380pxです。手順3のコードの「itemSelector」が100とか200とかの数字だと、うまく並びませんでした。各行1個だけ部品がぽつんと置かれたりして、「敷き詰められる」かんじがしませんでした。現在のように敷き詰められるようになりました。例)itemSelectorを200にするとこんなかんじ。横幅980pxに対して余白だらけ。1カラムにすると、サイトの横幅サイズが980pxです。330px以上のサイズの部品は3つは並びません。改行などそのへんはMasonryが自動で判断して、1行に3つ部品を敷き詰めたり、2つにしたりしてくれています。そんなわけで「itemSelector」の数字は任意で調整してくださいね。私のサイトでは、各部品に枠線を付けてカラフルなかんじに、かつ、部品同士のマージンを多めにとって見やすいようにしています。(Masonryにするとそもそも見にくいのですが)各部品を囲むpタグにクラスを追加しています。msn_violet">部品</p>賢威テンプレートのスタイルシートdesign.cssに下記を追記しました。#ed8bd2;}最後に※カスタマイズは事前に必ずバックアップをとってから行ってください。́)⊃))当然ですが。意味のないページですが可愛いので気に入っています。これからMasonryのオプションを調査して実装していきたいです。必須サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。人間らしくシェアTOPへ。