記事一覧
LT大会の開催準備のTips～TechCommitのLT大会で培った知見共有～
こんにちは！TechCommitで毎月開催しているLT大会のサポートに入らせてもらっております、石黒友季子と申します♪
遅ればせながら、【LT大会の開催準備のTips】という題名の通り、お読みのあなたへ、今年一年のLT大会のサポートで培った知見を共有したいと思います(*^-^*)
LT大会を開催することに興味がある、開催を始めてみたいな～と思う方のお役に立てて頂ければ幸いでございます。
そも
STUDIOで自己紹介ポートフォリオサイト作ってみた💛
おはようございます、yukiです💛
昨日と今日で、STUDIOを使って自己紹介ポートフォリオサイトを初めて作りました✨
URLはこちらです♪
初めて作ってみての感想ですが、エディタ画面でのデザインのチェックと、実際のイメージにズレがあって苦戦しました（笑）
お仕事が終わった後、８時間ほどで作成しました。ので
今日は早くお休みします！
特に私は今後、イベントのPRのためのWeb制作をした
【WEBサイトの上、固定ヘッダーナビ】STUDIO学習はじめてみた。#26日目
こんにちは、yukiです♡
26日目の今日はSTUDIOで、固定ヘッダーナビ（※Webサイトの上部分）の作り方についてサクッとまとめます(^^♪
今回はロゴ（※企業ブランド例、今回はハート）とグローバルナビゲーションを【テキスト】機能を使って制作していきます。
1ヘッダー部分の中身を作る幅を100%に指定したボックスを作成し、ロゴをまずは左に配置します。
そして、グローバルナビゲーションのテ
【お問い合わせフォームの作り方】STUDIO学習はじめてみた。#25日目
こんにちは、yukiです♡
25日目の今日はSTUDIOでのお問い合わせフォームの作り方についてザックリまとめます！
フォームの追加についてフォームは左タブの【Form】から作っていく事が出来ます(^^♪
元々は英語表記でパーツが用意されているのですが、日本語記載に自分で修正をする事が簡単に出来ます(^^♪
▼日本語に直した例です。
フォーム結果の共有、Googleとの外部連携
メールア
【ハンバーガーメニューの作り方】STUDIO学習はじめてみた。#24日目
こんにちは、yukiです♡
24日目の今日はSTUDIOのハンバーガーメニューの作り方🍔について記載します！
ハンバーガーメニューの作成の流れハンバーガーメニューを作るときの流れは、下記のような手順です。
①ハンバーガーメニューのアイコンを配置する。
②右側から表示される部分をモーダルが画面で制作する。
③右側から表示される部分に、＜閉じるボタン＞を配置する。
④リンクを繋ぐ。
【共通部分のパーツ作成】STUDIO学習はじめてみた。#23日目
こんにちは、yukiです♡
23日目の今日はSTUDIOで共通部分のパーツを作成する方法について簡単にまとめます(^^♪
シンボル化について同じパーツ作りについては、【シンボル化】の機能を活用していきます。
作成したBOXをシンボル化として設定を実施して、名前を付けます。
そうすると、下記のスクリーンショットのように作成したパーツが出てきます。
ポイントと使い方シンボル化シンボル化したパ
【存在しない４０４＆noindexページ】STUDIO学習はじめてみた。#22日目
こんにちは、yukiです♡
22日目の今日はSTUDIOの404ページ＆noindexページについて簡単にまとめます(^^♪
①404ページの作り方存在しないページのURLを訪問した際の用意として404ページを作るには、画面左上の【タイプ】で404ページを押すことで簡単に作っていけます。
②検索結果に表示したくないときは？作業中で公開したくないときは、下記の【noindex】を設定していきま
【色を重ねる】STUDIO学習はじめてみた。#21日目
こんにちは、yukiです♡
21日目の今日はSTUDIOの色を重ねる、について綴ります(^^♪
色についてBOXにBOXを重ねることで、画像の色合いを変更が出来ます。
▼before
▼after
具体的には画面にある、下記の機能を使って実施していきます。
グラデーションや透明度の指定も出来ます♪
以上です♡
応援のイイネをいただけたら、とても嬉しいです♪
【ドメイン設定無料と有料についてのポイント】STUDIO学習はじめてみた。#20日目
こんにちは、yukiです♡
20日目の今日はSTUDIOのドメイン設定の無料と有料についてのポイントについて簡単にまとめます(^^♪
そもそもドメインて何？ドメインは、Webサイトの情報を表すもので、詳しくは下記ページの内容より引用させてくださいね。
ドメインとは、簡単に言えばインターネット上の住所のようなものです。企業のホームページや個人のブログサイトはその住所に建てられる「家」というイメ
【外部サービスとの連携で良いなと感じた点】STUDIO学習はじめてみた。#19日目
こんにちは、yukiです♡
19日目の今日はSTUDIOを外部ツールと連携させる方法について学びました(^^♪
外部サービスとの連携については、ざっくりいうと２分類があります。
①Apps(有料で使えるもの)
②Appsを使用しない連携（無料プランでも使えるもの）
①Apps(有料で使えるもの)で例えば何が出来るか？
例えばで、Googleに特化したものや、クライアントに特に喜んでもらえ
【ページのTitle＆Descriptionとは？】STUDIO学習はじめてみた。#18日目
こんにちは、yukiです♡
18日目の今日はSTUDIOのページのTitle＆Descriptionについて簡単にまとめますね(^^♪
SEO対策が出来る！metaタグのTitle＆Descriptionデザイン編集画面の右上、赤い丸を付けた部分を使って、SEO対策のためTitleやDescriptionの設定が出来ます♪
▼具体的には、左側がページ指定が出来る【ページ設定】で、右側がサイト
【ページのURLとは？】STUDIO学習はじめてみた。#17日目
こんにちは、yukiです♡
17日目の今日はSTUDIOのページのURL（パス）＆ページの名前の付け方について簡単にまとめます！
ページのURLになる部分作ったページのURLを設定したいときは、画面左上にある【パス】のところをクリックして、設定を行っていきます(^^)
▼赤い線を引いたところをチェックしてくださいね。
ページを管理するための名前についてページに名前をつけたいときは、左上の【
【タグ指定とは？】STUDIO学習はじめてみた。#16日目
こんにちは、yukiです♡
16日目の今日はSTUDIOのタグ指定について簡単にまとめます！
STUDIOではBOX・TEXTの左上のタブをクリックすると、HTMLタグが表示されます(^^♪
BOXタグについて例えば、BOXにはheader・main・footer、divタグなどが用意されています！
▼こちらはBOXのイメージです！
赤線を引いたところを使って、どんなタグを付けたいか？指
【プレビューとは？】STUDIO学習はじめてみた。#15日目
STUDIO学習はじめてみた。
こんにちは、yukiです♡
15日目の今日はSTUDIOのプレビューについて簡単にまとめます！
プレビューについてプレビューについては、右上の赤い線を引いた【LivePreview】をクリックして行います。
次に下記の画面が出てきますので、【Start】を押してください。
プレビューの共有方法についてそうすると、プレビュー画面のQRコードやＵＲＬが表示され
【リンク＆アンカーリンクとは？】STUDIO学習はじめてみた。#14日目
こんにちは、yukiです♡
14日目の今日はSTUDIOのリンク＆アンカーリンクの機能について簡単にまとめます(^^♪
リンクについてリンクを設定したいときは、下記の赤線の部分のリンク【ページ】【URL】から行えます。
①URL：外部ページのURLなどhttps://www.tech-commit.jp/
②電話番号：先頭に【tel】をつけて連絡先を入力する。
③メール送信：先頭に【m