トップページ関連の設定ファイルを変えてみる

変えたい所

[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>

Top