baserCMS（ベーサーシーエムエス）サイト制作2～テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS（ベーサーシーエムエス）webサイト制作の続きです。 システムやテーマの構成がどうなっているかにもちょっと突っ込んでみたいとおもいます。ではさっそく編集の様子をみていきましょう。

まずは、baserCMSの基本設計を押さえる（coreテンプレートとテーマ）

基本機能部分のcoreテンプレート

baserCMSのテンプレートには（呼び名がブログと混同でややこしいなー）、テーマのテンプレートのほかに、coreテンプレートがあります。『ブログ、メールフォーム、フィード、アップローダー』などのbaserCMS コアパッケージのことだと思われます。コレの場所は『テーマ管理→コアテンプレート確認』。デザインのテーマとは別です。

基本機能に関するもので、ヘルプによると、通常は書き込みできず、FTPでコピーしたものを編集というように使うそうです。 デザイン変更したい場合は、『テーマのファイルを変更』することになります。

テーマの構成を把握して、効率的にエディットしよう

デザインのテーマの内容を見るには、任意のテーマを選択して『テンプレート編集→レイアウト一覧・エレメント一覧・CSS一覧』などをみます。ここをチェックしておくと、baserCMSテーマがどんな構成になっているかわかるので（フッター調整したいときはfooter.phpとか）、先にチェックする部分です。

例えばエレメント部分は『footer.php・header.php・sidebar.php・toppage.php』というような感じ。CSSが『class.css・responsive.css・top.css』というようになっています（一例です）。

テーマ情報編集は、選択済みテーマだと保存ボタン出ませんでした

テーマの下のアイコンに『テーマ情報設定』というのがあって、『テーマ名・タイトル・説明・制作者・url』などを書けるのですが、どうやら『選択済み（現在適応されているテーマ）だと、保存ボタンが出てこない仕様』のようです。

このように。理由はわかりませんが、テーマを適応する前に書いておいたほうが良さそうです。ここを書き換えても、もとのテーマ著作権表記はフッターにphpで出力されているので、もしそういうライセンス（表示する）でも大丈夫です。

baserCMSテーマのデザインをエディットしてみよう

入り方は、テーマ下部の『テンプレート編集』から

テーマの下のほうに、アイコンが３つ並んでいます。紙みたいなのは『コピー』、鉛筆は先ほど書いた『テーマ情報編集』です。PCディスプレイみたいなアイコンで、テーマの『テンプレート編集』画面に入れます。

パーツごと～例えばfooter.php

試しにエレメント一覧の中にある『footer.php』を調整してみましょう。電話番号が『管理画面で書いたものを出力ではなく、footer.php直接記載だったので、ここで書き換え』というかんじ。また、マップ表示部分などもあって重いから、その表示部分をカットしたりと、シンプルにします。

あとは普通のホームページと同じようにspan classみたいにclass指定がされているので、該当部分のCSSを調整して対応します。

CSSを変えるには？

CSS一覧から、変更したい部分の該当部分を探し出して書けばokです。ただしワードプレス同様、CSSファイルがものによっては長いので、『ctrlキー＋Fでページ内検索窓出して・該当classやプロパティ名を入れて検索』とやると、わからないうちは速いかもしれません。

まとめ

呼び名がかぶったりで混同しそうだったのですが、『coreテンプレート』と『テーマテンプレート』があって、テーマのほうの構成もある程度頭にはいりました。エレメント部分『footer.php・header.php・sidebar.php・toppage.php』などですね。

これとテーマ設定（ワードプレスで言うと、テーマカスタマイザー）を組み合わせて、外枠はできそうです。デモサイトもそんなに時間かけなくてもできそうです。