OWLetでjQueryを使ってみよう!

  • このエントリーをはてなブックマークに追加
流行りのデザインや動きのあるサイトを作ろうと思ったとき、jQueryを使う人は多いのではないでしょうか?
この記事ではOWLetでのjQueryを使ったコンテンツの構築方法を紹介します。

必要なファイルをアップロードしよう

sample

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

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

sample

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

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

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

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

アップロードしたファイルを読み込もう

sample

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

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

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

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

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

sample

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

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

コンテンツを実装しよう

sample

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

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

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

sample

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

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

まとめ

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

 

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

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

< >

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

EXPOバナーよくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 10:00~18:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>