toggle
2015-12-11

【WP】「WP Masonry Layout」の設定方法と使い方とカスタマイズ

WP Masonry Layoutの使い方とカスタマイズ

私が「about Fashion」のトップページで使用している、ちょっと「Pinterest」っぽいデザインのレイアウトは、「WP Masonry Layout」というプラグインを使用して作っています。ページを開くと写真がパパパパッと出てきてなんかいい感じ。写真がメインなので、見やすいようにしようしたくて、このレイアウトに決めたわけですが、自分の思ったように表示するの、すごく大変でした。原因は私のスキル不足なんですけど。とりあえず、なんとかやっと思った通りにできたので、そのカスタム方法を書いておきます。たぶん、私ができたので、初心者の方でも大丈夫と思います。あと、直接プラグインデータに手を加えていますので、元に戻せなくなると困ったことになります。必ずバックアップをとってから作業を開始してください。

■WP Masonry Layoutを自分好みにカスタマイズ

最初に、書いておくと、レスポンシブ対応にできるのは、有料のプロバージョンのみなので、無料でいきたい私は、そこ妥協しました。PC画面で2列で表示されているブロックはスマホでも2列。PCで3列はスマホでも3列です。4列なら4列。冒頭の写真、4列にしていてPC画面ならいい感じなのですが、ほら…。

WP Masonry Layoutの使い方とカスタマイズ

PCに合わせて細かくしすぎちゃうと、スマホ画面で見たときすごく見づらいのでご注意ください。スマホでも読まれることを前提としたサイトだと、たぶん2列くらいがベストなんじゃないかと思います。


■まずは「WP Masonry Layout」を有効化

WP Masonry Layoutの使い方とカスタマイズ

ダッシュボードから「プラグイン」→「新規追加」でWP Masonry Layoutをインストール。そして有効化してください。そうするとここに出てきます。

WP Masonry Layoutの使い方とカスタマイズ

■お好みの表示を設定する

ダッシュボードの「WP Masonry」から「Shortcodes」を選択。

WP Masonry Layoutの使い方とカスタマイズ

好きなレイアウトを作ったら、ショートコードをはきだしてくれるので、複数種のレイアウトを作って保存しておけるのもうれしいですね。出来上がったショートコードを、このレイアウトを表示させたい場所に貼り付けるだけです。設定は、自分の好みに合わせてこんな感じで。

WP Masonry Layoutの使い方とカスタマイズ

 

■表示したい場所にショートコードを貼る

もろもろ入力したら、最後に「Save」をクリック。そうするとページ上部にこんなショートコードが出てきます。

WP Masonry Layoutの使い方とカスタマイズ

これをコピーして、表示したい場所に貼るだけ。あと、もし修正したい場合は、「Edit」をクリックすると保存されたデータが表示されるので、修正してまた「Save」すれば大丈夫です。

私は、固定ページに貼り付けて、カテゴリーカテゴリーページの目次みたいにしたかったので、こんな感じで書きました。

WP Masonry Layoutの使い方とカスタマイズ

テキストモードの状態で書き込みます。

■「Pinterest」風にレイアウトできている、はず!

ここで、すでに思った通りにできていてご満足いただけたなら、それはおめでとうございます。ここで終了です。


私の場合は、横幅に対して2列って指定したのに、こうなっちゃいまして。

WP Masonry Layoutの使い方とカスタマイズ

スマホはちゃんと2列出るんですけどね。

WP Masonry Layoutの使い方とカスタマイズ

これはなんか左寄りでかっこ悪い。ということで、まずは、

■横2列って設定したんだからちゃんと横2列で出てきてよ

ダッシュボードから「プラグイン」→「プラグイン編集」。右上の「プラグイン編集」から「WP Masonry Layout」を選んで「選択」をクリックします。右側にいろいろ書いてありますが、その中から「wp-masonry-layout/css/wmlc_client.css」を選んでクリックします。

WP Masonry Layoutの使い方とカスタマイズ

下記のようなコードが書いてあるので、下図の部分のパーセンテージをちょっと変更。変更したら、下のほうの「設定を更新」をクリック。

WP Masonry Layoutの使い方とカスタマイズ

これで、ちゃんと横2列表示されるようになりました。でもこれ使う人のPC画面の幅によって見え方が変わるので、正解かわからない…。

WP Masonry Layoutの使い方とカスタマイズ

とりあえず、これでレイアウトはOKです。パーセンテージは、希望のブロック数とかに応じで適宜変えてみてください。

■表示する要素を変えたい

WP Masonry Layoutの使い方とカスタマイズ

デフォルトだと、写真の下に、コメント数が自動で出るようになっています。

WP Masonry Layoutの使い方とカスタマイズ

でも私のページ、コメントなんてほぼないんで、全部「0 Response」。これいらなくね? ということで、この部分を日付に変更します。

それから、本文の冒頭も表示されるのですが、これスマホで見るときちょっとうざいので、いっそ取っちゃえということで、消すことにしました。ほら、なんか文字だらけ。

WP Masonry Layoutの使い方とカスタマイズ

