コード集の使い方
このコード集は私が普段サイト制作で用いるコードを全世界に公開して、elementorで質の高いサイトを作れる人を増やしたいという思いで開設しました。
なので、どんどんコピペして使ってください！
もちろん商用利用というか実案件に使ってもOKです。
私へのリンクや著作権表示（クレジット）は一切不要です。
またコードを改変して使うとかも全然OKです。
AIに書いてもらっているコードもあります。
問題なく作動することは確認済みですが、何かあっても責任は取れませんのでご了承ください。
またWordPressやElementorのアップデートにより、コードが機能しなくなる場合があります。
あくまで自己責任でご使用ください。
各コードにv3またはv4の表記をしています。
v3はv3ウィジットを使用したときに作ったコード、v4はv4ウィジットを使用した時に作ったコードです。
v3とv4ウィジットで、中身の構造が変わったので、v3のコードをv4ウィジットに入れても効かなかったり、逆もまた然りなことがあります。
その時は後述するように、AIに微調整してもらってください。
今後はv4ウィジットをベースにコードを作っていく予定です。
多くのアニメーションにGSAPを使っています。
GSAPを使う場合は
・サイト全体で1回だけ
・JSコードの上に
以下のGSAP読み込みコードを追加してください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js" integrity="sha512-P2IDYZfqSwjcSjX0BKeNhwRUH8zRPGlgcWl5n6gBLzdi4Y5/0O4zaXrtO4K9TZK6Hn1BenYpKowuCavNandERg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
各コードで紹介している手順は大体「クラスをつけて、コードを入れてください。」となっています。
そこがよくわからないという人は、以下をお読みください。
クラスとは、特定のウィジットにつける名前です。
コード上でその名前を呼んで命令をしているようなイメージです。
ウィジット > 高度な設定 > CSSクラス に指定のクラスを入力してください。
ウィジット > スタイル > クラス に指定のクラスを入力し、青緑になっているようにしてください。
CSSコードの<style></style>の中身だけをコピーして
WPダッシュボード > 外観 > カスタマイズ > 追加CSS のところにペーストしてください。
<style></style>も含めたCSSコード全体をコピーして
WPダッシュボード > elementor > エディタ > カスタムエレメント > code にペーストしてください。
locationは必ず<head>にしておいて、タイトル・表示条件を適宜設定して、公開をクリック。
ウィジットのカスタムCSSに入れる方法もありますが、このサイトを見てくれる方はたくさんコードを使うと思うので、このように追加したコードがまとまってる方が何かと良いです。
code snippet , WP codeなどのプラグインが必要です。
JSコード全体をコピーし、そのプラグインの入力欄にペーストしてください。
locationが選べる場合「end of <body>」にしてください。
JSコード全体をコピーして
WPダッシュボード > elementor > エディタ > カスタムエレメント > code にペーストしてください。
locationは必ず </body> – End にしておいて、タイトル・表示条件を適宜設定して、公開をクリック。
AIに
・ソースコード
・今の状況
・やりたいこと
を伝えれば大体いい感じにコードを調整してくれます。
詳しく説明することがコツです。
AIに相談してもダメなら、elementorのエキスパートを頼りましょう。
TOFUラボではWordPress, elementor, AI, その他もろもろweb制作関連のことについて質問できます。
私も加入して2年以上経ちましたが、めっちゃ助けてもらってます。
頼れるところがあるとだいぶ心強いですよ。