固定ページにピンタレスト風に画像を設置したい

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #24403
    参加者

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】v7.8.1
    【お使いのブラウザ】Google Crome / Safari
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    いつもお世話になり、ありがとうございます。
    Snow Monkey は本当に使いやすくて、
    お陰さまで初心者のわたしでもサイトが作れています。

    さて、1点質問です。

    「固定ページにピンタレスト風に画像を配置したい」

    のですが、これは可能でしょうか?

    ※キャプション付きだと、さらにありがたいです。
    ※配置は PC 4列/SP 2列 が理想です。

     

    pinterestのイメージ画像

     

    なお、現在は下記画像のように
    画像サイズを変えることでピンタレストっぽく見せていますが、
    どうしても行が揃ってしまうので、ランダム感が出ません。

    方法を教えていただけますと幸いです。
    よろしくお願い申し上げます。

    現在のピンタレストっぽく配置したページ

    #24475
    キタジマ タカシ
    キーマスター
    #24481
    参加者

    北島さん、お忙しいなかありがとうございます!
    プラグイン試してみます!

    #24495
    参加者

    度々、失礼いたします。

    北島さんに教えていただいたプラグインを試してみたのですが、
    下図のように横幅がフィットしませんでした。

    (画像左右の余白も気になりますが…)

    あとは、スマホで見たときに1列(1カラム)になってしまいます。

    cssがほぼイジレないので、自力では修正できなさそうです(涙)

    お忙しいなか申し訳ありませんが、
    もし何か方法があれば、教えていただけますと幸いです。

    難しい場合は、諦めようと思います。

    プラグインを試した結果

    #24505
    キタジマ タカシ
    キーマスター

    余白は CSS で調整できるかもですが、スマホでカラム数を調整するのは難しそうですね。ピンタレスト風レイアウト(Masonry レイアウト)は CSS だけでは実現できず、JavaScript も絡んでくるので、独自につくるのも結構難しいです…

    他にもいくつかプラグインはあるようですが、ざっとみた感じどれも先のプラグインと同じような感じがします(1つずつ試してみる価値はあるかもしれませんが)。

    #24512
    参加者

    北島さん、ご親切にもありがとうございます。

    余白は CSS で調整できるかもですが、スマホでカラム数を調整するのは難しそうですね。ピンタレスト風レイアウト(Masonry レイアウト)は CSS だけでは実現できず、JavaScript も絡んでくるので、独自につくるのも結構難しいです…

    そうなんですね!
    自分では判断が難しかったので、助かりました。
    北島さんにそう言っていただけたら、諦めがつきます!笑

    プラグインをひとつずつ試したいところではありますが、今回は時間的に厳しいこともあり、普通に配置します。

    いつも本当にありがとうございます。

    #24585
    キタジマ タカシ
    キーマスター

    JavaScript が絡まないブロックであれば Snow Monkey Blocks に新ブロックとして追加するのもやりやすいのですが、いかんせん僕が JavaScript が苦手なので難易度が高いものは難しく…。

    よくある表現だと思うので、今後もっと使いやすい Masonry ブロックがでてくると良いですね!

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「固定ページにピンタレスト風に画像を設置したい」には新しい返信をつけることはできません。