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