お客様のＨＰで
完成してから しばらくたってるんですけどね・・・
完成までがこれまた なが～いなが～い道のりでした
仕事しながら 帰宅後にやってたというのもあるのですが
本当に
よく文句も言わずに待ってていただいて
申し訳なかった と言う思いと 感謝しかありません
ちなみに こちらが 完成したホームページです
心身統一合氣道
完成後も あれこれ お直し
最近変更したのが 生徒さんの声 のページ
前から Masonry風（Pintarest風）の表示に凄く興味があって
どうなってるんだろう？とずっと思っていました
そんなとき クライアントさんから表示についてご相談をいただいたのです
レスポンシブ仕様なので
html の 書き方のパターンが決まってる
その中で どうやっていくか
元 なかなかのプログラマだった知人にも相談したけど
応えてくれそうもないので自分で考えることに ↓↓↓
まずは phpでの対応を考えてみた
ループを何重かにして外から順番に・・・などなど
でも どうも考えが進まない
そこで
もっとスマートな方法があるはずとネットで探す
最初はCSSで対応できないかと検索
確かに 今は Gridレイアウトや Masonryレイアウトは
CSSで対応するのが一般的
でも CSSの新しいスタイルに対応してないＯＳが今もある
散々調べて 私がやりたいことは CSSでは無理かもと思った
そこで javascriptに変更して検索
そしたら すぐに見つかったのが Macy.js
これこれこれ！
私がやりたかったのは！
http://macyjs.com/
設定も scriptも 簡単
見た目も リズム感があっていい♪
（と思ってるのは私だけ？笑 でも これは本当に素敵です）
何より 他の script の邪魔をしないというのがいい
横に並んで行き かつ ばらばらの長さで表示
次のデータは下に回りこむ
だからカラム数をこちらで決められる
（CSSでは 縦に並んでいくものがほとんどだった）
本来はこんな風に画像表示に使われてて
だから pintarest風 レイアウト とも呼ばれてるそう
次は 表示用のphp
昇順と降順との両方に対応させなくちゃならない
あるサイトのスクリプトを使ってみたら
rsoat した後 順番がばらばらになってた
そこで別の何かないかと思ったら
こちらのサイトにオーソドックスなscriptがあった
昇順・降順・ソート
http://p-ho.net/index.php?page=28
これを元にスクリプトを完成
後はurlにパラメーターをつけて分岐
見に来た人が降順・昇順を選択できるようにしてみた
ほかに参考にさせてもらったサイトは
[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js
https://bit.ly/2O467oZ
また 変更したページ 生徒さんの声 の付箋風もどきはCSSで実装しています。
多くの素晴らしい情報が 無料で提供されてます。
日曜プログラマーの私にとって すべてなくてはならない情報ばかり。
そのおかげで 完成したＨＰがあります。
本当にありがたいです。
0 件のコメント:
コメントを投稿