ログインページの作成します。
監修者
竹村貴也
株式会社ファンリピートCEO
著書:「ChatGPTによるPythonプログラミング入門. AI駆動開発で実現する社内業務の自動化」
＼ ノーコード/ローコードやAI関連の情報をお届け ／
無料のBOLTメールマガジン
不定期でノーコード/ローコードやAI関連のお役立ち情報をお届けするメルマガです。
- ノーコード/ローコードの基礎・応用情報がわかる
- 個人利用やビジネスで生かせるAI活用方法がわかる
- 限定オファーや資料公開、ウェビナー情報がいち早く届く
ノーコード/ローコードを用いたシステム開発やAI利活用に興味がある方はぜひご登録ください！
ログインページを作成する
ページをクローンして作成する
新規ページを作成する場合で、既存のページと似たようなレイアウトのページを作成する場合は、既存ページをクローンして編集していくと効率的に構築できます。
この時、クローン元のレスポンシブ設定もコピーされます。
ログインページは新規会員登録ページとよく似たレイアウトのため、ページをクローンして作成しましょう。
ビジュアルエディタからページ一覧を表示し、「Add a new page…」をクリックします。
ポップアップでPage nameを「login」とし、Clone fromに「signup」を選択します。
「CREATE」をクリックするとページが複製されます。 singupと同じ内容が表示されていることが確認できます。
ワークフローを設定していた場合は、ワークフローも複製されます。
ページ、エレメントのスタイル等の設定もそのままコピーされます。
要素を配置する
ページをクローンしたので、不要なエレメントを削除し、必要なエレメントを追加しましょう。
不要なエレメントを削除する
新規登録ページの「username」はログインページに不要なので、Group Usernameを選択した状態で右クリックし、メニューからDeleteをクリックしてエレメントを削除します。
必要なエレメントを追加する
新規会員登録ページの「ログインはこちら」というリンクをコピーし、Linkエレメントをもう一つ追加します。
Link Loginを選択した状態で右クリックし、メニューから「Copy」をクリックします。再度右クリックし、メニューから「Paste」をクリックします。
このとき、元々のLinkエレメントに設定してあるレスポンシブの設定も引き継がれるので自動的に元々あったログインはこちらの下に配置されます。
複製したリンクエレメントは「パスワードを忘れた場合はこちら」というテキストに変更します。
各エレメントの名前を変更する
エレメントの名称は変更しなくても問題ありませんが、ワークフロー内で利用する時にわかりづらくなるので、それぞれ以下のように変更しておきます。
表示テキストの内容を変更する
ログインページに合わせて、エレメントの表示テキストを変更します。
これでログインページのレイアウトは完成です。
