baserCMS 「bc_sample」「BcThemeSample」テーマでシングルカラムレイアウトを考える

2023/07/07 web

- 2025/2/27 追記

5系「BcThemeSample」テーマについての記述を追記しました。

やれモバイルファーストだのコンテンツ訴求力だのといったデザイン論を持ち出して、今さらシングルカラムレイアウトの是非をアレコレするつもりなどさらさらありません。
ただ、作りたいサイトによって、シングルカラムか2カラムやマルチレイアウトかは、自ずと違ってくるし、自由に選んで試してみることができるといいなぁと思う。
「bc_sample」（5系は「BcThemeSample」）テーマは、2カラム構成のテーマだけれど、せっかくbaserCMSにはレイアウトファイルを簡単に変更できる仕組み（UI）が用意されているのに、サンプルである「bc_sample」テーマや「BcThemeSample」テーマにそれを実感できるレイアウトファイルが用意されていないというのはなんとも勿体ない。あれこれレイアウトを悩まずにシングルカラムや2カラム（ウィジェット欄のアリナシ）に柔軟に切り替えられるとデザインの幅がぐんと広がってテーマとしてのバリュー、もっと言えばbaserCMSのバリューも上がるのになぁ。
無いのなら加えてみようということで、大袈裟に大改造するのは本末転倒だから、シングルカラムレイアウト用のレイアウトファイルを追加して、cssに切り替え用のクラスを追加するくらいで実現しようと思う。

で、まずは「bc_sample」テーマおよび「BcThemeSample」テーマのデザインを少し紐解いてみる。

