トップページ関連の設定ファイルを変えてみる
変えたい所
[1].ヘッダーロゴの大きさ
当Webサイト用に、スマホ画面表示対応時のメニューボタンと干渉しない大きさまで大きくする
[2].ヘッダーメイン画像(スライドショー部)の縦幅
画像が大きく場所を取っている為、縦幅を短くしたものに変更する
[3].「NEWS」の表記
「新着」に名称変更する
[4].フッターCopyrightの文字の大きさ、色
文字を大きくし、色も変更する
[5].フッターCopyrightの表記
当Webサイト用の表記に変更する
[6].フッターバナーの削除
不要の為削除(コメントアウト)する
変更対象ファイル
/theme/bc_sample/css/style.css
テーマ「bc_sample」のデザイン(見た目)は、ほぼこのCSSファイルに定義されているようです。
[1] [2] [4] の変更はこのファイルとなります。
/theme/bc_sample/Elements/top_info.php
「NEWS」の記述は、このphpファイルで行っているようです。
[3] の変更はこのファイルとなります。
/theme/bc_sample/Elements/footer.php
フッターの記述は、このphpファイルで行っているようです。
[5] [6] の変更はこのファイルとなります。
変更内容
変更は、以下の手順で行っております。
1.FTPクライアントソフト(FFFTP等)で、該当ファイルをダウンロード(念の為バックアップ取得)
2.ファイルをテキストエディタ(メモ帳等)で、変更
3. FTPクライアントソフトで、該当ファイルを上書きアップロード
/theme/bc_sample/css/style.css
・[1] の対応 ※文字列「header」で検索すると良い
/ * Header
----------------------------------------------- * /
.bs-header {
background-color: #FFF; }
.bs-header__inner {
width: 1260px;
margin: 0 auto;
padding: 0 40px; ← 30px に変更(ロゴの表示枠の開始位置を少し左へ移動)
box-sizing: border-box; }
.bs-header__logo {
margin-top: 30px; ← 20px に変更(ロゴの大きさ変更の為、余白を小さく)
margin-bottom: 30px; ← 20px に変更(ロゴの大きさ変更の為、余白を小さく)
vertical-align: bottom;
max-height: 36px; ← 70px に変更(ロゴの大きさ変更の為、高さを高く)
max-width: 200px; } ← 300px に変更(ロゴの大きさ変更の為、幅を広く)
・[2]の対応 ※文字列「main-image」で検索すると良い
/* Main Image
----------------------------------------------- */
.bs-main-image {
margin: 0 auto;
padding: 0;
display: none;
z-index: 0; }
.bx-wrapper {
margin: 0 auto;
max-height: 560px; ← 400px に変更(メイン画像の高さ)
overflow: hidden; }
・[4] の対応 ※文字列「footer」で検索すると良い
/* Footer
----------------------------------------------- */
.bs-footer {
background-color: #001800;
padding: 80px 0; }
@media screen and (max-width: 768px) {
.bs-footer {
padding: 80px 20px; } }
.bs-footer__copyright {
font-size: 10px; ← 15px に変更(文字の大きさ)
color: #999; ← #ABC900 に変更(文字の色 [Web Color])
width: 1260px;
margin: 0 auto; }
/theme/bc_sample/Elements/top_info.php
< div class="bs-info">
< h2 class="bs-info__head">NEWS< /h2> ← 「新着」変更(文字を大きく)
< ?php $this->BcBaser->blogPosts('news', 5) ?> ← 「blog」に変更(該当するものへ)
< /div>
/theme/bc_sample/Elements/footer.php
< footer class="bs-footer">
< p class="bs-footer__copyright"> Copyright(C)
< ?php $this->BcBaser->copyYear(2008) ?> ← 開始年変更
baserCMS Users Community All rights Reserved. ← 当Web用に変更
< span class="bs-footer__banner">
< a href="https://basercms.net/" target="_blank" class="bs-footer__banner-link">BcHtml->image('baser.power.gif', ['alt' => 'baserCMS : Based Website Development Project']) ?>< /a>
↑ コメントアウト
< a href="https://cakephp.org/" target="_blank" class="bs-footer__banner-link">BcHtml->image('cake.power.gif', ['alt' => 'CakePHP(tm) : Rapid Development Framework']) ?>< /a>
↑ コメントアウト
< /span>
< /p>
< /footer>
