Re: テーマ「Stucco」のカスタマイズについて

2016年4月30日 at 4:40

モモ様

 以下で編集ができます。
 お試しください。

カスタマイズには、カスタマイズしたいテーマファイル一式を
(5.7のインストールされているドキュメントルート)
\packages\themes_stucco\themes\stucco ディレクトリを丸々コピーします。
一旦ローカルへダウンロードして、カスタマイズできる状態にします。
ご承知のとおり、5.7系は、名前空間をキチンと設定しないと、読み込み等を行ってくれませんので、
ダウンロードした、stuccoフォルダ内のpage_theme.php
を開き、以下の要に編集します。(コメント等余計な記述はしないでください)
namespace Concrete\Package\ThemeStucco\Theme\Stucco; (windowsなら\は¥ね)

namespace Application\Theme\Stucco;(windowsなら\は¥ね)

変更ができたら、カスタマイズ用ディレクトリへアップロードします。
\application\themes\stucco

これで、ひとまず、カスタマイズする準備ができました。

0)知っておく事として、CSSを編集するのは、拡張子がcssでなく、lessファイルです。
concrete5(5.7系)は、(標準では)bootstrapが、コンパイル(cssファイルを作成)してくれます。
なので、カスタマイズは、lessファイルを編集、アップロード、ページ更新する作業です。

※ただし、concrete5 5.7系のキャッシュシステムをキャッシュしないように変更しておく必要がございます。(表示速度が多少かかります

concrete5『管理画面』の「システムと設定」→キャッシュとスピード設定で、すべて無効にしてください。
でないと、カスタマイズ結果が反映されません。 次に、「キャッシュをクリア」で、ボタンを押して、キャッシュをクリアします。
できれば、2回押しておくのがポイントです。(詳しくは割愛しますが、一度で消えないことがあるからです)

(エラーがあったときわかるように)「サーバー設定一覧」→「エラーを表示」チェック、「エラー詳細」も出力にしておきます。
※警告の通り、公開される時は元に戻してください。

1)カスタマイズ前知識
\application\themes\stucco\以下css内に、
build   (ここが、カスタマイズするファイル群です)
presets (テーマのベースカラーのファイル)
main.less
があります。

2)背景、リンクの変更(赤とか、青)は、presets 内のファイルの読み込みをmain.lessで指定します。
main.less の @import ”presets/defaults.less” を好きなベースカラーに変更してください。
赤系なら、 akane.less 
そして、presets\akane.less ファイルで、大元の文字サイズや色が設定してあります。
lessでは、変数や、//(行コメント)とかが使えます(詳しくは調べてください)。

3)通常のcssの書き方で追加修正すればいいです。
試しに、css\build\header.less とかで、適当なクラスか、IDに、
background-color: #f00;
とかを追加してみて、色が変わるのをみてください。
それができれは、適宜カスタマイズします。

※ファイル名でおおよそ、察しがつくと思います。
 なお、コンパイルされた、cssは、キャッシュフォルダに作成されますが、ブラウザの開発ツール等では、
 ファイルが、main.cssのコンパイル後の行とかを指すので、クラスやID設定等から、該当ファイルを
 推測してください。タイトルロゴは、header.lessファイル内でしょうかね。

4)背景にファイルセットからの画像を使う場合は、
http://concrete5-japan.org/community/forums/beginner/post-3202/
を参照ください。

以上、ご不明なところあれば、ご連絡ください。

タグ: