| 一覧 検索 最新 ヘルプ ページへ戻る 履歴 印刷 プレゼント企画 新テーマを題材にした「テーマ作成事例」 をテンプレートにして作成 xpwiki:XOOPSでWebサイトを作ろう/テーマ x-mas 作成事例 をテンプレートにして作成 開始行: *プレゼント企画 新テーマを題材にした「テーマ作成事例」 いよいよ来てしまいました。クリスマスイブ。。。 これほどプレッシャーのかかるイブも、そうそうないかも・・・ 無謀にも、XOOPSアドベントカレンダーのイブの記事として、手... ということで、「クリスマスらしいテーマ x-mas 」を題材にし... #ref(site://uploads/elfinder/x-mas-image004.jpg,center,mw... http://xoops123.com/modules/d3downloads/index.php?page=si... 作成するテーマは、文字どおりクリスマスらしいテーマで、ベ... #ref(site://uploads/elfinder/x-mas-image002.jpg,center,mw... http://xoops123.com/modules/d3downloads/index.php?page=si... さて、trend2012がどのようにしてx-masに変わるのか？ そのエッセンスをお届けしたいと思います。 **テーマ作成のポイント 元テーマを変更して、新しいテーマ作成するポイントは４つ。... これらを変えるだけで、印象をガラッと変えることができ、違... **用意するもの 必要なのは、ローカル環境とエディター。必要に応じて画像ソ... 一番大切なのが、作成してすぐに確認することができるローカ... まずは、テーマを弄るためローカル環境を用意しましょう。手... http://xoops123.com/modules/d3downloads/index.php?page=si... エディターは、UTF8を扱うことができるのものなら何でも結構... **さあ、作りましょう～(*^O^*) って、まずは準備からね。 では、ローカル環境「どこでもXOOPS」を起動しましょう。 あ、XAMPPの人は、そっちをね。。。 そして、次が作業前の大切なポイントです。 ローカル環境を起動したら、XOOPSの管理画面、互換モジュール... #ref(site://uploads/elfinder/x-mas-image006.jpg,center,mw... これを設定していないと、いくらテーマを修正・変更しても反... 次に、新テーマを作る準備です。 今回ベースとするテーマ trend2012ディレクトリをコピー、x-m... これで、管理画面でテーマ x-mas として利用設定することがで... もちろん、このテーマを選択しても、全くカスタマイズしてい... でも、ここがスタートです。このテーマを選択して、表示して... #ref(site://uploads/elfinder/x-mas-image008.jpg,center,mw... ちゃんと、テーマ「x-mas」として「trend2012」のデザインが... **作成作業を開始 ***ヘッダー画像の変更 まずは、簡単なところから、ヘッダー画像を変更してみましょ... #header-pict {background:url(images/header_x-mas.png) no... ヘッダー画像を配置しているdivに画像を背景として設定します。 Webからフリーの画像を集めてきて、画像ソフトで適当に配置・... これだけで結構雰囲気が変わりますね。でも、別のテーマかと... #ref(site://uploads/elfinder/x-mas-image010.jpg,center,mw... ***背景画像の変更 夜、街に雪が降り積もるイメージ。街が雪で覆われてサンタさ... で、ネットで色々探しましたけど、良いデザインのものは有料... ということで、アイデアを色々と集めて、Photoshopで作ってみ... #ref(site://uploads/elfinder/x-mas-image012.jpg,center,mw... これを背景画像として使います。横方向に連続した背景として... body {background:url(images/x-mas_back.png) repeat-x;} #ref(site://uploads/elfinder/x-mas-image014.jpg,center,mw... わぁ～い、雰囲気がでましたね～(*^O^*) でも、ヘッダー画像のイメージがちょっと合いません。もっと... ***ヘッダー画像を再度変更してみよう では、ヘッダー画像の背景色を透明にして、星と犬を省略して... #ref(site://uploads/elfinder/vimage016.jpg,center,mw:588,... でも、月のシルエット上部が切れて変な感じかな？ ヘッダー画像を配置している要素 #header-pict とラッパー #w... #ref(site://uploads/elfinder/x-mas-image018.jpg,center,mw... さらに良い感じになってきましたね。 ***グローバルメニューの色調変更 次はグローバルメニューです。 色合いを少し変えて、CSS3でグラデーションとボックスシャド... .nav { -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,0.5); -moz-box-shadow: 0px 0px 10px rgba(255,255,255,0.5); box-shadow: 0px 0px 10px rgba(255,255,255,0.5); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: #191970; background: -moz-linear-gradient(top, #191970, #333); background: -webkit-gradient(linear, left top, left bo... background: -o-linear-gradient(top, #191970, #333); } ここでは、影というより光彩を表現するような設定として、背... #ref(site://uploads/elfinder/x-mas-image020.jpg,center,mw... ***コンテンツ部分の変更 あとは、コンテンツ部分ですね。さぁ～て、どうしましょ？ とりあえず、コンテンツの背景を白にしてみましたけど・・・ #featured {background:#fff;} #ref(site://uploads/elfinder/x-mas-image022.jpg,center,mw... 予想どおり、ダサイ。。。 じゃあもうちょっと手を加えて、CSSでborder-radiusを設定し... #featured { background:#fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #ref(site://uploads/elfinder/x-mas-image024.jpg,center,mw... う～ん、これもイマイチ。背景画像が生きません。 ここは、コンテンツ部分を半透明にして背景画像を透かして見... でも、CSSでOpacity設定を使うとコンテンツの内容まで半透明... CSS3のhslaを使うのも良いのですが、まだ対応できないブラウ... #featured { background:url(images/bg_blue.png) ; padding: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); } #ref(site://uploads/elfinder/x-mas-image026.jpg,center,mw... 良いですねぇ～(*^O^*) あとは、各コンテンツ部分のdivにsmartyのcycle関数を使って... <div class="bg_<{cycle values="pink,yellow,green,orange,... .bg_pink { background:url(images/bg_pink.png) ;} .bg_green { background:url(images/bg_green.png) ;} .bg_blue { background:url(images/bg_blue.png) ;} .bg_orange { background:url(images/bg_orange.png) ;} .bg_yellow { background:url(images/bg_yellow.png) ;} おお～ 出来上がりぃ～(^_^)v ***フッターの変更 と思ってスクロールしてみたら・・・フッターが淋しいです。 #ref(site://uploads/elfinder/x-mas-image028.jpg,center,mw... しょうがないですねぇ・・・これもフッター用の画像でも作り... ネットからフリーの街並みのシルエット画像を仕入れてきて、P... #ref(site://uploads/elfinder/x-mas-image030.jpg,center,mw... 決まりましたね。これで行きましょう！ 最後に、各divの幅や間隔を調整して、ついでにh3とかにクリス... #ref(site://uploads/elfinder/x-mas-image031.png,center,mw... **終わりに さて、いかがですか？おわかり頂けましたでしょうか？ エッセンスだけなので、ちょっと判りにくいかな？ でも、まずはチャレンジしてみてはいかがでしょうか？ テーマ作成、楽しいですよ～(*^O^*) 終了行: *プレゼント企画 新テーマを題材にした「テーマ作成事例」 いよいよ来てしまいました。クリスマスイブ。。。 これほどプレッシャーのかかるイブも、そうそうないかも・・・ 無謀にも、XOOPSアドベントカレンダーのイブの記事として、手... ということで、「クリスマスらしいテーマ x-mas 」を題材にし... #ref(site://uploads/elfinder/x-mas-image004.jpg,center,mw... http://xoops123.com/modules/d3downloads/index.php?page=si... 作成するテーマは、文字どおりクリスマスらしいテーマで、ベ... #ref(site://uploads/elfinder/x-mas-image002.jpg,center,mw... http://xoops123.com/modules/d3downloads/index.php?page=si... さて、trend2012がどのようにしてx-masに変わるのか？ そのエッセンスをお届けしたいと思います。 **テーマ作成のポイント 元テーマを変更して、新しいテーマ作成するポイントは４つ。... これらを変えるだけで、印象をガラッと変えることができ、違... **用意するもの 必要なのは、ローカル環境とエディター。必要に応じて画像ソ... 一番大切なのが、作成してすぐに確認することができるローカ... まずは、テーマを弄るためローカル環境を用意しましょう。手... http://xoops123.com/modules/d3downloads/index.php?page=si... エディターは、UTF8を扱うことができるのものなら何でも結構... **さあ、作りましょう～(*^O^*) って、まずは準備からね。 では、ローカル環境「どこでもXOOPS」を起動しましょう。 あ、XAMPPの人は、そっちをね。。。 そして、次が作業前の大切なポイントです。 ローカル環境を起動したら、XOOPSの管理画面、互換モジュール... #ref(site://uploads/elfinder/x-mas-image006.jpg,center,mw... これを設定していないと、いくらテーマを修正・変更しても反... 次に、新テーマを作る準備です。 今回ベースとするテーマ trend2012ディレクトリをコピー、x-m... これで、管理画面でテーマ x-mas として利用設定することがで... もちろん、このテーマを選択しても、全くカスタマイズしてい... でも、ここがスタートです。このテーマを選択して、表示して... #ref(site://uploads/elfinder/x-mas-image008.jpg,center,mw... ちゃんと、テーマ「x-mas」として「trend2012」のデザインが... **作成作業を開始 ***ヘッダー画像の変更 まずは、簡単なところから、ヘッダー画像を変更してみましょ... #header-pict {background:url(images/header_x-mas.png) no... ヘッダー画像を配置しているdivに画像を背景として設定します。 Webからフリーの画像を集めてきて、画像ソフトで適当に配置・... これだけで結構雰囲気が変わりますね。でも、別のテーマかと... #ref(site://uploads/elfinder/x-mas-image010.jpg,center,mw... ***背景画像の変更 夜、街に雪が降り積もるイメージ。街が雪で覆われてサンタさ... で、ネットで色々探しましたけど、良いデザインのものは有料... ということで、アイデアを色々と集めて、Photoshopで作ってみ... #ref(site://uploads/elfinder/x-mas-image012.jpg,center,mw... これを背景画像として使います。横方向に連続した背景として... body {background:url(images/x-mas_back.png) repeat-x;} #ref(site://uploads/elfinder/x-mas-image014.jpg,center,mw... わぁ～い、雰囲気がでましたね～(*^O^*) でも、ヘッダー画像のイメージがちょっと合いません。もっと... ***ヘッダー画像を再度変更してみよう では、ヘッダー画像の背景色を透明にして、星と犬を省略して... #ref(site://uploads/elfinder/vimage016.jpg,center,mw:588,... でも、月のシルエット上部が切れて変な感じかな？ ヘッダー画像を配置している要素 #header-pict とラッパー #w... #ref(site://uploads/elfinder/x-mas-image018.jpg,center,mw... さらに良い感じになってきましたね。 ***グローバルメニューの色調変更 次はグローバルメニューです。 色合いを少し変えて、CSS3でグラデーションとボックスシャド... .nav { -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,0.5); -moz-box-shadow: 0px 0px 10px rgba(255,255,255,0.5); box-shadow: 0px 0px 10px rgba(255,255,255,0.5); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: #191970; background: -moz-linear-gradient(top, #191970, #333); background: -webkit-gradient(linear, left top, left bo... background: -o-linear-gradient(top, #191970, #333); } ここでは、影というより光彩を表現するような設定として、背... #ref(site://uploads/elfinder/x-mas-image020.jpg,center,mw... ***コンテンツ部分の変更 あとは、コンテンツ部分ですね。さぁ～て、どうしましょ？ とりあえず、コンテンツの背景を白にしてみましたけど・・・ #featured {background:#fff;} #ref(site://uploads/elfinder/x-mas-image022.jpg,center,mw... 予想どおり、ダサイ。。。 じゃあもうちょっと手を加えて、CSSでborder-radiusを設定し... #featured { background:#fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #ref(site://uploads/elfinder/x-mas-image024.jpg,center,mw... う～ん、これもイマイチ。背景画像が生きません。 ここは、コンテンツ部分を半透明にして背景画像を透かして見... でも、CSSでOpacity設定を使うとコンテンツの内容まで半透明... CSS3のhslaを使うのも良いのですが、まだ対応できないブラウ... #featured { background:url(images/bg_blue.png) ; padding: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); } #ref(site://uploads/elfinder/x-mas-image026.jpg,center,mw... 良いですねぇ～(*^O^*) あとは、各コンテンツ部分のdivにsmartyのcycle関数を使って... <div class="bg_<{cycle values="pink,yellow,green,orange,... .bg_pink { background:url(images/bg_pink.png) ;} .bg_green { background:url(images/bg_green.png) ;} .bg_blue { background:url(images/bg_blue.png) ;} .bg_orange { background:url(images/bg_orange.png) ;} .bg_yellow { background:url(images/bg_yellow.png) ;} おお～ 出来上がりぃ～(^_^)v ***フッターの変更 と思ってスクロールしてみたら・・・フッターが淋しいです。 #ref(site://uploads/elfinder/x-mas-image028.jpg,center,mw... しょうがないですねぇ・・・これもフッター用の画像でも作り... ネットからフリーの街並みのシルエット画像を仕入れてきて、P... #ref(site://uploads/elfinder/x-mas-image030.jpg,center,mw... 決まりましたね。これで行きましょう！ 最後に、各divの幅や間隔を調整して、ついでにh3とかにクリス... #ref(site://uploads/elfinder/x-mas-image031.png,center,mw... **終わりに さて、いかがですか？おわかり頂けましたでしょうか？ エッセンスだけなので、ちょっと判りにくいかな？ でも、まずはチャレンジしてみてはいかがでしょうか？ テーマ作成、楽しいですよ～(*^O^*) ページ名: ぺージ情報 ぺージ名 :XOOPSでWebサイトを作ろう/テーマ x-mas 作成事例 ページ別名 :未設定 ページ作成 :marine 閲覧可 グループ :すべての訪問者 ユーザー :すべての訪問者 編集可 グループ :なし ユーザー :なし Counter: 0, today: 0, yesterday: 0
一覧
検索
最新
ヘルプ
ページへ戻る
履歴
印刷
