マガジンのカバー画像

STUDIO学習はじめてみた。

27
ランディングページやWebサイトを作ることが出来るツール、STUDIOの使い方を0から学んでいくnoteです(^^♪ https://studio.design/ja/launch
運営しているクリエイター

#日記

STUDIOで自己紹介ポートフォリオサイト作ってみた💛

STUDIOで自己紹介ポートフォリオサイト作ってみた💛

おはようございます、yukiです💛

昨日と今日で、STUDIOを使って自己紹介ポートフォリオサイトを初めて作りました✨

URLはこちらです♪

初めて作ってみての感想ですが、エディタ画面でのデザインのチェックと、実際のイメージにズレがあって苦戦しました(笑)

お仕事が終わった後、8時間ほどで作成しました。ので
今日は早くお休みします!

特に私は今後、イベントのPRのためのWeb制作をした

もっとみる
【WEBサイトの上、固定ヘッダーナビ】STUDIO学習はじめてみた。#26日目

【WEBサイトの上、固定ヘッダーナビ】STUDIO学習はじめてみた。#26日目

こんにちは、yukiです♡

26日目の今日はSTUDIOで、固定ヘッダーナビ(※Webサイトの上部分)の作り方についてサクッとまとめます(^^♪

今回はロゴ(※企業ブランド例、今回はハート)とグローバルナビゲーションを【テキスト】機能を使って制作していきます。

1ヘッダー部分の中身を作る幅を100%に指定したボックスを作成し、ロゴをまずは左に配置します。
そして、グローバルナビゲーションのテ

もっとみる
【レイアウト(固定・絶対位置・相対)】STUDIO学習はじめてみた。#7日目

【レイアウト(固定・絶対位置・相対)】STUDIO学習はじめてみた。#7日目

こんにちは、yukiです♡

7日目の今日はSTUDIOのレイアウト(固定or絶対位置/相対)などについて学習した事を簡単にまとめていきます♪

▼赤い線を引いた下のところです。

①固定の配置とは?固定は、選択したボックスを画面の左上に固定する配置です。

BOCがレイヤーの番上の階層のときは、固定になります(^^♪

②絶対位置とは?選択しているBOXを、親のBOXの左上に配置するものです。

もっとみる
【共通部分のパーツ作成】STUDIO学習はじめてみた。#23日目

【共通部分のパーツ作成】STUDIO学習はじめてみた。#23日目

こんにちは、yukiです♡

23日目の今日はSTUDIOで共通部分のパーツを作成する方法について簡単にまとめます(^^♪

シンボル化について同じパーツ作りについては、【シンボル化】の機能を活用していきます。

作成したBOXをシンボル化として設定を実施して、名前を付けます。

そうすると、下記のスクリーンショットのように作成したパーツが出てきます。

ポイントと使い方シンボル化シンボル化したパ

もっとみる
【存在しない404&noindexページ】STUDIO学習はじめてみた。#22日目

【存在しない404&noindexページ】STUDIO学習はじめてみた。#22日目

こんにちは、yukiです♡

22日目の今日はSTUDIOの404ページ&noindexページについて簡単にまとめます(^^♪

①404ページの作り方存在しないページのURLを訪問した際の用意として404ページを作るには、画面左上の【タイプ】で404ページを押すことで簡単に作っていけます。

②検索結果に表示したくないときは?作業中で公開したくないときは、下記の【noindex】を設定していきま

もっとみる
【色を重ねる】STUDIO学習はじめてみた。#21日目

【色を重ねる】STUDIO学習はじめてみた。#21日目

こんにちは、yukiです♡

21日目の今日はSTUDIOの色を重ねる、について綴ります(^^♪

色についてBOXにBOXを重ねることで、画像の色合いを変更が出来ます。

▼before

▼after

具体的には画面にある、下記の機能を使って実施していきます。

グラデーションや透明度の指定も出来ます♪

以上です♡

応援のイイネをいただけたら、とても嬉しいです♪

【ドメイン設定無料と有料についてのポイント】STUDIO学習はじめてみた。#20日目

【ドメイン設定無料と有料についてのポイント】STUDIO学習はじめてみた。#20日目

こんにちは、yukiです♡

20日目の今日はSTUDIOのドメイン設定の無料と有料についてのポイントについて簡単にまとめます(^^♪

そもそもドメインて何?ドメインは、Webサイトの情報を表すもので、詳しくは下記ページの内容より引用させてくださいね。

ドメインとは、簡単に言えばインターネット上の住所のようなものです。企業のホームページや個人のブログサイトはその住所に建てられる「家」というイメ

もっとみる
【外部サービスとの連携で良いなと感じた点】STUDIO学習はじめてみた。#19日目

【外部サービスとの連携で良いなと感じた点】STUDIO学習はじめてみた。#19日目

こんにちは、yukiです♡

19日目の今日はSTUDIOを外部ツールと連携させる方法について学びました(^^♪

外部サービスとの連携については、ざっくりいうと2分類があります。

①Apps(有料で使えるもの)

②Appsを使用しない連携(無料プランでも使えるもの)

①Apps(有料で使えるもの)で例えば何が出来るか?
例えばで、Googleに特化したものや、クライアントに特に喜んでもらえ

もっとみる
【ページのTitle&Descriptionとは?】STUDIO学習はじめてみた。#18日目

【ページのTitle&Descriptionとは?】STUDIO学習はじめてみた。#18日目

こんにちは、yukiです♡

18日目の今日はSTUDIOのページのTitle&Descriptionについて簡単にまとめますね(^^♪

SEO対策が出来る!metaタグのTitle&Descriptionデザイン編集画面の右上、赤い丸を付けた部分を使って、SEO対策のためTitleやDescriptionの設定が出来ます♪

▼具体的には、左側がページ指定が出来る【ページ設定】で、右側がサイト

もっとみる
【ページのURLとは?】STUDIO学習はじめてみた。#17日目

【ページのURLとは?】STUDIO学習はじめてみた。#17日目

こんにちは、yukiです♡

17日目の今日はSTUDIOのページのURL(パス)&ページの名前の付け方について簡単にまとめます!

ページのURLになる部分作ったページのURLを設定したいときは、画面左上にある【パス】のところをクリックして、設定を行っていきます(^^)

▼赤い線を引いたところをチェックしてくださいね。

ページを管理するための名前についてページに名前をつけたいときは、左上の【

もっとみる
【タグ指定とは?】STUDIO学習はじめてみた。#16日目

【タグ指定とは?】STUDIO学習はじめてみた。#16日目

こんにちは、yukiです♡

16日目の今日はSTUDIOのタグ指定について簡単にまとめます!

STUDIOではBOX・TEXTの左上のタブをクリックすると、HTMLタグが表示されます(^^♪

BOXタグについて例えば、BOXにはheader・main・footer、divタグなどが用意されています!

▼こちらはBOXのイメージです!

赤線を引いたところを使って、どんなタグを付けたいか?指

もっとみる
【リンク&アンカーリンクとは?】STUDIO学習はじめてみた。#14日目

【リンク&アンカーリンクとは?】STUDIO学習はじめてみた。#14日目

こんにちは、yukiです♡ 

14日目の今日はSTUDIOのリンク&アンカーリンクの機能について簡単にまとめます(^^♪

リンクについてリンクを設定したいときは、下記の赤線の部分のリンク【ページ】【URL】から行えます。

①URL:外部ページのURLなどhttps://www.tech-commit.jp/

②電話番号:先頭に【tel】をつけて連絡先を入力する。

③メール送信:先頭に【m

もっとみる
【モーダル画面とは?】STUDIO学習はじめてみた。#13日目

【モーダル画面とは?】STUDIO学習はじめてみた。#13日目

こんにちは、yukiです♡ 

13日目の今日はSTUDIOのモーダルについて簡単にまとめます 

モーダルとは?モーダルは画面を指しています。

Webページ内で遷移を行わず、新しいウィンドウをその画面に新しく表示させる機能です♪

簡単な追加の仕方最初にモーダルを追加したいBOXを作ります!

今回はボタンで作成します。

次にページ追加の画面で【モーダル】の画面を選択してください。

そして

もっとみる
【テキスト・アイコン・画像スタイルの操作場所】STUDIO学習はじめてみた。#12日目

【テキスト・アイコン・画像スタイルの操作場所】STUDIO学習はじめてみた。#12日目

こんにちは、yukiです♡

4日目の今日はSTUDIO機能のテキスト・アイコン・画像スタイルの操作場所について簡単にまとめます!

テキストの場所テキスト※文字の操作場所は画面の左下の【T】の場所です。

テキストの装飾変更は下記の赤線の部分を使います。

アイコンの場所アイコンは、左下のハートマークを押すと、ハートが追加されます。

また、>のマークをクリックして【Icons】をクリックすると

もっとみる