Studio 制作メモ – 知っておくと役立つポイント集

この記事は、ノーコードツールの Studio で制作する中でのつまづきや気づき、調べたことのメモを簡単にまとめた、私自身の備忘録です。

誰かの「困った」を解決するきっかけになればと思い、これまで個人的に残していたメモを公開用としてまとめていくことにしました。

あくまで個人のメモのため、記事として多少粗い部分もあるかもしれませんが、ご了承ください。

タブの作り方

シンプルタブの作り方（まずはデザイン）

1. 100%のボックス用意
2. 内側シャドウ：Y軸・５px 色付け・背景白
3. 中にボックス作り、内側シャドウ：Y軸・５px 色付け・背景白・幅オート
4. フォント入れてフォントのボックスの上下を広げる
5. ホバーつけてコピペ
6. タブの見た目が完成

作ったタブの切り替え方法（動きの付け方）

1. 切り替わる要素をタブボタンごと用意し下に並べていく。
   このときタブのジャンルごとに［div］で囲う。
2. 100pxほど上にパディングをつける（ページないリンクのうごきをするため、上にいかないようにするため）
3. 全てをひとつの［div］に入れる
4. 横並びに変更
5. 左上にあるボタンの［はみだし］→［非表示］の順にクリック
6. 下の切り替わる要素にIDをつける
7. 上のボタンに紐づけるIDのリンクを入れる
8. 完成

プレビューで%を変更しても変わらない時

一旦ピクセルにしてパーセントに戻すと反映される

Studioのシェアボタンの設置方法について

Studioのシェアボタンはリンクから設定するしかない。
下記のリンクを入れる。

http://twitter.com/share?url=[シェアするURL]&text=[ツイート内テキスト]&via=[ツイート内に含むユーザ名]&related=[ツイート後に表示されるユーザー]&hashtags=[ハッシュタグ]

ホバー設定には親と子がある（inホバーについて）

親要素にホバーをつけることで、子要素が［inホバー］とされ、ホバー設定ができるようになる。
Studio.Help（Studio公式サイト）に詳細あり

モーダル式の検索ページの作り方

1. 動的ページにある［検索ページ CMS］をクリック
2. 上記のページのレイアウトを整える
3. モーダルページを追加
4. 追加から検索ボックスをモーダルにいれる
5. 検索設定は自動でされてるのでもう完了

ページ内リンクが固定ヘッダに隠れる場合

パディングをつけると解決する。

1. 記事の場合、内部リンクが付いている見出しをクリック
2. １番上のタブをボックスに切り替えパディングを設定する
3. 完了

タグの絞り込み機能の設定方法

1. 動的ページのタグを選択
2. ［追加］→［CMS］で記事モデルを追加
3. 左のタブをレイヤーに切り替え（２）で追加したコンテンツを選択するとリストが出てくる
4. フィルターをタグ、フィルター条件に青文字の「Dynamic」に書かれたものが出ているのでそれをクリック
5. 完了

左上の青文字でタグの切り替えができる。それを切り替えると、タグごとに適用された記事のみが表示されることを確認できる。
また、タグ設置箇所のリンクはCMSタグを選択すると自動で該当のものへリンクされるようになる

画像をボックス内でスクロールする方法

1. ［追加］からボックスを用意（幅・高さを整える）
2. ［追加］からimageを追加、（１）のボックスのなかにドラッグ＆ドロップ（幅・高さを整える）
3. （１）のボックスを選択した状態で［はみ出し］→［スクロール］の順にクリック
4. 完成

Studioの細かな仕様に関するメモ

• トップで調整した一覧をレイアウトを他ページに反映させたい時は該当のタグを選択した状態で、できているデータをコピペすれば反映される。
• ［div］で囲いたい時は⌘＋G

Studio 構築中に困った時に確認してみると良いポイント

プレビューでは確認できるのに公開した時に表示されない場合

Studio のCMSは、プレビューでは表示される画像が公開した時に非表示になる場合があります。
そんな時は該当のCMSが公開になっているか確認。（緑丸が公開されている状態）
下書きになっていると画像が表示されない。（青丸が下書きの状態）

公開しているのに、やっぱりサイトに反映されない場合

画像サイズが大きすぎるとサイトに反映出来ない場合があります。
その場合は画像を一旦、サーバーにおきstudioのCMSの管理画面に画像のURLを入力することで画像を表示することができます。手順は下記の通りです。

1. CMSで［テキスト］のプロパティ追加
2. （１）で生成されたボックスにURLを入力
3. デザインエディタでimgを追加
4. 画像の左ボックスにプロパティから先ほど追加したテキストを選択（名前を画像URLなどに変更しておくと分かりやすい）
5. 完了

Studio で例えばWebサイト全体の縦長のスクショ等、大きな画像は使うと画質が悪くなったり、小さく表示されたりなどうまくサイトに反映されないことあります。
その場合はサーバーを用意しそこにアップロードした画像のURLを指定してサイトに反映する方法がおすすめです。

以前はGoogleドライブ等のクラウドサービスにアップロードしたURLでうまく反映されていたようですが、2024年現在は反映出来ませんでした。
なので現在はサーバー契約する必要があります。

プレビューでは反映されるマージンが公開したサイトで反映されない時

パディングに変更すると反映される