Blog

baserCMSのテーマを作る(3)

いよいよ見た目を少しずつ変えていきます

cssファイルを編集するけど変わらない

 まずは,ヘッダとフッタから見た目を変えようと考え,(テーマフォルダ)/webroot/css/style.cssを開いてそれらしい場所を変更しました。しかし,保存してブラウザをリロードしても何も変わらず,baserCMSのキャッシュをクリアしてもダメで,どうしてだろうと途方に暮れていました。

原因はブラウザのキャッシュでした

 色々調べても原因が分からなかったので,ブラウザのキャッシュを削除したところ,何と変更が反映されました。これですっきりとcssを書き換えることができます。

まずはヘッダとフッタから

 ヘッダとフッタはすべてのページに表示されるので,まずはこの部分を変更します。(テーマフォルダ)/templates/element/header.phpまたはfooter.phpを見てヘッダやフッタに使用されているクラスを確認し,(テーマフォルダ)/webroot/css/style.cssの該当部分を探すところまではできました。しかし,私はcssの知識がないので書かれているコードの意味が分からず,ひとつひとつWebで調べながら書き換えて作業をしています。今回はフッタの文字を大きくして,色を白にしましたが,大きな変更はしていません。

続いてトップページを書き換える

 次は(テーマフォルダ)/templates/layout/default.phpを読み進め,トップページに使われているクラスをチェックして書き換えていきます。今回実施したトップページで一番大きな変更は2カラム表示から1カラム表示にすることです。

style.css内のbs-main-contentsクラスを書き換えて,default.phpでトップページのときは1カラム,それ以外のページのときは2カラムになるようにしました。

上記以外では,トップページ以外で表示されるパンくずリストの文字を大きくし,余白が広いと感じた部分の調整をしました。

ここでトラブル発生

 調子よく作業をしていたのですが,いつの間にかスマートフォン用の画面になったときに表示される三本線のメニューボタンが表示されなくなったことに気が付きました。ボタンがあったであろう場所をタップするとメニュー自体は表示されるのですが,ボタン自体が表示されないのです。

メニュー周りはよくわからなかったので何も変更していないはずなのですが,原因が分からずどうしようという感じです。

とりあえず,元のテーマをコピーしてもう一度カスタマイズすることで表示するようになりました。

画像スライドショーも調整

 画像の表示はできているのですが,薄く表示される枠の余白が左右で異なるなど,気になるところがあるのですが,どこを書き換えればいいのかわかりませんでした。色々調べた結果,バナーを表示するために作成したファイルに記述したbxSliderのスクリプトを書き換えることでうまくいきました。

画像スライドショーに使っているbxSliderというjQueryはWeb上の情報も多く,オプション設定が豊富なので,使い方を勉強したいと感じました。

今回行った変更は,画像の周りの枠線を消す,横幅100%で画像を表示する,トップページとそれ以外のページで画像の表示の仕方を変えるの3点です。

トップページの画像も変更

 画像の大きさをBlogのアイキャッチに使っている画像と同じサイズに変更してみました。大きい画像になったので迫力アップです。

ひとまず,見た目をちょっとだけ変えた感じですが,少しずつオリジナルのテーマにしたいですね。

この記事へのコメント

コメントはまだありません。

コメントを送る

必須
必須  
※ メールアドレスは公開されません
任意
必須
Loading...  画像の文字を入力してください
1
2
3
4
5
6
7
8