Omotenashi-2 (4系)で、ヘッダー・メニュー・各ページ背景等の色を変えたいのですが css を変更すればよいのでしょうか。
例えば、背景赤で文字白抜きにするのは大変でしょうか。
【環境情報】
・baserCMSのバージョン：4.7.5
・レンタルサーバー名：ロリポップ
・使用テーマ：Omotenashi-2 (4系)
・PHPスキル（自己評価）： D
各ブラウザには、以下の画像のような「開発ツール」「」デベロッパツール」と呼ばれる機能があります。
この機能を利用すれば、ご指摘のcssの変更箇所や方法など、の参考になると思います。
「ブラウザ」「開発ツール」などといったキーワードでググってみてください。たくさんヒットすると思いますので、一度これらの開発ツールの機能をご自身で勉強されてみると良いかと思います。
「いいね！」 1
ありがとうございます。
開発ツールは覗いた事ありますので色々試してみます。
cssのトライ＆エラーを繰り返し、ぼんやりではありますが修正方法分かってきました。
カラー変更の方法として、テーマの設定でメイン＆サブカラーの変更が出きることを知り早々試し変更できました。
ところが、https://nishinihon-seitai.com で同じテーマ・同じ設定をしたのですが、サブカラーは反映されるのですがメインカラーが反映されません。
メールでの問い合わせNG等の制約があり、php等で修正したのが原因なのでしょうか。
テーマ設定のテーマカラーの変更機能は、テーマフォルダ内のconfig.cssが無いと機能しません。
おそらく、テーマ内のcssフォルダにもともと入っていたはずですが、それを削除されたのかと思います。
オリジナルのOmotenashi-2テーマを確認して、削除してしまったconfig.cssをテーマ内のcssフォルダに戻し、その上で、再度、テーマ設定の保存行為をすれば、適用されるはずです。
「いいね！」 1
ご教授ありがとうございます。
config.cssはcss内にあったのですが、念の為YU-NAのconfig.cssに置き換え、テーマ設定も再度保存しましたが状況変わりませんでした。
config.css は以下のとおりです。
@charset “UTF-8”;
/* link */
a:not(.topNewsList__link) {
color: LINK !important;
}
a:hover {
color: HOVER !important;
}
a:active {
color: LINK !important;
}
a:visited {
color: LINK !important;
}
.entry h3 a {
color: MAIN !important;
}
.entry h3 a:hover {
color: SUB !important;
}
.categoryLink a {
background: MAIN !important;
}
.entryArea .entryBody .more i {
color: LINK !important;
}
.archiveTitle h3 {
background: MAIN !important;
}
/* header */
.hContact__btn {
background: SUB;
border: 1px solid SUB;
border-top: none;
}
.hContact__btn:hover .hContact__btn–text,
.hContact__btn:hover .fa {
color: SUB;
}
.gNav {
background: MAIN;
}
.gNav ul {
background: MAIN;
}
.gNav ul li a {
color: #FFF !important;
background: MAIN !important;
}
.nav-menu__box {
background: MAIN !important;
}
.spMenu__btn {
background: MAIN !important;
}
/* button */
.btn {
background: SUB !important;
}
/* side navi */
.blogWidget h3 {
background: MAIN !important;
}
/* footer */
.fContact__btn .btn:hover {
}
.snsList li a i {
color: MAIN !important;
}
footer {
background: MAIN !important;
}
.pagetop a {
background: LINK !important;
}
/* index */
.topNews__box {
background: MAIN !important;
}
/* other */
.section__hl:before {
background: MAIN !important;
}
使用しているロリポップレンタルサーバーの契約がYU-NAはベーシックプラン、西日本整体学院はライトプランであることが関係しているのでしょうか。
上記ページに以下のように記載があります。
theme/omotenashi2/Layouts/default.php内にあるはずの<?php $this->BcBaser->scripts() ?> の記述を削除されたりしていないでしょうか？
西日本整体学院のサイトは、config.cssやtheme/omotenashi2/Layouts/default.php をコピーしたり修正したりして対応できました。
しかしながら、同テーマを使用した https://e-matsumoto.net/ は、config.css もありますし、 theme/omotenashi2/Layouts/default.php は他と同様、 mainVisualのテキスト修正と <?php $this->BcBaser->js(array( 下に ‘jquery-3.4.1.min.js’, を追加しただけなのですが何故か対応できませんでした。
https://e-matsumoto.net/の config.css は以下のとおりです。
@charset “UTF-8”;
/* link */
a:not(.topNewsList__link) {
color: LINK !important;
}
a:hover {
color: HOVER !important;
}
a:active {
color: LINK !important;
}
a:visited {
color: LINK !important;
}
.entry h3 a {
color: MAIN !important;
}
.entry h3 a:hover {
color: SUB !important;
}
.categoryLink a {
background: MAIN !important;
}
.entryArea .entryBody .more i {
color: LINK !important;
}
.archiveTitle h3 {
background: MAIN !important;
}
/* header */
.hContact__btn {
background: SUB;
border: 1px solid SUB;
border-top: none;
}
.hContact__btn:hover .hContact__btn–text,
.hContact__btn:hover .fa {
color: SUB;
}
.gNav {
background: MAIN;
}
.gNav ul {
background: MAIN;
}
.gNav ul li a {
color: #FFF !important;
background: MAIN !important;
}
.nav-menu__box {
background: MAIN !important;
}
.spMenu__btn {
background: MAIN !important;
}
/* button */
.btn {
background: SUB !important;
}
/* side navi */
.blogWidget h3 {
background: MAIN !important;
}
/* footer */
.fContact__btn .btn:hover {
}
.snsList li a i {
color: MAIN !important;
}
footer {
background: MAIN !important;
}
.pagetop a {
background: LINK !important;
}
/* index */
.topNews__box {
background: MAIN !important;
}
/* other */
.section__hl:before {
background: MAIN !important;
}
default.php は以下のとおりです。
<?php $this->BcBaser->charset() ?> <?php $this->BcBaser->title() ?> <?php $this->BcBaser->metaDescription() ?> <?php $this->BcBaser->metaKeywords() ?> <?php //OGP //===================================== $siteName = $siteConfig["name"]; $siteUrl = $siteConfig["name"]; $description = mb_substr( $siteConfig["description"] ,0, 297); //サイトの説明文297文字以内 $title = $this->BcBaser->getTitle(); //ページタイトル95文字以内 $type ="website"; //記事はarticle, それ以外(HOME、固定ページ）はwebsite $url =$this->BcBaser->getUri($this->BcBaser->getHere()); $publisher = ""; //著者のFacebookページURLかID。FacebookページのFollowボタンを表示できるようになる。 $fb_id = ""; //FacebookのAPP ID $author = "@mune_nori"; //Twitter Cardに表示されるアカウント名 $domain = "munerin.com"; //Twitter Cardに表示されるドメイン名 $eyeCatch = "/theme/omotenashi2/img/common/ogp_img.png"; //デフォルトの画像をフルパス指定（アイキャッチが無い場合） //ブログ記事の場合はアイキャッチ画像を出力 if (!empty($post)) { $type ="article"; $num = 297; //説明文の文字数制限（本文から抜き出し） $str = strip_tags($post[‘BlogPost’][‘detail’]); //タグ除去 $str = str_replace(array("\r\n","\n","\r"), ”, $str); //改行除去 if(mb_strlen($str) >= $num) { $description = mb_substr($str, 0,$num-1)."…"; } else { $description = $str; } //タイトルにはサイトタイトルを含めない $title = $this->Blog->getPostTitle($post,false)." – ".$siteConfig["formal_name"]; //ページタイトル95文字以内 $blogName = $post["BlogContent"]["name"]; $baseCurrentUrl = "/".$blogName . ‘/archives/’; $baseCurrentImgUrl = "/files/blog/".$blogName . "/blog_posts/"; $eyeCatch = $this->BcBaser->getUri( $baseCurrentImgUrl . $post["BlogPost"]["eye_catch"]); } ?> <?php // Twitter Cardsの種類指定 ?> <?php // 写真左上 ：「アカウント名」の表記（無くてもOK） ?> <?php // by (投稿者) ：写真下の 「By アカウント名 @TwitterID 」（無くてもOK）?> <?php $this->BcBaser->icon() ?> <?php $this->BcBaser->rss('ニュースリリース RSS 2.0', '/news/index.rss') ?> <?php $this->BcBaser->css(array( 'style')); ?> <?php $this->BcBaser->js(array( 'jquery-3.4.1.min.js', 'admin/functions', 'jquery.easing', 'common')); ?> <?php $this->BcBaser->scripts() ?> <?php if ($this->BcBaser->isHome()): ?> <?php endif ?> <?php if (!$this->BcBaser->isHome()): ?> <?php endif ?> <?php $this->BcBaser->googleAnalytics() ?>
<body<?php if ($this->BcBaser->isHome()): ?> class=“index”<?php endif ?>>
<?php $this->BcBaser->header() ?>
<main>
<?php if (!$this->BcBaser->isHome()): ?>
<aside class="breadcrumb">
<nav class="container">
<?php $this->BcBaser->crumbsList(); ?>
</nav>
</aside>
<?php endif ?>
<?php if ($this->BcBaser->isHome()): ?>
<?php $this->BcBaser->flash() ?>
<div class="indexContents">
<div class="mainVisual">
<div class="mainVisual__inner">
<h2 class="mainVisual__hl fontNotoSerif">泉都別府で1943年開院の小児科医院<br>バイリンガルの医師が、お子様の健康と笑顔をお守りします<br>【 医療法人 松本小児科医院 】</h2>
<?php $this->BcBaser->mainImage(array('num' => 5, 'all' => true, 'class' => 'mainVisualList')) ?>
</div>
</div>
<div class="container">
<section class="topNews">
<div class="topNews__box">
<h2 class="topNews__hl fontNotoSerif">お知らせ</h2>
</div>
<div class="topNewsList">
<?php $this->BcBaser->blogPosts('news', 3) ?>
</div>
</section>
</div>
<?php $this->BcBaser->content() ?>
</div>
<?php else: ?>
<article class="contents">
<?php $this->BcBaser->content() ?>
</article>
<?php endif ?>
</main>
<?php $this->BcBaser->element('footer_contact'); ?>
<?php $this->BcBaser->footer() ?>
<?php $this->BcBaser->func() ?>
すいません、状況がよくわからないので、ひとつ提案ですが、
一度、その環境で、全く手を入れていないオリジナルの「Omotenashi2」でテーマ設定などの機能を確認されてみてはどうでしょうか？
オリジナルで、機能が問題ないなら、 @T.Sumii のテーマ改修に問題があるのでしょうし、
オリジナルで、機能が問題あるなら、そもそもの環境になにか原因があるのではないでしょうか。
独自ドメインでの再インストールを何度か試す中、以下の設定であっけなく再インストールでき、config.css も問題無く対応できました。
・ロリポップ側の各セキュリティー一時解除
・高速安定化を図るロリポップ！アクセラレータも一時解除
・データベースはSQLiteに（ライトプランの場合）
初期段階で無理やりインストールしてしまったのが原因でした。
ソールチェック等お手間を取らせてしまい申し訳ありませんでした。
今後ともよろしくお願いいたします。
以前にご指摘したようにロリポップサーバーでのサイト運用には、以下のような注意点があります。
是非、今後も継続的に注意して運用ください。
また、
とのことですが、4系に限らずSQLiteを利用した場合は、以下のバグが存在します。
運用上の注意を怠ると、データベースの構造が壊れてしまうケースに遭遇する可能性があります。
以下も是非お読みいただき、継続的な注意をしていただいた方がいいと思います。
