ここをいじればここが変わる！全体デザイン編

ここをいじればここが変わる！全体デザイン編

　まず、全体のデザインですが、前ページのHTMLの構造を見てもらえば分かる通り、表示される部分はすべて#pageでラップされています。

　実際にCSSでも、この#pageにページ全体の幅などが指定されています。まずはここから変えていきましょう。標準で幅は800pxになっています。今回は、950pxの固定幅にすることにしてCSSをいじっていきます。実際に編集していくCSSファイルは、テーマフォルダ[themes/example]にあるmain.cssです。

　Concrete5では、デフォルトで設定されているcssが、main.cssとtypography.cssの2つだけで、行数も少なくシンプルな作りになっています。

　それでは、main.cssを編集していきましょう。コンテンツの幅は、#pageのブロックにあるwidth:800px;を、width:950pxに変えれば終了です。

　続いて、ツーカラムレイアウトの時におけるサイドバーとメーンコンテンツのバランスを調整していきます。ここで少し悩ましいのが、2つの領域の間にある、点線です。これは幅800pxの画像として用意されています。

　左のサイドバーではtnav_sidebar_left_bg.gif、右のサイドバーではnav_sidebar_right_bg.gifというファイルを、#page、#centralの背景画像に設定することで表示されます。

　一番簡単に変更するには、同じファイル名で別のファイルに置き換えてしまう方法です。また幅を変更したので、それにあわせてbodyとsidebarの幅も調整しておきましょう。

　筆者の場合は、#page、#central、#bodyに対して73％、#sidebarの方には24％という値を設定しました。あとは#page、#central○○で、マージンや余白の調整を行い完了です。

ここをいじればここが変わる！個別のブロック編

　個別のブロックのデザインを変えるのも、全体編との違いはそれほどありません。ブロックを作る時に、テキストコンテンツの場合は、タグを記述し、スタイルを当てていけば良いだけです。筆者の場合は、ツーカラムなら「class="twocolumn_main_box"」と指定してまとめてマージンや背景などの設定を行いました。

　Concrete5が書き出すHTMLにあわせなければいけないブロックの場合は、少し手間がかかります。ブロックの中でよく使われるフォームを例に解説していきましょう。

　フォームは、「form.miniSurveyView table.formBlockSurveyTable」としてHTMLが書き出されますので、CSSで指定してあげればデザインの変更ができます。

.miniSurveyView{ margin-bottom:16px}
.miniSurveyView #msg{ background:#FFFF99; color: #000; padding:2px; border:1px solid #999; margin:8px 0px 8px 0px}
.miniSurveyView table.formBlockSurveyTable td{ padding-bottom:4px }
.miniSurveyView td.question {padding-right: 12px}
.miniSurveyView #msg .error{padding-left:16px; color:#cc0000}
.miniSurveyView table.formBlockSurveyTable td img.ccm-captcha-image{float:none}

　ただし、HTML内に上記のようなスタイルがもう適用されているので、これよりも優先度を上げなければならないという点に注意をしてください。

　項目名は「form.miniSurveyView table.formBlocSurveyTable .question」というセレクタで指定できます。

　また、フォームのinputに対しては「table.formBlockSurveyTable td input[name="Question△△"]」など、属性セレクタを用いることで1つ1つのインプットタグに対してスタイルをつけることもできます。これでフォームのデザイン変更は終了です。