WebGL演出をサイトに実装する
約4分・SHITAJIテンプレートのWebGL演出を選び、屋号・ひとことを入れて、StudioのBlankパーツか自分のサイトのHTMLへ貼り付けるまでの流れ。
マウスに反応して動く文字などのWebGL演出を、サイトを丸ごと作り直さずに、 いま持っているサイトへあとから足せます。実体は1個の埋め込みコード(<iframe>タグ)なので、Studioの「埋め込み」パーツの「Blank」に直接貼り付けるか、 ふつうの地図埋め込みや動画埋め込みと同じ要領で自分のサイトのHTMLへ貼り付けてから SHITAJI に読み込みます。
選ぶ
サイドバーの「SHITAJIテンプレート」→「WebGLテンプレート」タブを開くと、 演出の種類が並びます。すべて実際に動くプレビュー付きです。
カードをクリックすると詳細(ライブプレビュー・入力欄)が開きます
屋号・ひとこと・色を入れる
気に入った演出のカードを開き、屋号(メインテキスト)とひとこと(サブテキスト・任意)、文字色と背景色を入力します。入力・変更するたびにプレビューが更新され、 下の「埋め込み用のコード」も書き変わります。この入力にはログインが必要です(無料です)。 ログインしていない間は、見本(SAMPLE)のプレビューだけが見られます。
屋号・ひとこと・色を変えると、下のコードもその内容に更新されます
埋め込みコードをコピーする
「コピーする」を押すと、<iframe>タグ1行がコピーされます。 高さ(height)はご自分のヒーロー領域の大きさに合わせて数値を書き換えてかまいません。
貼り付ける(2つの方法)
すでにStudioで作業しているか、まだSHITAJIにサイトを読み込んでいないかで、 貼り付け先が変わります。
すでにStudioで編集中の場合
Studioの「埋め込み」パーツの「Blank」を追加し、コピーしたコードをそのまま貼り付ければ完成です。 地図・動画の埋め込みと同じ操作なので、SHITAJIへの読み込みは不要です。
まだSHITAJIに読み込んでいない場合
SHITAJI のエディタは読み込んだあとに新しい要素を追加することはできません (→ エディタで直せること・直せないこと)。 そのため、コピーしたコードはSHITAJI へ読み込む前に、 お使いの元のHTMLファイルへ貼り付けてください。ヒーロー(見出し・メインビジュアル)の 部分をこの<iframe>タグに置き換えるのが基本の使い方です。
SHITAJI に読み込み、Studio へ書き出す
前の手順でHTMLファイルに貼り付けた場合は、そのファイルを、いつもどおり 読み込んで ください。<iframe>はそのまま取り込まれます(地図・動画の埋め込みと同じ扱いです)。 あとは通常どおり文字・色・画像を整え、「Studio用に書き出す」→コピー&貼り付け(⌘V、Windowsは Ctrl+V)で Studio に追加すれば完成です(うまくいかないときは SHITAGAKI(Chrome拡張) も使えます)。Studioの「Blank」に直接貼り付けた場合は、この手順は不要です。
演出そのものは無料です(実費が掛からない仕組みで作っているため)。 クレジットが減るのは、いつもどおり「Studio用に書き出す」ときだけです (→ クレジットの数え方)。