Wixで使える！簡単カレンダー作成ツール「HTML Calendar Create Tool」の紹介！
個人開発したWebアプリケーションの使い方紹介になります。
HTML Calendar Create Toolとは？
HTML Calendar Create Toolは、コピーしたHTMLコードを貼り付けるだけで簡単に作成できるカレンダー作成ツールです。
定休日、サイズやカラーをクリックだけで設定することができます。Convertをクリックするとプレビューが表示されるので、修正しながら作成していくことができます。
カレンダーが完成すれば、あとはコピーして貼り付けるだけです。
使い方
Check Date項目で、月の変更と背景色の選択ができます。
カラーは、1回クリックするとColor1、2回クリックするとColor2に設定された背景色が選択されます。3回押すと元に戻ります。
Optionでカラー、サイズ、枠線の太さを設定できます。
Color項目で日ごとの背景色、全体の背景色、枠線の色を選択できます。
Colorをクリックすると、パレットが表示されて色を選択することができます。RGB、16進数カラーコードからも選択できます。
Size/Squareでカレンダー1マスのサイズを設定します。初期値は40pxです。スマホでも丁度良いサイズですので、問題がなければ初期値のままで良いかと思います。
Frame borderで枠線の太さを選択します。0px、1px、2pxあたりがオススメです。
Convertボタンを押すとOutputにHTMLが表示されて、貼り付け時のプレビューも表示されます。
Copyをクリックするとクリップボードにコピーされます。
Wixで使ってみる。
Step1
まず左側のメニューから、追加＞埋め込み＞ウィジェットの埋め込みを選択します。
Step2
HTMLパーツが出てきます。パーツの上にある「コードを入力」をクリックするとHTMLコードを入力するフレームが出てきます。
Step3
「コードを入力」の部分に先ほどコピーしたカレンダーのコードを貼り付けます。初回以降は、ここのコードを書き換えるだけで作成することができます。
Step4
パーツのサイズを調整して完成です。
下にテキストで「定休日」と入れておけば親切かと思います。
まとめ
HTML Calendar Create Toolを使って、Wixで簡易的なカレンダーを作成する方法を書いてきました。
Webサイトを管理していると、カレンダーの更新は毎月しないといけないので、時間をかけずに作成できるのは便利かと思うのでぜひ使ってみてください。
Discussion