{ "componentChunkName": "component---src-templates-post-js", "path": "/creating_a_header_in_studio/", "result": {"data":{"ghostPost":{"id":"Ghost__Post__6104ad0d3986b000013a4819","title":"NoCodeでサイト構築できる「STUDIO」でヘッダーのサブメニューを実装する","slug":"creating_a_header_in_studio","featured":false,"feature_image":"https://images.unsplash.com/photo-1544731612-de7f96afe55f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE0fHxjb21wdXRlcnxlbnwwfHx8fDE2Mjc2OTY0Mzc&ixlib=rb-1.2.1&q=80&w=2000","excerpt":"Photo by Aleksander Vlad\n[https://unsplash.com/@aleksowlade?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit] \n/ Unsplash\n[https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit]\n地方のエンジニアの少ない中小企業で副業を行っていて、現場のメンバーでもメンテナンスできるようなNoCodeのサイト制作が求められ、最近よくSTUDIOを使っています。\nSTUDIO:https://studio.design/ja\n\nこんなメニューを作成します↓\n\n全体の構成はこのような感じです↓\n\nベースとなるヘッダーを用意する\nサブメニューの要素を追加する\n今回はABOUTを選択し、2回グループ化します。\n「commandキー+G」をすると、グループ化できます。2回もグループ化するなんて謎かもしれませんが、この後にいn\nhoverという機能を利用するた","custom_excerpt":null,"visibility":"public","created_at_pretty":"31 July, 2021","published_at_pretty":"04 February, 2021","updated_at_pretty":"30 May, 2022","created_at":"2021-07-31T10:53:17.000+09:00","published_at":"2021-02-04T11:20:00.000+09:00","updated_at":"2022-05-30T16:23:41.000+09:00","meta_title":"NoCodeでサイト構築できる「STUDIO」でヘッダーのサブメニューを実装する | 株式会社アンチパターンエンジニアブログ","meta_description":"株式会社アンチパターンのエンジニアブログ。\n地方のエンジニアの少ない中小企業で副業を行っていて、現場のメンバーでもメンテナンスできるようなNoCodeのサイト制作が求められ、最近よくSTUDIOを使っています。","og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Ami Yamamoto","slug":"ami","bio":null,"profile_image":null,"twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Ami Yamamoto","slug":"ami","bio":null,"profile_image":null,"twitter":null,"facebook":null,"website":null},"primary_tag":{"name":"STUDIO","slug":"studio","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"STUDIO","slug":"studio","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"Photo by Aleksander Vlad\n[https://unsplash.com/@aleksowlade?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit] \n/ Unsplash\n[https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit]\n地方のエンジニアの少ない中小企業で副業を行っていて、現場のメンバーでもメンテナンスできるようなNoCodeのサイト制作が求められ、最近よくSTUDIOを使っています。\nSTUDIO:https://studio.design/ja\n\nこんなメニューを作成します↓\n\n全体の構成はこのような感じです↓\n\nベースとなるヘッダーを用意する\nサブメニューの要素を追加する\n今回はABOUTを選択し、2回グループ化します。\n「commandキー+G」をすると、グループ化できます。2回もグループ化するなんて謎かもしれませんが、この後にいn\nhoverという機能を利用するために必要になります。\n\nABOUTのテキストと並列になる場所にテキストを追加します。\n更に追加したテキストをグループ化します\nデフォルトだとABOUTと追加したテキストは横並びになるので、縦並びになるよう修正します\n\n下の矢印を選択すると縦並びになる好きな数だけメニューを追加します\n\nサブメニューが入ったグループの配置を「相対位置」から「絶対位置」に変更し、好みの位置に移動させます。更に色や形を整えていきます\n\nsub menu group\n・縦幅： 50px\n・横幅：280%\n・塗り：#EEEEEE\n\nメニューテキスト\n・左右のマージン：10px\n\nホバーの設定をする\nここから、「ABOUT」をホバーしたときのみサブメニューが表示されるように設定をするのですが、その前の準備としてABOUTを囲っている外側のグループ（out\nside groupと呼びます）のホバー設定をします。\n\nこうすると、見た目上は変化がないのですがout side groupの中にある要素がin hoverという機能を使えるようになります。\n\n次に、サブメニュー（menu1,menu2,menu3）は通常時は表示されないように設定するため、sub menu\ngroupを選択し、モーションの透明度を0に設定します。\n\nこのとき、一緒にスケールのY軸を0、原点を上の真ん中を選択すると、表示されたときの動きがいい感じになります。\n\n最後にsub menu group を選択し、コンディションから「in:hover」を選択した状態でモーションの透明度を1、スケールのY軸を1に設定します。\n\n以上で設定完了です。\nライブプレビューで様子を見てみましょう！\n\nできてますね！\n\n最後に\nNoCodeのツールですが、かなり細かいところまで表現することができるSTUDIO、エンジニア・デザイナーじゃないと理解が難しい概念などたまにありますが、テキストの修正やブログの記事更新などは誰でも簡単にできてしまいます！\nわからないところはチャットで質問できるところもありがたいポイントです。\n\nサイトのテンプレートなども豊富で、サクッとサイトを作りたいときの手段として一つ持っていてもいいかと思います！","html":"

Photo by Aleksander Vlad / Unsplash

地方のエンジニアの少ない中小企業で副業を行っていて、現場のメンバーでもメンテナンスできるようなNoCodeのサイト制作が求められ、最近よくSTUDIOを使っています。
STUDIO:https://studio.design/ja

こんなメニューを作成します↓

全体の構成はこのような感じです↓

ベースとなるヘッダーを用意する

サブメニューの要素を追加する

今回はABOUTを選択し、2回グループ化します。
「commandキー+G」をすると、グループ化できます。2回もグループ化するなんて謎かもしれませんが、この後にいn hoverという機能を利用するために必要になります。

ABOUTのテキストと並列になる場所にテキストを追加します。
更に追加したテキストをグループ化します
デフォルトだとABOUTと追加したテキストは横並びになるので、縦並びになるよう修正します

下の矢印を選択すると縦並びになる

好きな数だけメニューを追加します

サブメニューが入ったグループの配置を「相対位置」から「絶対位置」に変更し、好みの位置に移動させます。更に色や形を整えていきます

sub menu group
・縦幅： 50px
・横幅：280%
・塗り：#EEEEEE

メニューテキスト
・左右のマージン：10px

ホバーの設定をする

ここから、「ABOUT」をホバーしたときのみサブメニューが表示されるように設定をするのですが、その前の準備としてABOUTを囲っている外側のグループ（out side groupと呼びます）のホバー設定をします。

こうすると、見た目上は変化がないのですがout side groupの中にある要素がin hoverという機能を使えるようになります。

次に、サブメニュー（menu1,menu2,menu3）は通常時は表示されないように設定するため、sub menu groupを選択し、モーションの透明度を0に設定します。

このとき、一緒にスケールのY軸を0、原点を上の真ん中を選択すると、表示されたときの動きがいい感じになります。

最後にsub menu group を選択し、コンディションから「in:hover」を選択した状態でモーションの透明度を1、スケールのY軸を1に設定します。

以上で設定完了です。
ライブプレビューで様子を見てみましょう！

できてますね！

最後に

NoCodeのツールですが、かなり細かいところまで表現することができるSTUDIO、エンジニア・デザイナーじゃないと理解が難しい概念などたまにありますが、テキストの修正やブログの記事更新などは誰でも簡単にできてしまいます！
わからないところはチャットで質問できるところもありがたいポイントです。

サイトのテンプレートなども豊富で、サクッとサイトを作りたいときの手段として一つ持っていてもいいかと思います！

","url":"https://ghost.tech.anti-pattern.co.jp/creating_a_header_in_studio/","canonical_url":null,"uuid":"33654f11-2cf1-45ff-acec-3fdda502a07e","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"6104ad0d3986b000013a4819","reading_time":3}},"pageContext":{"slug":"creating_a_header_in_studio"}}, "staticQueryHashes": ["176528973","2358152166","2561578252","2731221146","4145280475"]}