4.4.1以降、4.8.2（現時点での最新リリース）までのbaserCMSにバンドルされている「bc_sample」テーマ、および現時点（最新リリースの5.1.5時点）の「BcThemeSample」テーマは、レスポンシブ対応。 class="bs-wrap" で括られたボックス要素がコンテンツの領域で、最大幅、つまり、PCビュー1300px (左右のpaddingを含めて）にデザインされている。ちょっと広いなぁーという印象ですが、２カラム（ウィジェット欄アリ）の構成で、メインコンテンツだけを見るとwidth=1000px になっているので、まぁそんなもんかぁという感じ。ただ、PCビュー1300pxを前提にして、シングルカラムレイアウトをデザインするのは、正直ちょっといただけない、というかあまりに間伸びしてしまう。だからと言って、シングルカラムレイアウトだけ、1000px幅にしてマージン代わりのパディングを左右に150pxずつとる。。。というわけにもさすがにいかない。
なので、シングルカラム、2カラムレイアウト共通の最大幅を再考しようと思う。で、どうするか。ネットを読み漁って合理的なPCビュー幅を。。。というのはどなたかにお任せして、ざっくり200pxイジメて1100pxでレイアウトしてみることにします。（考えると言っておいてなんも考えてないw）こうすれば、極端な話し、同じサイト内でシングルカラムと2カラムレイアウトを同居させることだってできて、トップページはシングルレイアウト、ブログやお知らせページは2カラムレイアウトと言ったデザインも可能です。

ここで、条件確認。

用意したシングルカラム用レイアウトファイル（single-layout.php）は、ウィジェット欄の表示エリアを削除している。そのため、シングルカラム用レイアウトファイルを適用した場合、ウィジェット欄がそのページに適用されていたとしても、表示されない。つまり、言い換えるとブログなどウィジェット欄を利用した方が利便性が上がる場合は、是非２カラムを利用してください！というオススメです。

基本的な構想は整理できたので、いざ実践。
まず、シングルカラム用レイアウトファイル（single-layout.php）を作成し、theme/bc_sample/Layoutsフォルダ内に保存する（5系の場合はplugins/BcThemeSample/templates/layoutフォルダ）。
作成方法は、簡単です。Layoutsフォルダ内のdefault.phpをコピーし、 main要素に以下の通りsingle-columnのclass属性を追加する。

    <main class="bs-main-contents single-column">

その上で、以下のsection要素を削除します。

        <section class="bs-sub-contents">
            <!-- /Elements/widget_area.php -->
            <?php $this->BcBaser->widgetArea() ?>
        </section>

以下がsingle-layout.phpのコードです。

4系の場合

<?php
/**
 * baserCMS :  Based Website Development Project <https://basercms.net>
 * Copyright (c) baserCMS Users Community <https://basercms.net/community/>
 *
 * @copyright        Copyright (c) baserCMS Users Community
 * @link            https://basercms.net baserCMS Project
 * @package            Baser.View
 * @since            baserCMS v 4.4.0
 * @license            https://basercms.net/license/index.html
 */

/**
 * レイアウト
 * 呼出箇所：全ページ
 * @var BcAppView $this
 */
?>
<?php $this->BcBaser->docType('html5') ?>
<html>
<head>
    <?php $this->BcBaser->charset() ?>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <?php $this->BcBaser->title() ?>
    <?php $this->BcBaser->metaDescription() ?>
    <?php $this->BcBaser->metaKeywords() ?>
    <?php $this->BcBaser->icon() ?>
    <?php $this->BcBaser->css([
        'style',
        'jquery-ui/jquery-ui-1.11.4',
        'colorbox/colorbox-1.6.1',
        'editor'
    ]) ?>
    <?php $this->BcBaser->js([
        'jquery-1.11.3.min',
        'jquery-ui-1.11.4.min',
        'jquery.bxslider-4.12.min',
        'jquery.colorbox-1.6.1.min',
        'i18n/ui.datepicker-ja',
        'jquery-accessibleMegaMenu',
        'startup'
    ]); ?>
    <?php $this->BcBaser->scripts() ?>
    <!-- /Elements/google_analytics.php -->
    <?php $this->BcBaser->googleAnalytics() ?>
</head>
<body id="<?php $this->BcBaser->contentsName() ?>">

<div class="bs-container">

    <!-- /Elements/header.php -->
    <?php $this->BcBaser->header() ?>

    <?php if ($this->BcBaser->isHome()): ?>
        <?php $this->BcBaser->mainImage(['all' => true, 'num' => 5, 'width' => '100%', 'class' => 'bs-main-image']) ?>
    <?php else: ?>
        <!-- /Elements/crumbs.php -->
        <?php $this->BcBaser->crumbsList(['onSchema' => true]); ?>
    <?php endif ?>

    <div class="bs-wrap clearfix">

        <main class="bs-main-contents single-column">
            <?php $this->BcBaser->flash() ?>

            <?php if($this->BcBaser->isHome()): ?>
                <!-- /Elements/top_info.php -->
                <?php $this->BcBaser->element('top_info') ?>
            <?php endif ?>

            <?php $this->BcBaser->content() ?>

            <!-- /Elements/contents_navi.php -->
            <?php $this->BcBaser->contentsNavi() ?>
        </main>

    </div>

    <!-- /Elements/footer.php -->
    <?php $this->BcBaser->footer() ?>

</div>

<?php $this->BcBaser->func() ?>
</body>
</html>

5系の場合

<?php
/**
 * baserCMS :  Based Website Development Project <https://basercms.net>
 * Copyright (c) NPO baser foundation <https://baserfoundation.org/>
 *
 * @copyright     Copyright (c) NPO baser foundation
 * @link          https://basercms.net baserCMS Project
 * @since         5.0.0
 * @license       https://basercms.net/license/index.html MIT License
 */

use BaserCore\View\AppView;
/**
 * レイアウト
 * 呼出箇所：全ページ
 * @var AppView $this
 */
$request = $this->getRequest();
$attributes = $request->getAttributes();
$base = $attributes['base'];
?>
<!DOCTYPE html>
<html>
<head>
    <?php $this->BcBaser->charset() ?>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <?php $this->BcBaser->title() ?>
    <?php $this->BcBaser->metaDescription() ?>
    <?php $this->BcBaser->metaKeywords() ?>
    <?php $this->BcBaser->icon() ?>
    <?php $this->BcBaser->css([
        'style',
        'jquery-ui/jquery-ui-1.11.4',
        'colorbox/colorbox-1.6.1',
        'editor'
    ]) ?>
  <?= $this->BcBaser->declarationI18n() ?>
    <?php $this->BcBaser->js([
        'vendor/jquery-1.11.3.min',
        'vendor/jquery-ui-1.11.4.min',
        'vendor/jquery.bxslider-4.12.min',
        'vendor/jquery.colorbox-1.6.1.min',
        'vendor/i18n/ui.datepicker-ja',
        'vendor/jquery-accessibleMegaMenu',
    ]); ?>
  <?php $this->BcBaser->js('common.bundle', true, [
      'id' => 'AdminScript',
    'data-baseUrl' => h($base),
    'data-baserCorePrefix' => \Cake\Utility\Inflector::underscore(\BaserCore\Utility\BcUtil::getBaserCorePrefix()),
    ]) ?>
    <?php $this->BcBaser->js([
        'startup.bundle'
    ]); ?>
    <?php $this->BcBaser->scripts() ?>
    <!-- /Elements/google_analytics.php -->
    <?php $this->BcBaser->googleAnalytics() ?>
</head>
<body id="<?php $this->BcBaser->contentsName() ?>">

<?php $this->BcBaser->func() ?>

<div class="bs-container">

    <!-- /Elements/header.php -->
    <?php $this->BcBaser->header() ?>

    <?php if ($this->BcBaser->isHome()): ?>
        <?php $this->BcBaser->mainImage(['all' => true, 'num' => 5, 'width' => '100%', 'class' => 'bs-main-image']) ?>
    <?php else: ?>
        <!-- /Elements/crumbs.php -->
        <?php $this->BcBaser->crumbsList(['onSchema' => true]); ?>
    <?php endif ?>

    <div class="bs-wrap clearfix">

        <main class="bs-main-contents single-column">
            <?php $this->BcBaser->flash() ?>

            <?php if($this->BcBaser->isHome()): ?>
                <!-- /Elements/top_info.php -->
                <?php $this->BcBaser->element('top_info') ?>
            <?php endif ?>

            <?php $this->BcBaser->content() ?>

            <!-- /Elements/contents_navi.php -->
            <?php $this->BcBaser->contentsNavi() ?>
        </main>

    </div>

    <!-- /Elements/footer.php -->
    <?php $this->BcBaser->footer() ?>

</div>

</body>
</html>

次にstyle.cssを変更します。説明はさておき、以下画像のハイライト箇所を変更、追記します。
左側のペインがオリジナルのstyle.css、右側が変更内容になっています。大した数ではないと思います。

画像の説明

ざっくり、説明するとPCビュー幅1100pxを前提として、wiidth固定されていた要素を基本的にwidth=100%に変更することで、1カラムレイアウトの場合に柔軟に拡張させようという発想。1カラムレイアウトでウィジェットエリアが無ければ、max-widthで制限したサイズまで自然に広がってくれます。
また、現時点（ver.5.1.5）での5系の「BcThemeSample」テーマでも、cssの該当行番号は違うものの上述のステップと同様です。以上で準備は全て完了です。

後は、管理画面で、シングルカラムを採用したいページの情報編集画面＞オプション＞レイアウトテンプレートのセレクトボックスから「single-layout」を選択するだけです。

是非、試してみてください。

baserCMS 「bc_sample」「BcThemeSample」テーマでシングルカラムレイアウトを考える

- 2025/2/27 追記

コメント

Related posts