LINEで送る
Pocket
このエントリーをはてなブックマークに追加


前回は、『Osclassのオリジナルテーマを作ってみよう!Part2 テーマの構造編』を解説しました。基本的なOsclassの構造は理解されたと思います。

今回は、実際にCSSやJavascriptを使ってデザインをしていきます。

スポンサーリンク




CSSでデザインしてみよう

header.php, main.php, footer.phpをそれぞれidをつけて、以下のように変更してみましょう。

header.php

main.php

footer.php

css/main.cssに以下のコードを記述しましょう。

記述したら、通常のhtml通りに、CSSを反映させてみましょう。

common/head.phpに、CSSを読み込ませます。

それでは、ブラウザで更新してみましょう。

あれれ、色を指定したはずなのに、変わっていませんね。

その理由は、Osclass特有のCSSの読み込み関数があるためです。

CSSを読み込む

OsclassでCSSを読み込むには、以下のようにhead.phpを編集します。

新しいコードが出てきましたね。一つ一つ解説していきましょう。

「osc_enqueue_style()」は「スタイル(CSS)をキューに追加(登録)」を意味しています。

「(‘○○’)」は、CSSの登録IDを表しており、今回のように「(‘main’)」と記述した場合は、PHPの「$main」と同義になります。その為、この部分は今後読み込む他のCSSと重複してはいけません

「osc_current_web_theme_url(‘css/××.css’)」は、「現在のテーマ内のCSSのアドレス(URL)」を意味しています。

PHPファイルの場合はurlではなくpathですが、これは.phpの場合は場所を意味しており、urlでは動作しません。

CSSではURLとして読み込まれますので、pathではなくurlなのです。


CSSを読み込む場合は、上記のように記述しなくてはなりません。

先ほど説明したCSSのアドレスを定義し、それをechoで文字列として出力しています。

それでは、改めてブラウザで見てみましょう。

無事に適用されましたね。

他のCSSを読み込む場合は、その都度このように記述しないと読み込めませんので、注意しましょう。

尚、http://~で利用するCSSは通常通りで問題ありません。

Javascriptを動かしてみよう

CSSでは特殊な読み込み方法をしましたが、Javascriptもなのでは…?と思った方。大正解です。

しかも、CSSよりも面倒です。

少し手間がかかりますが、頑張ってやっていきましょう。

まず試しに、js/main.jsに以下を記述します。今回は現在の日時を表示するコードです。

main.phpに、スクリプトを呼び出すコードを記述します。

そしてcommon/head.phpを以下のように変更します。

またまた新しい関数が出てきましたね。

Javascriptの場合、CSSとは違い、読み込みの為には2つのコードを記述する必要があります。

「osc_register_script()」は、Osclass上でJavascriptを利用する為に登録(register)するための関数です。

「osc_enqueue_script()」は、登録(register)したJavascriptファイルを、キューに追加するための関数です。CSSと形式が似ていますので、間違えないように注意しましょう。

上記二つを記述したら、あとは同じように以下のコードで呼び出しをします。

これで、Javascriptの読み込みが完了しました。

それでは早速、ブラウザで見てみましょう。

正常に動作しました。

これで、CSSとJavascriptの読み込みが出来ました。

こちらも、CDNなどの外部URLでの読み込みは通常通りの記述で問題ありません。

画像を表示してみよう

main.phpに、以下のコードを記述して編集しましょう。

ブラウザで見てみましょう。

画像が読み込まれていませんね。

以下のように変更してみましょう。

ブラウザで見てみましょう。

正常に読み込まれました。

画像の場合も、osc_current_web_theme_url()関数をechoで出力する必要があります。

今回の重要キーワード

  • osc_register_script() = JSを登録!
  • osc_enqueue_script() = JSをキューに追加!
  • osc_enqueue_style() = CSSをキューに追加!
  • osc_current_web_theme_url = テーマ内のURLを表示!

今回は、デザインする上での初期設定を解説しました。

使いたいCSSやJSが多いと、コーディングの量も多くなりますので、テキストファイルなどにテンプレートとしてメモしておくと良いでしょう。

次回は、ページの遷移方法を解説していきます。

次回もお楽しみに!

テーマ制作、お任せください!

もしテーマを作るのが面倒、よくわからない、任せたい!とお悩みであれば、ぜひご依頼ください!

お問い合わせ、ご相談は以下までお願いします。

ご連絡お待ちしております。

Twitter: @gt_musix

Mail: クリックでメールを送信


スポンサーリンク