Transcription
このビデオでは、すべてのウェブデザイナーが知っておくべき奥行きのトリックを紹介します。それに気づくと、どこにでもあるように見え始めます。そこで、このトリックを使っているウェブサイトをいくつか紹介します。それが何かわかりますか？そして、このサイトはそれを非常にうまくやっています。このサイトもそうです。そして、はい、これらすべてです。そして、ここにある最後のものは、後で取っておこうと思います。なぜなら、それが私のお気に入りのものだからです。ですから、それまでお待ちください。しかし、それらすべてに共通するものは何だったか推測できましたか？もしそうでなければ、私がこれを行うと非常に明確になります。比較すると、突然非常に平坦に感じますよね。だから、秘密はテキストをオブジェクトの後ろに配置することです。なぜなら、それは奥行き、次元を加え、その「すごい」要素を増やすからです。しかし、この効果を実際にどのように作成するのでしょうか？さて、それはまさにこれから数分であなたに見せることです。そこで、ここで新しい空のページがあり、どのように行うかを見せることができます。なぜなら、基本的にこれを行う方法は2つあるからです。ですから、まず最も簡単なものから始めましょう。これは、このビデオの作業を始めるまで、実際には存在を知りませんでした。さて、今、私たちは1つの次元で通常の画像背景を持っています。レイヤーはありません。ですから、今、このテキストを山の後ろに配置することはできません。しかし、このビデオを作成している間に、私の友人の一人がこのウェブサイトについて言及しました。ログインや支払いは必要ありません。ただ使って、二度と振り返らないだけです。そこで、試してみて、この画像をアップロードしました。そして、ご覧のとおり、それは自動的に私のテキストをこの山の後ろに配置しました。そして、ここに別のクールな例があります。だから、これをドラッグするだけです。そして、下に、位置を変更できます。ズームアウトさせてください。そして、テキストを適切な場所に配置します。ここのようなものです。しかし、戻って新しい画像をアップロードすると、それほど良く見えないことがわかります。しかし、前にも言ったように、これをさらにリアルに見せる方法があります。しかし、それは、例えばCanvaを使用している必要があります。だから、ここに、背景全体を削除できる機能があります。だから、[音楽]今、下に1つのレイヤーと、ここにもう1つのレイヤーがあることがわかります。だから、戻ってそれらをアップロードしましょう。ちなみに、ここで私がしたように、背景を削除するためにChat GPTを使用することもできます。それも可能です。新しい画像を素早くアップロードして、背景画像として追加しましょう。そして、新しい画像をドラッグするだけで、これは山だけであるはずです。そして、トリックは詳細設定に入り、この位置を見つけて絶対値に設定することです。そうすれば、山を移動させて中央に配置できます。しかし、絶対位置を使用すると、画面サイズが変更されたときに問題が発生することを覚えておいてください。ですから、調整してレスポンシブにするか、テキストを画像に焼き付ける他の方法を使用するだけであることを覚えておいてください。次に、セットインデックスが最初のレイヤーであることを示すものを下に追加する必要があります。なぜなら、私たちは山の後ろにタイトルを置きたいからです。だから、今、このタイトルが実際に山の後ろにあることがわかります。今、それを見ることができません。少し大きくすることができます。だから、ここにあります。だから、素早くスタイルを設定しましょう。はい、これで白く、より大きなフォントになりました。そして、それを書き直し、少し大きくします。そして、ボーナストリックとして、実際にもう1つの画像を追加できます。それはただの影で、見出しと山の後ろに配置されているので、さらに際立ちます。さて。だから、今、あなたが最初に見たとおりに、残りのデザインを構築しましょう。もしあなたがこれを作成するためにどのソフトウェアを使っているのか疑問に思っているなら、私のバックエンドを見せてください。なぜなら、私はWordPressを使っていて、これらは私が使うプラグインです。私はElementorページビルダーの無料版とプロ版の両方を使っています。なぜなら、このレイヤー機能を実現するにはプロ版が必要だからです。そして、私は実際にもう1つのプラグインしか使っていません。それは、すべてが速くスムーズにロードされるようにするキャッシュプラグインで、WP Rocketと呼ばれています。ここでチェックできます。そして、これらのプラグインの両方のリンクを下の説明に記載しておきます。戻りましょう。だから、ここにテキストコンテンツを追加しましょう。そして、ここにコンテンツを追加しましょう。このガラスモルフィズム効果についてビデオを作るべきかどうか教えてください。それは本当にクールだと思います。だから、ここにさらに1つ追加しましょう。そして、この見出しは間違ったフォントだと思います。だから、それを変更しましょう。はい、素晴らしいです。それははるかに良くなりました。そして、この見出しは実際に動いています。ですから、もしあなたが興味があるなら、詳細設定の中のカスタムCSSに、これを追加したことがわかります。そして、それは無限に続き、見出しを常に拡大・縮小しています。さて、ここにヘッダーを追加しましょう。だから、ここのメニューもこのガラスモルフィズムです。さて、今、最後の1つだけが必要です。それは下にあります。下にスクロールできることを示すアイコンが必要です。はい、これで完了です。だから、今、これを公開して表示しましょう。素晴らしい、これで完了です。しかし、最後に、このビデオの早い段階で、このトリックを使った私のお気に入りのデザインを見せると約束しました。そして、それはこれです。私はこれが本当に好きです。なぜなら、ここに見られるように、スクロールトリガーでもあるからです。そして、はい、このレイヤーコンセプトのおかげで、この製品がさらに際立っています。ですから、もしこのビデオが好きなら、この他のビデオを見てください。そこで、本当に予期しないことが起こりました。