1: 2012-12-24 (月) 16:59:49 marine  |
現: 2012-12-24 (月) 19:33:37 marine |
| - | #プレゼント企画 新テーマを題材にした「テーマ作成事例」 | + | *プレゼント企画 新テーマを題材にした「テーマ作成事例」 [#jec9deea] |
| | | | |
| | いよいよ来てしまいました。クリスマスイブ。。。 | | いよいよ来てしまいました。クリスマスイブ。。。 |
| | ということで、「クリスマスらしいテーマ x-mas 」を題材にして、テーマの作成事例を簡単にサクッと説明させていただきますね。 | | ということで、「クリスマスらしいテーマ x-mas 」を題材にして、テーマの作成事例を簡単にサクッと説明させていただきますね。 |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image004.jpg,center,mw:260,mh:260) |
| | http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=5&lid=77 | | http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=5&lid=77 |
| | | | |
| | 作成するテーマは、文字どおりクリスマスらしいテーマで、ベースは「2012年のトレンド満載テーマその１ trend2012」を利用します。 | | 作成するテーマは、文字どおりクリスマスらしいテーマで、ベースは「2012年のトレンド満載テーマその１ trend2012」を利用します。 |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image002.jpg,center,mw:259,mh:259) |
| | http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=5&lid=59 | | http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=5&lid=59 |
| | | | |
| | そのエッセンスをお届けしたいと思います。 | | そのエッセンスをお届けしたいと思います。 |
| | | | |
| - | | + | **テーマ作成のポイント [#s6b62e23] |
| - | ##テーマ作成のポイント | + | |
| | | | |
| | 元テーマを変更して、新しいテーマ作成するポイントは４つ。背景、ヘッダー画像、フッター画像、各カラムのdivの設定変更です。 | | 元テーマを変更して、新しいテーマ作成するポイントは４つ。背景、ヘッダー画像、フッター画像、各カラムのdivの設定変更です。 |
| | | | |
| | | | |
| - | ##用意するもの | + | **用意するもの [#m2605a78] |
| | | | |
| | 必要なのは、ローカル環境とエディター。必要に応じて画像ソフトを用意しましょう。 | | 必要なのは、ローカル環境とエディター。必要に応じて画像ソフトを用意しましょう。 |
| | | | |
| | | | |
| - | ##さあ、作りましょう～(*^O^*) って、まずは準備からね。 | + | **さあ、作りましょう～(*^O^*) って、まずは準備からね。 [#v61e7b91] |
| | | | |
| | では、ローカル環境「どこでもXOOPS」を起動しましょう。 | | では、ローカル環境「どこでもXOOPS」を起動しましょう。 |
| | | | |
| | そして、次が作業前の大切なポイントです。 | | そして、次が作業前の大切なポイントです。 |
| - | ローカル環境を起動したら、XOOPSの管理画面、互換モジュール＞全般設定で、「thmes/ディレクトリからの自動アップデートを有効にする」を「はい」にしましょう。これを設定していないと、いくらテーマを修正・変更しても反映されずにキィ～ってなってしまいます。 | + | ローカル環境を起動したら、XOOPSの管理画面、互換モジュール＞全般設定で、「thmes/ディレクトリからの自動アップデートを有効にする」を「はい」にしましょう。 |
| | + | #ref(site://uploads/elfinder/x-mas-image006.jpg,center,mw:589,mh:589) |
| | + | |
| | + | これを設定していないと、いくらテーマを修正・変更しても反映されずにキィ～ってなってしまいます。 |
| | | | |
| | 次に、新テーマを作る準備です。 | | 次に、新テーマを作る準備です。 |
| | | | |
| | でも、ここがスタートです。このテーマを選択して、表示してみてください。 | | でも、ここがスタートです。このテーマを選択して、表示してみてください。 |
| | + | |
| | + | #ref(site://uploads/elfinder/x-mas-image008.jpg,center,mw:588,mh:271) |
| | + | |
| | ちゃんと、テーマ「x-mas」として「trend2012」のデザインが表示されている筈です。そして、少しずつ修正・変更していき、ブラウザをリロードするたびにちょっとずつデザインが変化していくことが実感出来るはずです。 | | ちゃんと、テーマ「x-mas」として「trend2012」のデザインが表示されている筈です。そして、少しずつ修正・変更していき、ブラウザをリロードするたびにちょっとずつデザインが変化していくことが実感出来るはずです。 |
| | | | |
| | + | **作成作業を開始 [#xcd67825] |
| | | | |
| - | ##作成作業を開始 | |
| | | | |
| - | | + | ***ヘッダー画像の変更 [#f1eb18ff] |
| - | ###ヘッダー画像の変更 | + | |
| | | | |
| | まずは、簡単なところから、ヘッダー画像を変更してみましょうか。。。 | | まずは、簡単なところから、ヘッダー画像を変更してみましょうか。。。 |
| - | #header-pict {background:url(images/header_x-mas.png) no-repeat;} | + | #header-pict {background:url(images/header_x-mas.png) no-repeat;} |
| | | | |
| | ヘッダー画像を配置しているdivに画像を背景として設定します。 | | ヘッダー画像を配置しているdivに画像を背景として設定します。 |
| - | | |
| - | | |
| | | | |
| | Webからフリーの画像を集めてきて、画像ソフトで適当に配置・・・でも、それだけじゃちょっと淋しいので月のシルエットと星を追加してみました。 | | Webからフリーの画像を集めてきて、画像ソフトで適当に配置・・・でも、それだけじゃちょっと淋しいので月のシルエットと星を追加してみました。 |
| | これだけで結構雰囲気が変わりますね。でも、別のテーマかと言われると、それほどの変化とは言えないかな？ | | これだけで結構雰囲気が変わりますね。でも、別のテーマかと言われると、それほどの変化とは言えないかな？ |
| | + | #ref(site://uploads/elfinder/x-mas-image010.jpg,center,mw:589,mh:589) |
| | | | |
| - | | + | ***背景画像の変更 [#g9456f8b] |
| - | ###背景画像の変更 | + | |
| | | | |
| | 夜、街に雪が降り積もるイメージ。街が雪で覆われてサンタさんがやってきそうな感じが欲しい。では、背景も変えて見ましょうかね・・・？ | | 夜、街に雪が降り積もるイメージ。街が雪で覆われてサンタさんがやってきそうな感じが欲しい。では、背景も変えて見ましょうかね・・・？ |
| | で、ネットで色々探しましたけど、良いデザインのものは有料だったり、利用規程が個人に限る等々の制限があるようですね。しょうがない、作りますか・・・ | | で、ネットで色々探しましたけど、良いデザインのものは有料だったり、利用規程が個人に限る等々の制限があるようですね。しょうがない、作りますか・・・ |
| | ということで、アイデアを色々と集めて、Photoshopで作ってみました。 | | ということで、アイデアを色々と集めて、Photoshopで作ってみました。 |
| | + | #ref(site://uploads/elfinder/x-mas-image012.jpg,center,mw:566,mh:566) |
| | + | |
| | これを背景画像として使います。横方向に連続した背景として設定すると、画面の上部分だけがミッドナイトブルーの空間に雪が降り続くイメージとなることでしょう。 | | これを背景画像として使います。横方向に連続した背景として設定すると、画面の上部分だけがミッドナイトブルーの空間に雪が降り続くイメージとなることでしょう。 |
| | | | |
| - | body {background:url(images/x-mas_back.png) repeat-x;} | + | body {background:url(images/x-mas_back.png) repeat-x;} |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image014.jpg,center,mw:588,mh:588) |
| | | | |
| | わぁ～い、雰囲気がでましたね～(*^O^*) | | わぁ～い、雰囲気がでましたね～(*^O^*) |
| | でも、ヘッダー画像のイメージがちょっと合いません。もっとシックにした方が良さそうですね。それに、グローバルメニュー部分が沈み込んで目立たないし、その下のコンテンツの文字も読みにくいです。 | | でも、ヘッダー画像のイメージがちょっと合いません。もっとシックにした方が良さそうですね。それに、グローバルメニュー部分が沈み込んで目立たないし、その下のコンテンツの文字も読みにくいです。 |
| | | | |
| | + | ***ヘッダー画像を再度変更してみよう [#pcf364c0] |
| | | | |
| - | ###ヘッダー画像を再度変更してみよう | + | では、ヘッダー画像の背景色を透明にして、星と犬を省略してみました。うん。良い感じです。 |
| - | | + | #ref(site://uploads/elfinder/vimage016.jpg,center,mw:588,mh:588) |
| - | では、ヘッダー画像の背景色を透明にして、星と犬を省略してみました。うん。良い感じです。でも、月のシルエット上部が切れて変な感じかな？ | + | |
| | | | |
| | + | でも、月のシルエット上部が切れて変な感じかな？ |
| | ヘッダー画像を配置している要素 #header-pict とラッパー #wrapper の上に指定していたマージンを０にしてみます。 | | ヘッダー画像を配置している要素 #header-pict とラッパー #wrapper の上に指定していたマージンを０にしてみます。 |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image018.jpg,center,mw:588,mh:588) |
| | | | |
| | さらに良い感じになってきましたね。 | | さらに良い感じになってきましたね。 |
| | | | |
| - | | + | ***グローバルメニューの色調変更 [#z5d7b215] |
| - | ###グローバルメニューの色調変更 | + | |
| | | | |
| | 次はグローバルメニューです。 | | 次はグローバルメニューです。 |
| | 色合いを少し変えて、CSS3でグラデーションとボックスシャドウを設定してみます。 | | 色合いを少し変えて、CSS3でグラデーションとボックスシャドウを設定してみます。 |
| | | | |
| - | .nav { | + | .nav { |
| - | -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,0.5); | + | -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,0.5); |
| - | -moz-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); | + | box-shadow: 0px 0px 10px rgba(255,255,255,0.5); |
| - | border-radius: 5px; | + | border-radius: 5px; |
| - | -webkit-border-radius: 5px; | + | -webkit-border-radius: 5px; |
| - | -moz-border-radius: 5px; | + | -moz-border-radius: 5px; |
| - | background: #191970; | + | background: #191970; |
| - | background: -moz-linear-gradient(top, #191970, #333); | + | background: -moz-linear-gradient(top, #191970, #333); |
| - | background: -webkit-gradient(linear, left top, left bottom, from(#191970), to(#333)); | + | background: -webkit-gradient(linear, left top, left bottom, from(#191970), to(#333)); |
| - | background: -o-linear-gradient(top, #191970, #333); | + | background: -o-linear-gradient(top, #191970, #333); |
| - | } | + | } |
| | | | |
| | | | |
| | ここでは、影というより光彩を表現するような設定として、背景色に合うようなグラデーション指定にしています。これで、かなり雰囲気がマッチしてきましたね。 | | ここでは、影というより光彩を表現するような設定として、背景色に合うようなグラデーション指定にしています。これで、かなり雰囲気がマッチしてきましたね。 |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image020.jpg,center,mw:588,mh:588) |
| | | | |
| - | ###コンテンツ部分の変更 | + | ***コンテンツ部分の変更 [#t9ab0a2e] |
| | | | |
| | あとは、コンテンツ部分ですね。さぁ～て、どうしましょ？ | | あとは、コンテンツ部分ですね。さぁ～て、どうしましょ？ |
| - | とりあえず、コンテンツの背景を白にしてみましたけど・・・予想どおり、ダサイ。。。 | + | とりあえず、コンテンツの背景を白にしてみましたけど・・・ |
| - | #featured {background:#fff;} | + | #featured {background:#fff;} |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image022.jpg,center,mw:589,mh:589) |
| | | | |
| - | CSSでborder-radiusを設定したら・・・ | + | 予想どおり、ダサイ。。。 |
| - | #featured { | + | |
| | + | じゃあもうちょっと手を加えて、CSSでborder-radiusを設定したら・・・ |
| | + | #featured { |
| | background:#fff; | | background:#fff; |
| | border-radius: 5px; | | border-radius: 5px; |
| | -webkit-border-radius: 5px; | | -webkit-border-radius: 5px; |
| | -moz-border-radius: 5px; | | -moz-border-radius: 5px; |
| - | } | + | } |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image024.jpg,center,mw:589,mh:589) |
| | | | |
| | う～ん、これもイマイチ。背景画像が生きません。 | | う～ん、これもイマイチ。背景画像が生きません。 |
| | でも、CSSでOpacity設定を使うとコンテンツの内容まで半透明になってしまいます。 | | でも、CSSでOpacity設定を使うとコンテンツの内容まで半透明になってしまいます。 |
| | CSS3のhslaを使うのも良いのですが、まだ対応できないブラウザもあるので、ここは半透明の画像をPhotoshopでサクッと作成して適用してみましょう。ついでに、ボックスシャドウも追加するとこんな感じです。 | | CSS3のhslaを使うのも良いのですが、まだ対応できないブラウザもあるので、ここは半透明の画像をPhotoshopでサクッと作成して適用してみましょう。ついでに、ボックスシャドウも追加するとこんな感じです。 |
| - | #featured { | + | #featured { |
| - | background:url(images/bg_blue.png) ; | + | background:url(images/bg_blue.png) ; |
| - | padding: 20px; | + | padding: 20px; |
| - | border-radius: 5px; | + | border-radius: 5px; |
| - | -webkit-border-radius: 5px; | + | -webkit-border-radius: 5px; |
| - | -moz-border-radius: 5px; | + | -moz-border-radius: 5px; |
| - | -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); | + | -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); | + | -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); | + | box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); |
| - | } | + | } |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image026.jpg,center,mw:589,mh:589) |
| | | | |
| | 良いですねぇ～(*^O^*) | | 良いですねぇ～(*^O^*) |
| | | | |
| | あとは、各コンテンツ部分のdivにsmartyのcycle関数を使って、５つのクラスを順に適用するようにしてみましょう。 | | あとは、各コンテンツ部分のdivにsmartyのcycle関数を使って、５つのクラスを順に適用するようにしてみましょう。 |
| - | <div class="bg_<{cycle values="pink,yellow,green,orange,blue"}>"> | + | <div class="bg_<{cycle values="pink,yellow,green,orange,blue"}>"> |
| | | | |
| - | .bg_pink { background:url(images/bg_pink.png) ;} | + | .bg_pink { background:url(images/bg_pink.png) ;} |
| - | .bg_green { background:url(images/bg_green.png) ;} | + | .bg_green { background:url(images/bg_green.png) ;} |
| - | .bg_blue { background:url(images/bg_blue.png) ;} | + | .bg_blue { background:url(images/bg_blue.png) ;} |
| - | .bg_orange { background:url(images/bg_orange.png) ;} | + | .bg_orange { background:url(images/bg_orange.png) ;} |
| - | .bg_yellow { background:url(images/bg_yellow.png) ;} | + | .bg_yellow { background:url(images/bg_yellow.png) ;} |
| | | | |
| | + | おお～ 出来上がりぃ～(^_^)v |
| | | | |
| - | | + | ***フッターの変更 [#m6ecb0aa] |
| - | おお～ 出来上がりぃ～(^_^)v | + | |
| | と思ってスクロールしてみたら・・・フッターが淋しいです。 | | と思ってスクロールしてみたら・・・フッターが淋しいです。 |
| | | | |
| - | | + | #ref(site://uploads/elfinder/x-mas-image028.jpg,center,mw:588,mh:588) |
| - | ###フッターの変更 | + | |
| | | | |
| | しょうがないですねぇ・・・これもフッター用の画像でも作りますか。 | | しょうがないですねぇ・・・これもフッター用の画像でも作りますか。 |
| | ネットからフリーの街並みのシルエット画像を仕入れてきて、Photoshopでサクッと雪の街らしい雰囲気に加工、フッターの高さを高くして、画像を横に並べて表示するようにしてみました。 | | ネットからフリーの街並みのシルエット画像を仕入れてきて、Photoshopでサクッと雪の街らしい雰囲気に加工、フッターの高さを高くして、画像を横に並べて表示するようにしてみました。 |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image030.jpg,center,mw:589,mh:589) |
| | | | |
| | 決まりましたね。これで行きましょう！ | | 決まりましたね。これで行きましょう！ |
| | 最後に、各divの幅や間隔を調整して、ついでにh3とかにクリスマスらしい画像を表示するようにして完成です。 | | 最後に、各divの幅や間隔を調整して、ついでにh3とかにクリスマスらしい画像を表示するようにして完成です。 |
| | | | |
| | + | #ref(site://uploads/elfinder/x-mas-image031.png,center,mw:588,mh:588) |
| | | | |
| - | ##終わりに | + | **終わりに [#cf7ba092] |
| | | | |
| | さて、いかがですか？おわかり頂けましたでしょうか？ | | さて、いかがですか？おわかり頂けましたでしょうか？ |
ページへ戻る
