ノノログ

ホーム / ブログ / baserCMS / 実務レベル(のつもり)でBaserCMSのテーマを変更したよ!

実務レベル(のつもり)でBaserCMSのテーマを変更したよ!

BaserCMSのAdbentカレンダー17日目っす!やるっす!

ってなわけで、先日BaserCMSのテーマコンテストがあり受賞作品が次々と公式テーマとして公開されてますのでその一つTwitterのbootstrapを利用した公式テーマを現在のものから変更してみたいと思います。(arataさん作成)
実務レベルってのを基準にしてますので、以下の手順を踏んで変更してみますよ!!

  1. テーマ変更のコンセプトを決める
  2. 現状のページを全て洗い出す
  3. 現状ののサイトに適用している必要エフェクトを洗い出す
  4. 希望のテーマが現状のものに対応しているか確認・検討する
  5. テーマを変更してみる
  6. エフェクトを適用する
  7. コンセプト通りに出来たか検証する

サイト規模によってはもっと手順が増えますが、私のブログはページ数も少なく検討項目もないので、この程度の手順を前提としてすすめていきますよ!

1. テーマ変更のコンセプトを決める

ますは、コンセプトを決めましょう。コンセプトとは何かアクションを起こす際の目的と言い換えてもいいと思います。
アクションを起こすにはそこに必ず理由があります。その理由を明確にしたものがコンセプトになります。

現状は「とりあえずブログでもつくるか」から始まった自分のサイトは「デザインを考慮されてなく見辛い」という問題点があります。

なので「とりあえずで作ったブログのデザインがしょぼいから、コンテストの受賞作品であるテーマを利用して自分のブログを見やすく、かっこよくしよう」というのがコンセプトになります。
もうちょっと解りやすく言うと「サイトを今よりかっこよくわかりやすくする」ですね。

2. 現状のページを全て洗い出す

コンセプトは決まりましたので、次に現状のページを全て洗い出しましょう。現状のページを洗い出せば、改善するページ、確認が必要なページが全てわかります。
現状は下記のようになってます。

 

・トップページ
・ブログ一覧
  ー>カテゴリ別一覧
  ー>月別アーカイブ一覧
  ー>タグ一覧
・お問い合わせ
サイト規模が小さいので5パターンとなってます。これは楽そうですね。
 

3. 現状ののサイトに適用している必要エフェクトを洗い出す

このブログで独自に適用しているエフェクトは次の二つになります。
・ 全ての画像にjqueryのlightboxをつける
・ ソースコードをハイライト表示する
エフェクトを洗い出したのは、おそらくテーマには標準で含まれてないサイト独自の必要な表現になるため、テーマ適用後に再度設定しなくては行けないものを明確にするためです。

4. 希望のテーマが現状のものに対応しているか確認・検討する

これは実際の業務では現実可能かテストするフェーズですね。今回はbaserCMSの標準的なテーマをカスタマイズしたものなので、”おそらく”問題なく以降できると思います。なので特にテストなどやらずにぶっつけ本番でやってみましょう。

5. テーマを変更してみる

ながながと前置きがありましたが、とりあえずまあやってみましょう。

元のテーマはこれ

変更後はこれ

予想通りソースコードのシンタックスハイライトがあたってませんね。

BaserCMSのテーマの変更は標準機能に従って作っていれば容易に行えます。これはBaserCMSだけに限ったことではないとおもいますが、提供されている機能をちゃんとつかえば変更に強いというメリットですね。

実際には
/your/site/path/app/webroot/themed/ 内に配布されているテーマファイルをぶち込めばOKです。今回利用する「bootstrap_baser」はgithubにて公開されているのでmasterをzipで落としてきます。
それをthemedディレクトリに入れたら準備はOKです。

それでは実際変更してみましょう。
baserCMSの管理画面より、"テーマ管理"メニューをひらいてみます。すると自動的に配備したテーマが管理画面に表示されます。
パーミッションを設定するようおこられましたね・・・言われた通り themed/bootstrap_baser/pages ディレクトリに書込み権限をあたえます。よくわからなかったら「777」とかでいいんじゃないですかね。

パーミッションを変更後管理画面を見ると、注意文がきえてますので適用アイコンより適用させます。
適用後、再度公開ページを見ると・・うまくいってますね!!

 

6. エフェクトを適用する

やはり独自定義したCSSやJSは適用されていませんので独自のエフェクトを適用させるよう修正します。
今回は、洗い出しの時に抜けていた(見落としってやつですねw)
・ ロゴ画像を変更する
の適用ともともと想定していた
・ 全ての画像にjqueryのlightboxをつける
・ ソースコードをハイライト表示する
が、前と同じになるよう、画像ファイル、CSS、JSを再配置して確認です。

7. コンセプト通りに出来たか検証する

ページの全てで想定通りの動作が検証できたらテーマの入れ替えの完了です!!

テーマ変更前より、各コンテンツが見やすくなってますね!
コンセプトと照らし合わせて今回の目標は達成できたとおもいます!!

コーポレートサイトにちょうどいいCMS - BaserCMS

 

 

編集後記・・・・

テーマの変更や、エフェクトの適用にはそんなに手間はかからなかったんですが、今回利用させてもらったbootstrap_baserテーマ公開にはまったく問題ないんですが、管理者ログイン時限定のjavascriptバグがあり当方のmac chrome環境でjavascriptが正しく動作しない問題があり想定よりちょっとだけ時間がかかりましたw
(管理者としてログインしているとyuga.jsを2重に読み込んでしまい正しく動作しない問題)

 

このエントリーをはてなブックマークに追加