OWLetでjQueryを使ってみよう！｜実際の構築方法をご紹介！

まずは構築に必要なjQueryのファイルをアップします。

ページCMSの画面左上の[ファイル]をクリックします。

ここではディレクトリを作成したり、画像やCSS、javascriptのファイルなどをアップロードすることができます。

ここでは「lib」というディレクトリを作成し、その中に、必要なjsファイルをアップロードしてみます。

図はアップロード後の状態です。

CSSや画像のアップロードが必用な場合も、ここでディレクトリを作成し、アップロードします。

次は、先ほどアップロードしたファイルを読み込みます。

画面左上の[レイアウト]をクリックすると、レイアウトの一覧が表示されます。

ここでは、「base」レイアウトで読み込みを行ってみます。

OWLetでは、レイアウトに親子関係を持たせることができます。親のレイアウトでjavascriptやcssのファイルを読みこませた場合、その設定は子供のレイアウトにも引き継がれます。

つまり全てのレイアウトで同じ設定をする場合は、親のレイアウトでファイルの読み込みを行い、特定のレイアウトのみで使用するファイルの場合は、子供のレイアウトで読み込みの設定を行います。

ファイルの読み込み設定を行いたいレイアウトまで進んだら、画面上部の[CSS/JS]をクリックすると、設定のためのタブが開きます。

ここでは一般的にHTMLファイルに書くとき同様に、CSSやjavascriptの読み込み設定を行えます。

ファイルのアップロード、読み込みまで完了したら、実際にコンテンツを構築します。

ここでは、通常のOWLetでの構築同様に「枠」パーツなどにjQueryで必要なclassなどを記載して構築をするだけです。

OWLetのテキストパーツを使えば、直接HTMLタグやjavascriptの記載を入れ込むことも可能です。

構築が終わったらプレビューで確認しましょう。

場合によっては、一度編集内容を公開した上、ページCMSからログアウトして表示の確認を行います。

以上で一通りの構築は完了です。

OWLetではこのように、jQueryなどを利用して手軽に高機能のサイトを構築することが可能です。つまり個人のスキルレベルが上がれば上がるほど、よりWEBサイトでの表現の幅が広がると言えます。

通常のOWLet構築に慣れてきた方は、ぜひ高機能なサイト構築にもチャレンジしてみてください！