ratio_3_2 のカスタマイズ方法

カスタマイズ用のCSSを作成・追加する方法【baserCMS ratio_3_2】

カスタマイズ用のCSSを作成・追加する方法【baserCMS ratio_3_2】
準備編の第三弾です。

第二弾~ショートカットを作成する方法

第一弾~デバッグモード1に切り替える方法

カスタマイズ用のCSSを作成・追加する

デフォルトのCSS(カスケーディング・スタイル・シート)の状態は、この様になっています。
キーボードの「 Ctrl 」と 「 U 」を同時に押してソースを表示。
css1.png
主にデザインを形成しているのは、style.min.css であることが判ります。

これにカスタマイズ用の記述を style.min.css に追加していけば適用されますが、今回は元の状態に戻せる様にしておきます。(運用中のデザイン崩れや誤ってCSSを消してしまわないように)

新規CSSを作成する

レイアウトテンプレート一覧 → CSS一覧に移動します。
(→ レイアウトテンプレート一覧へのアクセス方法
css2.png


下にファイル新規作成があるのでクリックします。
css3.png

ここではファイル名に custom と入力して保存します。(ローマ字でわかりやすい物 例:add)
css4.png

これで custom.css という新たな CSS が出来ました。
css5.png

スポンサードリンク

custom.css を読み込ませる

作成しただけでは読み込まない(適用されない)ので、読み込ませる必要があります。

レイアウトテンプレート一覧に移動します。

トップページ及び固定ページは、default.php ファイル。 ブログ(/news/)ページは、blog.php ファイルでページが構成されています。
css6.png

すべてのページで custom.css を適用したい場合は、両方に読み込ませる記述を追加します。(ブログだけに追加したい場合は blog.php だけ編集します)

どちらも記述に誤りがあると大きくデザインが崩れてしまうので、必ず※ソースのバックアップを取ってから作業しましょう。

※よく解らない場合はコピーファイルを作っておいて下さい。
css7.png
 

まずは blog.php を編集します。

CSSを読み込ませる記述の場所を探して画像のように注意して追記して下さい。
css8.png

実際のコードがこちら。
<?php $this->BcBaser->css(array(
'bootstrap.min',
'font-awesome.min',
'style.min',
'custom'
)) ?>
正しく記述出来たら保存します。

一度ブログ記事に移動して、正しく custom.css が読み込まれているかソースを見てみましょう。

例) http://〇〇〇.com/news/

キーボードの「 Ctrl 」と 「 U 」を同時に押します。(画像はGoogle Chrome
css9.png
この様に表示されていれば、レイアウトの blog.php への記述は正しく出来ています。 (表示されていない場合はページの再読込み【F5を押す】をしましょう)

続いて、正しく読み込んでいるか(スペルが合っているか)確かめる為にこのリンクをクリックします。(Google Chromeだとクリックできます)
css10.png
現時点では真っ白の状態で正常です。


もし、下記のようなエラーが表示された場合は、css の名前(スペル)が間違っていることが判ります。
css11.png


うまくできましたか?


続いて、default.php にも同じ様に custom.css を読み込ませます。(反映させたくない場合は追記の必要はありません)

default.php を編集する

blog.php と同じ様に、半角カンマ ,  と 'custom' を追記して保存します。
css12.png

コード
<?php $this->BcBaser->css(array(
'bootstrap.min',
'font-awesome.min',
'style.min',
'custom'
)) ?>
 
上記でお伝えした方法で、同様にTOPページ及び固定ページで custom.css が読み込まれているか確認して下さい。

うまく読み込めていたらこのページの内容は完璧です(^^)/

これで custom.css に記述した内容が、すべてのページで反映されるようになります。 今後、新たな CSSファイル や JS(ジャバスクリプト)ファイルを読み込ませる方法もほぼ同様ですので、しっかり覚えておいて下さい。

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。  
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧

新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework