baserCMS 基本設定、サイドバー、トップページカスタマイズ

この記事は約12分で読めます。

baserCMSで公開サイトを作るときに必ず行う設定、というのがあると思います。サイトの名称やdescriptionなど基本的なことも管理画面から設定できます。その他、かならずやるだろうなぁと思われるカスタマイズについて書きます。

基本設定をする

管理画面の システム管理 をクリック

サイト基本設定 画面になります。この内容を自社サイト用に修正します。

こんな感じです。ここで オプション をクリック。

スマートURL を

オン にして、

保存 します。

スマートURLとは、通常baserCMSの各ページのURLは、

http://サイトURL/index.php/about

このようにちょっと長い感じなのですが、スマートURLを オン にすると、

http://サイトURL/about

このように index.php がとれた短いURLになります。この機能を使うにはサーバー側に必要な設定がなされているかとかの問題もあるので、

スマートURLについて

こちらのページなどを参照すると良いかと思います。一応、私が試した範囲では特に問題なく、正しく動いていました。

サイトオリジナルのfaviconを入れる

ブラウザでサイトを開いたときに表示される、サイトオリジナルのfaviconを入れます。favicon.icoを作ったら、使っているテーマフォルダの直下に置きます。

これで、ブラウザでサイトを開いたときに、

オリジナルのfaviconが表示されるようになりました。

サイドバーのカスタマイズをする

カスタマイズ前のサイドバーは、

このように表示されています。

この部分は書いてあるように ウィジェット管理 で変更できそうです。確認してみます。

ウィジェット管理 をクリック。

標準サイドバー の 編集 をクリック

利用中のウィジェットリンクがあります。内容を変更したり、削除することもここからできそうです。

試しにこのようにして変更してみると、

反映されました。ウィジェット管理で簡単に変更できそうなのでここは今のところ、このままにしておきます。

この部分は、

app\webroot\theme\nada-icons_ryus(コピーしたnada-iconsのテーマ名)\elements\sidebox.php

で表示しているようです。

    <div id="sidebox">
        <div id="sidebox-bnr">
            <?php $this->BcBaser->img('./sidebox/icons_banner_01.png', array('url' => '/#')); ?>
        </div>
        <div id="sidebox-bnr2">
            <?php $this->BcBaser->img('./sidebox/icons_banner_02.png', array('url' => '/#')); ?>
        </div>
    </div>

もしかしてあとでバナーを入れるかもしれないけど、今は表示しないように、

    <!--div id="sidebox">
        <div id="sidebox-bnr">
            <?php $this->BcBaser->img('./sidebox/icons_banner_01.png', array('url' => '/#')); ?>
        </div>
        <div id="sidebox-bnr2">
            <?php $this->BcBaser->img('./sidebox/icons_banner_02.png', array('url' => '/#')); ?>
        </div>
    </div-->

コメントアウトして保存すると、

表示されなくなります。

電話番号などについて修正します。

app\webroot\theme\nada-icons_ryus(コピーしたnada-iconsのテーマ名)\elements\sidebox.php

に記述してあります。

    <div id="sidebox">
        <div id="sidebox-bnr3"><?php $this->BcBaser->img('./sidebox/sidebox_logo.png'); ?></div>
        <div id="sidebox-txt" class="sidebox-text">baserCMS</div>
        <div id="sidebox-bnr4">
            <?php $this->BcBaser->link($this->BcBaser->getImg('./sidebox/sidebox_contact.png', array('title' => 'お問い合わせ', 'alt' => 'お問い合わせ')), '/contact'); ?>
        </div>
        <div id="sidebox-txt">
            <p class="sidebox-telfax">TEL:092-000-55555</p>
            <p class="sidebox-text">受付時間 平日9:30~18:30</p>
            <p class="sidebox-telfax">FAX:092-000-55555</p>
            <p class="sidebox-text">受付時間 24時間</p>
        </div>
    </div>

この部分です。名称や電話番号などを適宜書き換えて保存します。

使われている画像も自社のモノに置き換えます。

app\webroot\theme\nada-icons_RYUS\img\sidebox\sidebox_logo.png

を置き換えます。

これで表示すると、

この部分のカスタマイズが終わりました。

最後に、Facebookページを自社のものに変えます。

ここのソースは、

app\webroot\theme\nada-icons_ryus(コピーしたnada-iconsのテーマ名)\elements\sidebox.php

にあります。

    <!--FB-->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <div class="fb-like-box" data-href="http://www.facebook.com/basercms" data-height="300" data-width="214" data-show-faces="true" data-stream="false" data-border-color="#DDDDDD" data-header="false"></div>
    <!--FB_END-->

このコードの、

data-href="http://www.facebook.com/basercms"

という部分がFacebookページのURLを指定するところなので、自社のページのURLに置き換えて保存します。

Facebookページの表示が置き換わりました。

トップページ下部のカスタマイズをする

トップページのカスタマイズですが、

青で囲った上部のバナーとニュース関連の表示についてはまだ、どうするか決めていません。ということでとりあえず、下部の赤で囲った部分についてカスタマイズします。

「文字と写真を変えるだけ…」のバナー部分はサイドボックスと同様に、あとで使うかも?しれないのでコメントアウトしておきます。
ソースは、

