【STUDIO】STUDIOのページ画面でできること

皆さんお疲れ様です！STUDIO制作が得意な「そうし」です！

前回は「案件受注のため今までやってきたこと、これからやろうと思っていること」という内容でしたので、今日からSTUDIOの内容に戻ろうと思います！

※カバー画像は、STUDIOと何の関係もありません。。ネタ切れです笑 

今回は、「STUDIOのページ画面でできること」について紹介していこうと思います！

CMS機能などについては、また後日紹介しようと思います！

ではさっそくみていきましょう！

STUDIOでサイトを構築したときにページ画面でできること

・問い合わせフォーム関連

STUDIOでは、テキスト入力欄やラジオボタン、セレクトボックス、チェックボックス、ファイルアップロード、同意確認ボタン・送信ボタンの設置など簡単にできます。

⇒入力タイプ

フリー入力、電話番号、Eメールが用意されています。

フォーム送信時に、フリー入力はなんでも入力可能、電話番号は電話形式、Eメールはアドレス形式のみ受け付けます。

⇒必須項目

必須項目を設定することができます。項目を必須に設定すると、入力してない状態では、フォームの送信ができなくなります。

⇒プレースホルダー

プレースホルダーを設定することができます。設定をすると、フォームの入力欄に設定した文字が表示されます。

⇒ファイルアップロード

ファイルアップロードボックスの設置をすることができます。

アップロードされたファイルは、管理画面からダウンロードすることができます。文書、画像、動画、音声、PDFやエクセル、CSVなどのファイルを送ることができます。

※1つのファイルアップロードボックスにつき1ファイルまで、20MBが上限です。

⇒フォームのスタイル編集

フォームの各ボックスのスタイルやレイアウトを編集することができます。

※ラジオボタンやチェックボックスなど、一部制限がかかるパーツがあります。

・各種サービスの埋め込み

Google Map、Youtube、Vimeo、Facebook、X、Spotify、CodePen、SlideShare、formrun、Fireworkはメニューの「埋め込み」から埋め込むことができます。

上記以外のサービスでもiframe用のコードを使えば、埋め込むことができます。

・アニメーションの設定

STUDIOでは、「appear」と「hover」の2種類のアニメーションの設定ができます。

appearは、ページが表示されたとき1度だけ動くアニメーションで、hoverは、マウスカーソルが各要素に置かれたときに動くアニメーションです。

よくある動きとしては、ページが表示されたときにに画像や文字がふわっと現われたり、マウスがリンクに当たった時に、下にラインが表示される動きがよく見られます。

・フォントの設定

STUDIOでは、Google Fonts、TypeSquare、FONTPLUSが提供する約2200種類のフォントが使用できます。日本語のフォントもたくさんあるので、よほどこだわってない限りは大丈夫でしょう。

・リダイレクトの設定

STUDIOでは、リダイレクトを設定すると、指定のページやURLに遷移させることができます。

・ドロップダウンメニュー

STUDIOでは、ドロップダウンのメニューを作ることができます。

ドロップダウンメニューとは、カーソルを合わせると複数選択肢が表示されるメニューのことです。

・アコーディオンメニュー

STUDIOでは、ドロップダウンのメニューを作ることができます。

アコーディオンメニューとは、クリックすると説明文章が出てくるようなメニューです。よくある質問などによく見られます。

・カルーセルを自動再生する

STUDIOでは、カルーセルの再生も可能です。

カルーセルは、クリックなどの操作により、複数のコンテンツを横にスライドさせる仕組みのことです。

・モーダルの作成

STUDIOでは、モーダルウィンドウを作ることができます。

モーダルとは、Webサイトやアプリの最前面に表示され、何か操作を行わない限り消えない画面のことです。

STUDIOでは、スマホメニューに使ったりします。

まとめ

以上、STUDIOを使ってページ画面でできることや画面ごとの具体的な機能紹介しました！

次回は今回とは逆の、STUDIOを使ってページ画面でできないことを紹介しようと思います。

いつも通り私の出品ページも載せてますので、ちょってでも見ていってくれると嬉しいです！

↓私の出品ページ

今回は以上です。

ありがとうございました！