ヘルプセンター
ヘルプセンター
入門
Tildaの仕組み
新しいページを作成する
ページをコピーする
ページを転送する
ページを並べ替える
サイト設定
ドメイン名を購入する
ドメイン名を接続する
DNS を設定する
カスタム ドメイン エラーのトラブルシューティング
ホームページ
ヘッダーとフッター
ウェブサイトのフォントを設定する
コードのエクスポート
プロジェクト譲渡
無料の tilda.ws サブドメイン
色の設定
URL リダイレクトの作成
HTTPS のセットアップ
ページ フォルダ
ページ編集
ナビゲーション メニューを追加する
アンカーと内部リンク
モバイル デバイスでの表示
HTMLコードを埋め込む
Google マップを追加
多言語ウェブサイトの作成
オンラインで公開するための画像の準備
カバーを売り込む
ノンブレークスペース&ソフトハイフン
ページの公開
フィードバック ウィジェットを追加する
Facebookでプレビュー
コメント セクションを追加する
Instagram フィードを埋め込む
投稿一覧または目次ページ
オンラインストアと支払い
オンラインストアと支払い処理
オンライン ストアに商品を追加する
ショッピング カートの設定
製品の直販
支払いシステムの割り当て
Stripeを設定する
PayPal を設定する
2Checkoutを設定する
注文通知の送信
オンライン決済システムなしで販売する
単一の製品の販売
製品バリエーションを追加
配送オプション
補完製品
プロモーション コード (割引) を作成する
フォーム
データ キャプチャ フォームの設定
データ取得フォーム
Eメール
Google Sheets
MailChimp
Google フォーム
SendGrid
センディンブルー
ユニセンダー
アモCRM
パイプドライブ
Zoho CRM
トレッロ
Telegram
Slack
ザピア
メーラーライト
Notion
Salesforce
ハブスポット
ウェブフック
カスタム スクリプト
フォームのエラーを回避する
Monday.com
分析
ウェブサイト統計の追跡
グーグルアナリティクス
Googleタグマネージャー
目標達成率を提出する
SEO
ウェブサイトをオンラインで宣伝する
Zero Block
カスタム ブロックを作成する
レスポンシブ デザイン
キーボード ショートカット リスト
アニメーション
ステップバイステップのアニメーション
Figmaからインポート
メールキャンペーンビルダー
メールの作成、編集、および送信
プランと請求
予定
価格と支払い
サブスクリプションの自動更新をキャンセルする
お支払い確認
Tildaビジネスプランへのアップグレード
特別プラン
開発者向け
HTMLコードを埋め込む
コードのエクスポート
ウェブフック
Tilda API
WordPressプラグイン
チルダヘルプセンター
Zero Block: カスタム ブロックを作成する方法
パート1。入門。
Zero Block。プロフェッショナル向けデザインエディター
Zero Blockの使用方法に関するこのチュートリアルをご覧になるか、以下のガイドをお読みください。
Zero Blockは、自分の好みに応じてカスタムデザインのブロックを作成することで、あらゆるアイデアを実現できる組み込みのプロフェッショナルエディターです。人気のあるグラフィックデザインエディタに似ていますが、Tildaにあります。
あなたはここにいる!
下にスクロールして読む
入門
主な機能の概要記事
読んだ
レスポンシブ デザイン
コンテナの操作とレスポンシブ要素の作成
読んだ
キーボードショートカット
ワークフローをスピードアップするためのすべてのショートカットのリスト
読んだ
Zero Block:基本的なアニメーション
要素固定、視差、フェードイン アニメーション
読んだ
Zero Block:ステップバイステップのアニメーション
複雑なマルチステップ アニメーション: 基本原則、設定、および例
読んだ
Zero Block: トリガー アニメーション
別の要素をクリックまたはホバーしたときに実行される要素アニメーションを設定する方法
読んだ
Figmaからインポート
FigmaからZero Blockにレイアウトを自動的にインポートする方法
読んだ
1
Zero Blockを追加する方法
ページにZero Blockを追加するには、ページの一番下にある [ゼロ] をクリックします。また、ブロックライブラリの下部、「その他」カテゴリのすぐ下にあります。
Zero Blockは、通常のブロック機能をすべて保持し、コピー、削除、削除、非表示にすることができます。設定がありますが、「コンテンツ」ボタンの代わりに「ブロックエディター」ボタンがあります。ブロックを編集する場合はクリックすると、ブロックエディタが開きます。
2
インターフェースの紹介
Zero Blockには、ブラウザー画面の境界を示すグリッド コンテナーとウィンドウ コンテナーの 2 つのワークスペース (コンテナー) があります。
グリッドコンテナは、Tildaと同じグリッド(
12列(1200ピクセル)
)をサポートします。オブジェクトをグリッドに整列させ、グリッドコンテナ内に要素を配置すると、画面サイズに関係なく、常に12列の境界内にとどまります。
グリッド コンテナは、ブロック エディタのメイン ワークスペースです。
コンテナーの詳細については、ガイド「Zero Block: レスポンシブ デザイン」を参照してください。
3
要素を追加および編集する方法
ブロック エディターの左上隅にあるプラス ボタンをクリックして、要素をページに追加します。テキスト、画像、図形、ボタン、ビデオ、ツールヒント、HTML、フォーム、またはギャラリーを追加できます。
画像をフォルダからブロックスペースにドラッグして
追加することもできます
。
マウスを使用して要素を編集する方法
Zero Blockは、要素の移動、サイズ変更、コピー (Alt キーを押したまま)、複数の要素の選択など、基本的なマウス操作をすべてサポートしています。
縦
横比
を変更せずに画像エレメントのサイズを変更できます。
テキスト要素の高さは、テキストの量に応じて
自動的に変化します
。
ボタンや図形のサイズは、すべての方向に変更できます。
複数の要素を操作する場合は、Cmd+A を押してすべての要素を選択するか、Shift キーを押しながらマウスで複数の要素を選択します。
複数の要素が選択されている場合、それらは
互いに、またはコンテナに対して水平方向または垂直方向に整列できます。
キーボードを使用して要素を編集する方法
キーボードを使用してブロック要素を編集すると、作業プロセスが大幅に高速化されるため、ホットキーの使用をお勧めします。
画面タイプを変更する
グリッドを隠す
設定を非表示にする
管理要素を非表示にする
最後の操作を元に戻す
セーブ
写し
糊
動く
削除
不透明度を変更する
要素をロックする
フォントサイズを変更する
行間を変更する
文字間隔を変更する
すべて選択
レイヤー:非表示/表示
ガイド: 水平方向の追加
ガイド: 垂直方向の追加
⌘+1...5
G
タブ
F
⌘+Z
⌘+S
⌘+C
⌘+V
(シフト+) ←↑→↓
バックスペース
0...9
L
+ / –
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
⌘+L
⌘+H
⌘+シフト+L
(Windows ユーザーの場合は、⌘ の代わりに Ctrl を使用してください)
ブロック エディタのコンテキスト メニューからキーボード ショートカットのリストにアクセスすることもできます。
設定パネルを使用して要素を編集する方法
(TABキー)
1
テキスト
画面の右下隅にある [設定] をクリックすると、すべての要素の設定にアクセスできます。
設定パネルを開いたり閉じたりするには、
Tab キーを押します。
デフォルトでは、ワークスペースを明確に保つために設定パネルは非表示になっています。
上部のボタン行を使用して、要素をコンテナーに対して垂直または水平にすばやく整列させます。
以下に要素の座標を示します。ピクセルまたはパーセントで指定できます。以下では、この機能について詳しく説明します。
原点は青い十字で示されます。
要素のパラメーター (幅と高さ) をピクセル単位で表示することもできます。
ここをクリックして、コンテナと要素座標の原点を変更する方法を確認してください。
フォントサイズを変更するには、
–/+キーを使用します。
行間を変更するには、Cmd + 上/下矢印キーを押します。
を押して文字間隔を変更できます
Cmd + 左/右矢印キー。
要素をコピーするには、
Alt キーを押しながら
要素をドラッグします。
不透明度はキーボードを使用して簡単に調整できます。
1—10%
2—20%
...
0— 00%
2
画像
画像をアップロードすると、アップロードされたフレームのサイズが使用されます。要素の [設定] パネルで [元のサイズ] をクリックして、画像を元のサイズにリセットします。
画像を円形にトリミングする場合は、丸みの半径を設定します。
均一な円を作成するには、元の画像が正方形で、丸め半径が辺の半分に等しくなければなりません。たとえば、画像のサイズが 100×100 ピクセルの場合は、半径を 50 に設定します。
画像に影を付けることができます。これを行うには、要素の [設定] パネルで影の色、不透明度、x および y オフセット、ぼかしと広がりの度合いを選択します。
各画像には代替テキスト (alt タグ) を付けることができます。検索エンジンは代替テキストをキーワードとして解釈し、それらを使用してページをインデックス化するため、代替テキストが Web サイトのコンテンツ全般に関連し、画像のコンテンツを反映していることを確認してください。
ユーザーがクリックすると別のページに移動するように、任意の画像をリンクに変えることができます。要素の [設定] パネルに移動し、リンクを指定して、同じウィンドウで開くか新しいウィンドウで開くかを指定します。
3
形
図形を追加すると、ページに四角形が表示され、四角形、円、または線に変換できます。
長方形
:コントロールポイントをドラッグして辺の長さを変更します。
または、要素設定で値を指定します。
サークル。
円を作成するには、正方形の辺の長さの半分に等しい丸め半径を設定します。
線。
要素設定で長方形の高さを1〜5ピクセルに設定します。したがって、あなたは線を作ります。
シェイプには、シャドウ、ボーダー、およびリンクを割り当てることができます。
4
ボタン
ボタンのサイズ、色、丸め半径を変更できます。影と境界線を追加することもできます。
ボタンのキャプションとリンクは、要素の [設定] パネルで設定できます。サイズ、タイプ、不透明度、フォントの色も設定できます。
ボタンの動作を設定できます。たとえば、ボタンにカーソルを合わせると、背景色、テキストの色、境界線の色が変わります。
5
ツールチップ
ツールチップは、ポインターを合わせるとテキスト ヒントや画像を表示するインタラクティブなブロック要素です。
ツールチップの色、影、サイズの調整、円内に表示されるアイコンの設定、ポインターを合わせるとポップアップする画像のアップロード、アニメーションの作成ができます。
ツールチップがブロックの端で途切れないように、ブロック内の要素を配置した後、すべての画面解像度でツールチップの位置を確認してください。
ツールチップを使用して製品の機能を表示する。
SPERA.de
による写真。
6
形
水平フォームまたは垂直フォームをZero Blockに追加できます。入力フィールドの追加、データ キャプチャ サービスの接続、成功メッセージとエラー メッセージの設定、デザインの変更、アニメーションの作成など、すべての基本的なフォーム設定にアクセスできます。
入力フィールドを編集するには、要素の [設定] パネルに移動し、[入力フィールド] をクリックします。ここでは、通常のフォーム ブロックのように入力フィールドをカスタマイズできます。
データ キャプチャ サービスをフォームに接続するには、要素の [設定] パネルに移動し、[サービス] をクリックします。そこで、データ キャプチャ サービスをフォームに接続できます。
4
レスポンシブ デザインの作成方法
Tildaは、すべての基本的な画面タイプのレスポンシブデザインをサポートしています。
1200:最大(デスクトップ)
980—1200(水平タブレット)
640—980(垂直タブレット)
480—640(水平スマートフォン)
320—480(垂直スマートフォン)
これは、デザインがすべてのデバイスで正しく表示されるのに十分です。
メイン アートボード上のZero Blockをカスタマイズしたら、画面の種類を切り替え、テキスト列の幅、イメージ サイズ、フォント サイズ、アートボードの高さ、要素のレイアウトなど、必要に応じて調整を行います。
特定の画面タイプで変更された設定が強調表示されます。別の画面タイプの設定を反映する設定は灰色です。これにより、どの設定が変更されたかを簡単に確認できます。
以下の例では、テキスト要素のすべての設定がグレーで表示されています。これは、現在の画面タイプでも前の画面タイプと同じであることを意味します。
特定の画面タイプのフォント サイズと要素の座標を変更すると、値が灰色で表示されなくなります。これは、新しい設定がこの画面タイプに固有であることを意味します。
5
アートボード設定
空のスペースをクリックすると、アートボード設定が表示されます。
キーボードを使用して、Grid Container の高さをピクセル単位で指定できます。コンテナの端をドラッグすると、値を変更できます。 Grid Container の幅は 1200px に固定されています。
アートボード設定でブロック全体の背景色をカスタマイズできます。
アートボード設定で、ブロック全体の背景画像をアップロードできます。
背景画像のレンダリング(フィルター開始/フィルター終了)と背景画像に関するコンテンツの動作をカスタマイズすることもできます:「固定」値を設定すると、コンテンツ(テキストと図形)はスクロール中に移動しますが、画像はそのまま残ります。
Zero Blockの基本的な設定と機能について説明しました。チュートリアルの第2部では、レスポンシブデザインに関する詳細設定を確認します。
パート2
レスポンシブ デザイン
に移動
作成日
Tilda