自作テーマ適用時のカスタムテンプレートについて

2011年4月28日 at 17:58

まずはじめに、私自身がweb関連のプログラミングを始めたばかりなので、
的外れな質問かもしれませんがご容赦ください・・・。
(ここで質問すべきかどうかも良くわかってません。。。)


数日前にconcrete5を導入し、なんとか自分でテーマを作成して導入までこぎつけました。
自作のテーマを適用したページで「オートナビ」ブロックを配置して、
カスタムテンプレートより「Header Menu」を選択しましたが、
適用されずに変化がありませんでした。
(デフォルトで入っているプレーンヨーグルト等のテーマを適用したときは、
問題なくカスタムテンプレートが適用される(横並びの状態になる))

ソースを見たところ、「オートナビ」ブロックで挿入されるhtmlソースの部分で
cssのクラスをいくつか指定しているのですが、恐らく自作テーマが格納されているディレクトリ(/themes/自作テーマ名/)内の
"main.css"(←自作)にはそのクラスが指定されていないのが原因のようです。

つまり、ブロックを追加することによって挿入されるソースは
"/concrete/themes/{default,greensalad,dark_chocolate等}/main.css"
の参照を前提としている?


そこで質問なのですが・・・、
テーマを自作する場合は、各ブロックで使用されるcssのクラスを考慮して"main.css"を作るべきなのか、
それとも、ブロックだけはデフォルトのテーマが格納されているディレクトリ内の
"main.css"を参照させることができるか、
それとも、私の質問自体が全然的外れなのでしょうか???

ご回答頂けると助かります。
本当に助かります。


<環境>
コンクリートバージョン: concrete5.4.1.1
レンタルサーバ: RealServers(海外の無料レンタルサーバ)
サーバOS: わかりません・・・ 
Apache Version: Apache/2.2.12
PHP Version: 5.2.14
MySQL Version: 5.0.91

Re: 自作テーマ適用時のカスタムテンプレートについて

2011年4月28日 at 23:26
週刊concrete5で取り上げたのですが、ケースバイケースですね。

ブロックごとに別々のCSSを設定することも可能なのですが、テーマを自作する際は、テーマ内のCSSですべて対応したほうが、たくさんのファイルに分けるより管理しやすいかなと思います。

ご参考までに:カスタムテンプレートの作成方法
http://concrete5-japan.org/help/developer/block_custom_template/
 

Re: Re: 自作テーマ適用時のカスタムテンプレートについて

2011年4月29日 at 9:31
返信ありがとうございます!

ということは、やはりブロックで挿入されるソースを調べた上で、
そこで指定されているcssのクラスやらIDを、自作テーマが参照するcss内で指定した方が良いって事ですか・・・。というか指定しないとちゃんと動かない?

テーマを自作するには、
・使用するブロックのソースを調べる
・そこで使用されているcssのクラスやらIDを、自作テーマが参照するcssに指定する
ということでしょうか?
ここまで来るとテーマの自作の敷居はかなり高いですね。。。


そもそも私の認識は下記の通りなのですが、間違っていないでしょうか?
--------------------------------------------------
"/concrete/blocks/"内の「autonav」ブロックの「header menu」カスタムテンプレートのソースでは、例えば
 "echo('<div class="ccm-spacer"> </div>');"
というソースがあります。
自作テーマが読み込むcssには"ccm-spacer"というクラスの指定をしていないので
ブロックがうまく設置されない。
(ちなみに自作のテーマの構成は
http://concrete5-japan.org/help/design/step_by_step/
で紹介されているものと殆ど同じです)
--------------------------------------------------
 

Re: Re: Re: 自作テーマ適用時のカスタムテンプレートについて

2011年4月29日 at 10:19
これはあくまで私の作り方なのでご参考までに…という感じなのですが、大体の場合まず静的なHTMLでサイトを作ってしまい、そのあと必要なPHPのソースを加えてテーマにすることが多いです。

そうするともちろんHTMLでつくっていた段階とあわないことが出てきますので、CSSの方を修正するか、カスタムテンプレートを作ってブロックのソースを自分が作ったCSSに合わせるか。

確かにめんどくさそうな手順ですが、他の某ブログ系CMSだとウィジェットやカスタムメニューの吐き出すソースは基本的に変更できないので、選択肢のあるconcrete5は便利だな…と思っています wink
 

Re: Re: Re: Re: 自作テーマ適用時のカスタムテンプレートについて

2011年4月29日 at 18:25
早速の返信ありがとうございます。

>そうするともちろんHTMLでつくっていた段階とあわないことが出てきますので、
>CSSの方を修正するか、カスタムテンプレートを作ってブロックのソースを
>自分が作ったCSSに合わせるか。

やはり自分の作ったテーマに合わせてカスタムテンプレートを作ったりしないと無理なんですね・・・。理解しました。
(cssの編集やカスタムテンプレートをわざわざ作りたくなかったので、理解したくはなかったんですがw)

それでは早速カスタムテンプレートの作成に取り掛かりたいと思います。
ご丁寧にありがとうございました!
マジで助かったッス。
 

Re: Re: Re: Re: 自作テーマ適用時のカスタムテンプレートについて

2011年4月30日 at 0:01
hissyさんの返信を参考にcssを修正したところ解決したので 一応続報記載します。


ソースを追ったのですが自分でcss修正するのが面倒だったので、
デフォルトテーマの"main.css"から"#page #header"クラスの
ulとliとaタグに関する部分だけ、自作の"main.css"にコピーしました。
(オートナビブロックのカスタムテンプレート『Header Menu』に関しては、
この部分だけで十分ぽいのでここだけコピペしました)

上記を実施したところ問題なく動作しました!
 

Re: Re: Re: Re: Re: 自作テーマ適用時のカスタムテンプレートについて

2011年4月30日 at 13:52
どのようなデザインになったんですか?

 参考にさせてください!
 

Re: Re: Re: Re: Re: Re: 自作テーマ適用時のカスタムテンプレートについて

2011年4月30日 at 19:57
実はブロックを配置する場所やらパディング、ライン等の大まかな
レイアウトを作成しただけで、デザインはまだ殆ど手をつけてませんw

hissyさんの仰るとおりhtmlで実際にページ作ってから、
php,cssを編集してテーマ作った方が良いなぁ、と今になってちょっと後悔していますw

ちなみに「オートナビ」ブロックはcss修正後は添付画像のように
カスタムテンプレートがちゃんと適用されています。
添付: block.jpg