サイト作成の練習 サイポンの機能を実験
2020/06/12
テンプレートのような大きな写真がドーンと出ているサイトはどうやって作るのだろかと、ちょっといろいろ試してみた。
その結果、まぁなんとなくわかった。
とりあえずブロックを作り、ブロックの背景を写真にしてみたのだけど、ブロックが違うと写真が途中で切れてしまう。
そこで、ブロックを作った後に、コンテナを追加する形にしてブロックを縦長にしていけば、写真が途中で切れないことを発見。
ブログで再現できるかどうかわからないけど、ここでやってみる。
ここから下、別のブロック。
その結果、まぁなんとなくわかった。
とりあえずブロックを作り、ブロックの背景を写真にしてみたのだけど、ブロックが違うと写真が途中で切れてしまう。
そこで、ブロックを作った後に、コンテナを追加する形にしてブロックを縦長にしていけば、写真が途中で切れないことを発見。
ブログで再現できるかどうかわからないけど、ここでやってみる。
ここから下、別のブロック。
上２つがブロックの背景を変えて同じ写真を選んだ場合。
写真が途中で切れて同じ画像が２枚並んでしまっている。
下の１枚はブロックの背景は変えずにコンテナの背景だけを変えた場合。
こうなってしまうのではなく、出来る限り大きく写真を出したい時にはどうするのか？
という問題。
で、解決策として考えたのが上記のブロックの長さを縦長にする、という方法。
ちなみに今回は追加しているのはすべて余白のパーツです。
では、ブロックを縦長にした場合。
写真が途中で切れて同じ画像が２枚並んでしまっている。
下の１枚はブロックの背景は変えずにコンテナの背景だけを変えた場合。
こうなってしまうのではなく、出来る限り大きく写真を出したい時にはどうするのか？
という問題。
で、解決策として考えたのが上記のブロックの長さを縦長にする、という方法。
ちなみに今回は追加しているのはすべて余白のパーツです。
では、ブロックを縦長にした場合。
ジャンプしている女の子二人の全身と足元の砂浜までちゃんと表示されるようになりました。
同じやり方で、ブロックを増やした後、「ブロックの背景」ではなく「コンテナの背景」を変えるとこんな感じ。
写真がちょっと小さくなりました。
写真がちょっと小さくなりました。
ブロックの背景とコンテナの背景を両方変えると上にようになります。
あえて写真を重ねたのでなんか変な感じですけど、緑の服の子の左手が２つになっていたりするところを見れば、サイズ違いの同じ写真が重なっているのがわかります。
ちなみにこの他に「パーツの背景」を変えるというのがあります。
ただこちらの場合は余白では上手く縦長になりませんでした。
あえて写真を重ねたのでなんか変な感じですけど、緑の服の子の左手が２つになっていたりするところを見れば、サイズ違いの同じ写真が重なっているのがわかります。
ちなみにこの他に「パーツの背景」を変えるというのがあります。
ただこちらの場合は余白では上手く縦長になりませんでした。
そこでテキストパーツを空白で埋めて背景を変えてみたのが上の写真です。
違いが分かりにくいですけど手の位置が微妙に違うかな？
違いが分かりにくいですけど手の位置が微妙に違うかな？
上のブロックとコンテナの背景を重ねた写真に、さらにテキストの空白を使ってパーツの背景も重ねたのが上の写真なのですが……
写真が３枚重なっているのは緑の子の左足の数を見ればわかると思うのですが、この作業中、テキストの空白の量を増減させると、背景の写真のサイズが大きくなったり小さくなったりと変動しました。
この辺りにも何か特殊な機能が付いているみたい。
サイポンの機能実験でした。
ちなみに、今回はブログの記事なのでブログ記事枠内の大きさにしか写真が大きくなりませんでしたけど、ブログ以外の通常のサイトでこの作業をやると、画面いっぱいに写真が広がりました
写真が３枚重なっているのは緑の子の左足の数を見ればわかると思うのですが、この作業中、テキストの空白の量を増減させると、背景の写真のサイズが大きくなったり小さくなったりと変動しました。
この辺りにも何か特殊な機能が付いているみたい。
サイポンの機能実験でした。
ちなみに、今回はブログの記事なのでブログ記事枠内の大きさにしか写真が大きくなりませんでしたけど、ブログ以外の通常のサイトでこの作業をやると、画面いっぱいに写真が広がりました
追記
サイポンの表示がバグってるみたいです。
管理画面では１番最初の写真は同じ写真を２枚縦に並べたのに公開されているページでは４枚に、他の写真は１枚しか表示されていないのに２枚に、つまりすべての写真が倍にコピーされています。
何だコレ？
その内、直るかな？
