wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2017/09/24

こんにちは、管理人@SS_mshpです。

今回は、前回ちょっとインストールした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リニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト制作 【タグ】 -

  関連記事

ワードプレスサイトの独自ドメイン解除方法

今回は、以前『ワードプレスに独自ドメインを設定する方法』を書きましたが、 …

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作につい …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もS …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法 …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』では …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …