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』などですね。

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

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


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

関連記事

【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)
【無料ホームページビルダー】Ameba Ownd(アメーバ オウンド)で、サクッとかっこいいサイトを作ってみる
WordPressサイトの独自ドメイン解除方法
WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法
【WordPress更新情報表示】php/wp組み込みファンクション(fetch_feed)で取得と、プラグインで表示どちらが良い?
スターサーバー・フリー WPプランでサイトを作ったから、速度・広告の出かた・運用のコツなどをチェックしたよ!
【おすすめWordPressテーマ】Maxwell~シンプル・洗練されたブログメディア向きテーマ・スライダーやレイアウト変更も簡単
【WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示
【悲報】アメブロがヤバい(特に無料プラン・スマホレイアウト)書いても書いても売れないのは何故?
ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法
【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok
googleアドセンス広告で、競合他社の広告を自社サイトに表示させない方法