app\webroot\theme\nada-icons_ryus(コピーしたnada-iconsのテーマ名)\elements\toppage.php

<div id="top-contents" >
    <div id="top-contents-main">
        <div id="top-bnr">
            <div id="top-bnr-left">
                <?php $this->BcBaser->img('./icons_banner_l_01.png', array('url' => '/#')); ?>
                <p>紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります</p>
            </div>
            <div id="top-bnr-right">
                <?php $this->BcBaser->img('./icons_banner_l_02.png', array('url' => '/#')); ?>
                <p>紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります</p>
            </div>
        </div>
    </div>

</div><!-- top-contents -->

部分です。この部分を

<!-- div id="top-contents" >
    <div id="top-contents-main">
        <div id="top-bnr">
            <div id="top-bnr-left">
                <?php $this->BcBaser->img('./icons_banner_l_01.png', array('url' => '/#')); ?>
                <p>紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります</p>
            </div>
            <div id="top-bnr-right">
                <?php $this->BcBaser->img('./icons_banner_l_02.png', array('url' => '/#')); ?>
                <p>紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります紹介文が入ります</p>
            </div>
        </div>
    </div>

</div --><!-- top-contents -->

コメントアウトします。

表示が消えました。

電話番号などが表示されている部分は、

app\webroot\theme\nada-icons_ryus(コピーしたnada-iconsのテーマ名)\layouts\default.php

にあります。

                        <div id="top-contents-main">
                            <div id="top-main-telfax-title">お気軽にお問い合わせ下さい</div>
                            <div id="top-main-telfax-left">
                                <div id="top-main-telfax-tel">
                                    <p class="top-tel">TEL 092-000-5555</p>
                                    <p class="top-tel-time">受付時間:平日<br>9:30〜18:30</p>
                                </div>
                                <div id="top-main-telfax-fax">
                                    <p class="top-fax">FAX 092-000-5555</p>
                                    <p class="top-fax-time">受付時間<br>24時間受付</p>
                                </div>
                            </div>
                            <div id="top-main-telfax-right">
                                <div id="top-main-webcontact"><?php $this->BcBaser->img('icons_contact.png', array('url' => '/contact')); ?></div>
                                <div id="top-main-serch"><?php $this->BcBaser->element('search') ?></div>
                            </div>
                        </div>

変更するにはここの名称や電話番号などを適宜書き換えて保存します。再表示すると、

このように置き換わりました。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

全般 テーマ baserCMS
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. 山本 より:

    すみません、初心者の質問で非常に恐縮なのですが、
    サイドバーやトップページの下部のカスタマイズをするための、
    ソースにはどこからたどり着けるのでしょうか?

    • 兎本 美佳 より:

      山本さん、こんにちは!サイトをつくったのがちょっと前なので記憶が薄れちゃってるんですが https://usortblog.com/basercmsbasic/ baserCMS 基本設定、サイドバー、トップページカスタマイズ というタイトルからして、なにか役立つことが書いてあるかもしれません。よろしければご覧ください(^^)/

  2. 安積優樹 より:

    兎本さま

    初めてメール致します。

    起業をきっかけに初めての自社ホームページ作りに挑戦しております。

    初心者なもので、悪戦苦闘しております。

    この記事で何時間も悩んでいたことが解消されました。

    ありがとうございます。お礼まで。

    • 兎本美佳兎本美佳 より:

      安積さん、こんにちは!ご利用ありがとうございます。悩んでいたことが解決されたということ、お知らせいただきありがとうございます。お役に立ててうれしく思います(^^)/

  3. 林 茂 より:

    お世話になります。
    役立つ情報ありがとうございます。
    大変勉強になりました。
    教えていただければありがたいのですが、
    nada iconsをテーマで利用させていただいているのですが、
    トップページの左側の項目の横にあるアイコンの設定はどこですれば良いのでしょうか?
    (構築後は、ホーム、会社案内、サービス、新着情報となっている左側のアイコンです。)
    項目を増やしていったのですが、増えた項目のアイコンの中身が無い状態です。
    自分なりに色々調べたのですが、50種類のアイコンを自由にカスタマイズしよう。
    Fireworksを利用する等のページしか見つけられませんでした。

    突然すみませんが、よろしくお願いします。

  4. […] baserCMS 基本設定、サイドバー、トップページカスタマイズ | RYUS blog […]

  5. 上藤 より:

    こんにちは。
    上記で「この辺はまだどのようにするか決めていない」と青線で囲ってある
    berser cms newsの部分などはどのようにカスタマイズすればよいのでしょうか?

    • 兎本美佳兎本美佳 より:

      上藤さん、こんにちは!コメントありがとうございます。

      トップページの画像のカスタマイズですが、だいぶ前に行ったことですっかり忘れてしまいましたm(_ _)m。テーマによってカスタマイズ方法が異なると思いますが、メイン画像などは管理画面から変えられるのではないかと思います。またニュースなどのブロックを出すか出さないかも管理画面から指定できるはずです。

      facebookに https://www.facebook.com/groups/basercms.zatsudan/ basercmsの雑談広場というところがあるので、こちらでも質問すると何か分かるかもしれません。

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。