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サイト制作関連
【タグ】 -

  関連記事

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示
googleアドセンス広告で、競合他社の広告を自社サイトに表示させない方法
【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok
【悲報】アメブロがヤバい(特に無料プラン・スマホレイアウト)書いても書いても売れないのは何故?
WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも
WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法
ランキングサイト:ブログ村で、複数のブログをひとつのアカウントで管理する方法
【無料レンタルサーバー】スターサーバー・PHP&MySQLプランで、WordPressをインストールする方法
【GRAV vs WordPress速度比較】フラットファイルCMSなので軽めだが、テーマ組み方によってはWordPressもいい勝負
【データベース不使用の軽量ブログシステム】pluck-CMSのインストール方法や機能・ページ出力しかたなどをチェック
【無料で使えるWordPressプラン】スターサーバー・フリー WPプランの、アカウント登録・インストール・設定&公開方法