2025/10/22
［ 初回公開日：
2024/11/28
］
テンプレート変更ガイド｜THEテックカンパニーMini
ロゴの差し替え
ヘッダー
該当箇所：レイヤー ＞ <header>#page-top（ヘッダー） ＞ <a>（ロゴ） ＞ <img>
デザイン上の該当箇所をダブルクリックし、任意の画像をアップロードの上変更。
右ウィンドウの「Alt」部分を自社名に変更してください。
ロゴのサイズ変更
上部の「<a>（ロゴ）」横幅210pxの箇所を変更することでサイズの変更が可能。
背景固定アニメーションの変更
該当箇所：レイヤー ＞ <固定背景アニメーション>
デザイン上の該当箇所をダブルクリックし、左と右で2つのアニメーションを利用しているので、そこから変更が可能です。
アニメーションにはLottieFiles（以下：Lottie）というサービスを利用しています。
グラーデーションのカラーを変更したい場合
これを行おうとする場合、LottieFilesの有料プランの契約。該当ファイルの変更・差し替えが必要となるため、複雑な対応が必要となります。
手順としては下記です。
1.下記URLよりLottieFilesの有料プラン（Individual）を契約。
https://lottiefiles.com/jp/pricing
2.下記URLのページにある100番目くらいのモノクロバージョンのアニメーションを「Save to workspace」でダウンロード。（添付画像参照）
3.ダッシュボードから該当アニメーションを選択し、Color PaletteのPreset palettesより好きなカラーを選んで変更。
ここに好きな色がない場合は右上の鉛筆マーク「open in Lottie Editer」で好きな色に変更して保存。
4.コードを取得し、Studioに埋め込む
下記URLの3番以降の手順。
サービスの変更と出し分け
サービス部分のみ、外部リンクありとなしのバージョンで2つのブロックを用意しています。
通常はリンクなしのブロックを表示し、リンクありのブロックを非表示にしている状態です。
自社サービスやソリューションがある場合など、外部サービスサイトへのリンクがある際に活用いただくことを想定しています。
リンクなしのブロックのテキスト変更
該当箇所：レイヤー ＞ <main>（メインコンテンツ）＞ <div>#service（サービス） ＞ <div>（内容） ＞ <div>（サービス） ＞ <ul>（リンクなし）
デザイン上の該当箇所をクリックし、左側パネル「リスト」内で内容の変更、追加、入れ替えなどの変更が可能。
「＋New」ボタンで新しいメニューの追加も可能です。
リンクありへの切り替え
上記箇所にある「リンクなし」を左上の「表示」アイコンにて全てのデバイスのチェックを解除。
「リンクなし」の一つ上にある「リンクあり」を「表示」アイコンにて全てのデバイスにチェックを入れることで表示の切り替えが可能です。
内容の変更、追加、入れ替えなどについては上記と同様の方法にて可能です。
リンクありの見え方
Valueの内容変更
該当箇所：レイヤー ＞ <main>（メインコンテンツ）＞ <div>（強み） ＞ <div>（内容） ＞ <div>（一覧） ＞ <ul>（List）
デザイン上の該当箇所をクリックし、左側パネル「リスト」内で内容の変更、追加、入れ替えなどの変更が可能。
「＋New」ボタンで新しいメニューの追加も可能です。
Woksの内容変更
該当箇所：レイヤー ＞ （メインコンテンツ）＞ <div>（実績/会社概要） ＞ <div>#works（実績） ＞ <div>（強み） ＞ <ul>（List）
デザイン上の該当箇所をクリックし、左側パネル「リスト」内で内容の変更、追加、入れ替えなどの変更が可能。
「＋New」ボタンで新しいメニューの追加も可能です。
ボタンのリンク先変更
下にある「すべての実績」ボタンをダブルクリックし、左側パネル「プロパティ」内でリンク先やボタンの名称の変更が可能です。
テキスト量によってボタンの幅が足りなくなった場合は上部の「横幅」にてサイズを調整してください。
※横幅を変更すると採用情報のブロックのボタンの横幅も同様のサイズとなります。
Companyの内容変更
該当箇所：レイヤー ＞ （メインコンテンツ）＞ <div>（実績/会社概要） ＞ <div>#company（会社概要） ＞ <div>（概要） ＞ <ul>（List）
デザイン上の該当箇所をクリックし、左側パネル「リスト」内で内容の変更、追加、入れ替えなどの変更が可能。
「＋New」ボタンで新しいメニューの追加も可能です。
※住所の「Googleマップで見る」が不要の場合はリスト内の「Googleマップ」の青くオンになっている箇所をオフにしていただくことで非表示となります。
Recruitのリンク先変更
「採用情報」ボタンをダブルクリックし、左側パネル「プロパティ」内でリンク先やボタンの名称の変更が可能です。
テキスト量によってボタンの幅が足りなくなった場合は上部の「横幅」にてサイズを調整してください。
※横幅を変更すると実績のブロックのボタンの横幅も同様のサイズとなります。
We Are Hiringの文字変更
該当箇所：レイヤー ＞ （メインコンテンツ）＞ <div>#recruit（採用情報） ＞ <div>（カルーセル）
デザイン上の該当箇所をクリックし、左側パネル「リスト」内「TEXT」の部分のテキスト内容を変更することで変更が可能です。
※文章量が長すぎる場合は2行になる可能性があるため、その場合はカルーセルの横幅を現状の「100vh」よりも大きい数値にすることで調整が可能です。
Newsの内容変更方法
該当箇所：レイヤー ＞ （メインコンテンツ）＞ <div>#news（お知らせ） ＞ <div>（内容） ＞ <div>（お知らせ） ＞ <ul>（List）
デザイン上の該当箇所をクリックし、左側パネル「リスト」内で内容の変更、追加、入れ替えなどの変更が可能。
「＋New」ボタンで新しいメニューの追加も可能です。
リンクありの場合とURLの変更方法
お知らせに対して外部リンクがある場合は「リンクあり」をオンにして、「URL」にリンク先のURLを入力することで、リンクの設定が可能です。
外部リンクがない場合は「リンクあり」をオフにしてください。
テンプレートについてと公開までの流れ
下記ブログに詳細情報を掲載しているので、こちらもぜひご覧ください。https://www.itplus.co.jp/blog/studio-the-tech-company-mini
この記事を書いた人