変更する部分は、「wp-masonry-layout/themes/default/layout.php」です。ダッシュボードから「プラグイン」→「プラグイン編集」。右上の「プラグイン編集」から「WP Masonry Layout」を選んで「選択」をクリックします。右側にいろいろ書いてありますが、その中から「wp-masonry-layout/themes/loader.php」を選んでクリックします。

WP Masonry Layoutの使い方とカスタマイズ

その画面の右側にまたいろいろ書いてありますが、その中から「wp-masonry-layout/themes/default/layout.php」選んでクリック。

WP Masonry Layoutの使い方とカスタマイズ

レイアウトのphpコードが表示されます。

WP Masonry Layoutの使い方とカスタマイズ

そこで表示されたコードを下記のように変更します。

上記そのまま差し替えてもらえれば、
・「0 Responsive」が投稿日になる
・本文表示欄が消える
の2点が修正されると思います。

WP Masonry Layoutの使い方とカスタマイズ

スマホだとこうなります。

WP Masonry Layoutの使い方とカスタマイズ

 

■タイトルの文字が気に入らない

すっきりといい感じになってきた! でも、投稿タイトルの文字、何か色が薄くて目立ってないし、太字になってるから読みづらいし。これも変えちゃえ! ということで、ここも修正します。

変更する部分は、「wp-masonry-layout/themes/default/style.php」です。ダッシュボードから「プラグイン」→「プラグイン編集」。右上の「プラグイン編集」から「WP Masonry Layout」を選んで「選択」をクリックします。

WP Masonry Layoutの使い方とカスタマイズ

右側にいろいろ書いてありますが、その中から「wp-masonry-layout/themes/loader.php」を選んでクリックします。その画面の右側にまたいろいろ書いてありますが、その中から「wp-masonry-layout/themes/default/style.php」選んでクリック。

WP Masonry Layoutの使い方とカスタマイズ

そこで表示されたコードの下記の箇所を好みに合わせて変更します。

WP Masonry Layoutの使い方とカスタマイズ

私が変えたところは、
・太字じゃなくて、普通の文字にしたかったので、「bold」(太字という指示)を「none」に変えました。
・文字の色:私のデザインテーマのフォントの色に合わせて♯333に変えました。スミ文字がいい人はBLACKでもOK。

そして、完成したのがこちら!

WP Masonry Layoutの使い方とカスタマイズ

やっとできました。

WP Masonry Layoutの使い方とカスタマイズ

スマホだとこうなります。

WP Masonry Layoutの使い方とカスタマイズ

自分の中では、とても見やすくなったような気がしています。

専門的な知識、ほぼゼロの私の説明なので、分かりづらいかと思いますが、これが精一杯です。ご容赦ください。もしかして誰かのお役にたてれば幸いです。

いいね! と思ったらぜひシェアを。

コメント4件

  • +foto より:

    とても参考になる記事ありがとうございます。
    特に「WP Masonry Layout」の記事なんども読んで利用させていただきました。
    少し、ご質問させていただきたいのですが、

    「about FASHION」のページを開いたとき、「WP Masonry Layout」独特のロード時間がなくパッと表示されるのはどこかを扱っていらっしゃるのですか?

    それと、わたしが使った場合、最初にロードしたときに画像が重なってしまって、うまく画像の高さが取得できていないようなのですが、そのような現象は mayumi さんのサイトではありませんでしたでしょうか?

    わたしは東南アジアの方を旅してまして、
    ネットでお仕事しようと思っても停電などには悩まされます。
    mayumiさんのこれからの旅路もご安全であることを願っております。

    • mayumi mayumi より:

      +fotoさん
      コメントありがとうございます!!
      about FASHIONのところは、とくにいじってないです。むしろやり方がわかりません´д` ;

      私は画像のサイズ、すべて同じにしているので、ずれたことはないのですが…
      いかんせん素人なもんで、探り探りです!!
      アフリカも同じくネット環境が絶望的なので、悩まされ続けています。
      WiFi難民みたいになってますー!!
      でもこればっかりはなあ…なんとかなるといいんですけどねえ。
      お互い頑張りましょうo(^▽^)o

  • プクー より:

    今は使ってないかもですが
    WP Masonry Layout
    無料でもレスポンシブに対応しましたよ。

    WP Masonry Layoutを調べていてこのサイトを知りました。

    とても面白いブログです。

    一点、アフリカとかだとLANの環境とかで更新きつい時とかないですか?

    健康に気を付けて継続してください。

    • mayumi mayumi より:

      プクーさん
      コメント&ありがたいアドバイスありがとうございます!!
      まだ使ってるペースあるんです!レスポンシブ対応、うれしい!!
      ブログ、褒めていただいて恐縮です(o^^o)
      アフリカ、ブログ更新はなかなかにハードモードです!!シムフリー携帯でデザリングとかやってみてるんですが、写真あげてしまうとあっという間に容量使い切ってしまうんですよね…。
      ただ、今のところ、全くWiFi環境にあやかれないほどの国はなく、この先モザンビーク、マラウィあたりが不安です笑。
      でも、なんとかがんばりたいなあと思っております!!
      またぜひ遊びにいらしてください!

      追加情報も感謝です!しっかり目を通してみます!

  • mayumi へ返信する コメントをキャンセル

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

    CAPTCHA