【プラグイン本体無料】【ティラノスクリプトプラグイン】CSS適用クリッカブルプラグイン
- ダウンロード商品【無料】プラグイン本体Ver3.0（入れ替え時main.css差分注意）¥ 0無料ダウンロードcss_clickable_plugin3_0.zip(11.9 KB)css_clickable_plugin3_0.zip
- ダウンロード商品【無料】プラグイン本体Ver2.0（入れ替え時main.css差分注意）¥ 0無料ダウンロードcss_clickable_plugin2_0.zip(11.3 KB)css_clickable_plugin2_0.zip
- ダウンロード商品【無料】プラグイン本体Ver1.1¥ 0無料ダウンロードcss_clickable_plugin1_1.zip(8.65 KB)css_clickable_plugin1_1.zip
- ダウンロード商品【有料】【プラグイン本体を先にDL推奨】当プラグイン用CSS作成補助ツール¥ 500
- ダウンロード商品【有料】【プラグイン本体を先にDL推奨】当プラグインVer3.0以降用CSS作成補助ツール¥ 500
- ダウンロード商品もう一声の投げ銭版（通常版と相違ありません）¥ 1,000
ティラノスクリプトのプラグイン（＋有料補助ツール）です。 従来のクリッカブルはこちらが引き渡した線や背景情報とマウスホバー時とそれ以外の状態での透過設定でクリック可能な部位であるかどうかを判別させる形でした。 しかし、端末の多様化に伴い、マウスホバー時のギミックだけでクリック可能部位を見せようとすると、スマホ等のタッチタイプの端末でのクリック可能部位の判別が不可能になりつつあります。 それを解消するために、CSSによるデザインでの視覚効果とその適用に対応したクリッカブル要素を配置できるようにするのがこのプラグインです。 CSS作成補助ツール（有料）もありますが、実際にはこの補助ツールで作成できる以上の設定を行う事も可能ですので、CSS有識者は補助ツールがなくてもどうにかなると思います。 それはそれとして、デフォルトのアニメーション設定サンプルのHTMLファイルも入れてるため、基本CSS設定もそれベースにブラウザの開発者ツールで必要な情報を取得することは可能です。 故にまずは無料のプラグイン本体のみのDL→様子によってツール購入の順番をおススメします。 以下note記事でも紹介しています。ちなみに補助ツールでも作れないタイプのCSS設定例も出してます（コピペ・改変OK） https://note.com/itksk_ayame_gsk/n/nd3cd4994a942
【更新履歴】
◆2025/09/24 プラグインを3.0に。main.css内のスペルミス（rotationがrotaionになってた）修正と当プラグインで設置したクリッカブルの削除タグを追加しました。更新の際はmain.cssへの追記内容への上書きや、既存p_css_easy_clickableのアニメ指定にご注意ください。 ◆2025/08/26 プラグインを2.0に。keyfocusパラメータ追加＆通常clickableの延長線の感覚で使える簡易実行（パラメータ数は簡易ではない）タグを用意しました。更新の際はmain.cssへの追記内容への上書きに注意してください。 ◆2025/08/16 ツールを1.2に変更。mix-blend-mode削除を踏まえ、代替としてbox-shadowによる内外の影設定に対応しました。 ◆2025/08/15 プラグイン・ツールともに1.1に変更。ティラノの構造上mix-blend-modeが意味をなさないことが判明したため、sample.htmlやツールの項目から削除しました。 ◆2025/08/14 プラグイン・ツールともに1.0公開。
【動作確認】
以下のティラノスクリプトバージョンでの動作を確認しています。 V525b、V600 ただ、元にしたクリッカブルはV600系の処理なので600系でも問題なく動くはずです（とんでもキメラ事案）
【プラグイン概要】
[p_css_clickable]、[p_css_easy_clickable]、[p_css_clickable_delete]というタグが使用可能になります。 [p_css_clickable]については、CSSでのデザイン設定を反映するという設計思想のため、従来の[clickable]と同様に渡せるプロパティはサイズ（width、height）と位置情報（x、y）、クリック時のジャンプ先情報（storage、target）です。 そして、従来の[clickable]で渡していた見た目の情報（線や透明度、マウスホバー時の表示等）の代わりに、nameとしてCSSに紐づけたクラスを渡すことが可能です。 Ver2.0よりkeyfocusパラメータの追加＆対応処理を入れたことでtab等でのフォーカスに対応しました。 また、デフォルトの状態で8つのCSSのアニメーションを設定してあるため、それらを利用して（もちろんCSSアニメーションの追加も可能です）、スマホ使用者にクリッカブルの位置をわかりやすく見せることが可能になります。 [p_css_easy_clickable]はデフォルトで用意したCSSデザイン設定とパラメータで渡したデザイン項目を組み合わせてクリッカブルの設定＆配置を行います。 あくまで、「ユーザによるCSSデザインが不要」という観点からeasyを名乗っています。 設定可能パラメータは多いですが、ある程度デフォルトclickableタグの延長線の感覚で使えるはずです。 [p_css_clickable_delete]は当プラグインでも通常のクリッカブルでも設置したどれかをクリックするとすべてのクリッカブルが消える仕様ですが、クリックなしでセットした任意の範囲のクリッカブルの削除を行えます。
【有料CSS作成補助ツールについて】
有料のCSS作成補助ツールは、実際に使う背景画像を読み込ませた上で、アニメーションや背景色などを即時反映させながら、設定したい見た目のクリッカブル要素用CSSを作成できるツールとなっています。 先述の通り、CSS有識者であれば不要であると思われ、また、有識者に及ばずともブラウザの開発ツールの使い方などをわかっている方であれば、プラグインに同梱しているサンプルのHTMLファイルを元に、ある程度のCSSを作成することが可能と思われます。 そのため、まずは無料のプラグインの方をDLし、様子をみて、こちらの導入の検討をしていただければ、よいかと思われます。
