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

      2021/02/16   1934文字

今回は、前回ちょっとインストールした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テーマのデザインをエディットしてみよう

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

テーマの下のほうに、アイコンが3つ並んでいます。紙みたいなのは『コピー』、鉛筆は先ほど書いた『テーマ情報編集』です。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』などですね。

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


【カテゴリ】 - webサイト制作ツール(無料), webサイト制作関連
【タグ】 -

  関連記事

ワードプレスホームページ制作『ブログ記事投稿ページ・固定ページ』使い分け
GRAVの特徴・サーバーインストール方法・初期設定など解説【データベース無し軽量CMS・ちょっとしたサイト向き】
【WordPress更新情報表示】php/wp組み込みファンクション(fetch_feed)で取得と、プラグインで表示どちらが良い?
WPカスタムフィールド~記事にthe_metaでフィールド出力&評価つける・get_post_metaとの違い
スターサーバー・フリー WPプランでサイトを作ったから、速度・広告の出かた・運用のコツなどをチェックしたよ!
baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン
ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法
【悲報】アメブロがヤバい(特に無料プラン・スマホレイアウト)書いても書いても売れないのは何故?
【WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法
WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも