カスタマイズ
ここでのカスタマイズとは、NetCommons3本体に触れていません。内容は、ウィズウィグ・エディター「タグ<>」を使ってコンテンツ表示をNC3の表示に変化を付ける事例の紹介です。NC3は複雑過ぎて筆者の技量では手に負えません。
1.BootstrapCSSをテーマ設定CSSで置換。
全プラグインは、テーマ設定にBootstrapのCSS利用している。このCSSをカスタマイズすれば、ある程度のカスタマイズが可能と思うが、この方法だとかなり危険性が伴う。慎重さとバックアップに充分な対応が必要となる。また、NC3やBootstrapのバージョンアップでそれまでの変更が水泡となる可能性がある。 尚、Bootstrapファイルは文字数が多すぎて、さくらインターネットの場合、ファイルマネージャーでは、文字数超過で直接編集は出来ない。
このページでは、Bootstrapファイルを変更しないで、ページ設定→テーマ設定→テーマファイルを操作して、カストマイズする方法を記述している。CSS文が短く、修正し易いので、安全性が高いと感じる。
テーマ設定ファイルのページ読込は、Bootstrapファイルよりずっと後なので、BootstrapのCSSを後から置き換えることが出来る。また、以下のファイルに追記することでオリジナルのCSSを入れることが出来るので、かなりオリジナルの表現が可能となる。
この事例では、テーマ設定を「none」or「default」で記述している。
利用する2つのファイルの場所(パス)
BootStrapのパス*/app/webroot/components/bootstrap/dist/css/bootstrap.css
テーマDefultのパス*/app/webroot/theme/Default/css/style.css
ファイルの更新方法
1)FTPソフトを利用する。
2)サーバーのファイル機能を使う。
さくらインターネットの場合は、ファイルマネージャーで直接修正する方が楽。
Bootstrapファイルから修正したい目的のCSS要素を探す。
1.ブラウザの開発ツールを使い、どのように表示しているか、CSSを確認する。
調べたい箇所を右クリックする。
Google Chrome:検証(I) Firefox:要素を調査(Q)
2.bootstrap.cssファイルをダウンロードする。
行数:6,834行 と非常に沢山のCSSが記述されている。
このサイトの現在のバージョン:Bootstrap v3.4.0
3.ダウンロードしたファイルから目的のセレクターをテキストエディターで探す。
筆者は、「TeraPad」or「Crescent Eve」で検索窓にセレクターを入れて、検索している。
例えば、メニューのホバー時は、「a.list-group-item」を検索キーにするなど。
2.テーマ設定ファイルにオリジナルCSSを記述。
お知らせプラグインなどwysiwyg(ウィジウィグ)エディタのHTMLタグ内にオリジナルCSSを記述する方法。インラインでCSSを記述出来るが、同じCSSを何度も記述しなければならないので、面倒。特に複数のCSSを当てたい場合、効果的。
更に、CSSファイルに記述しておけば、1箇所を直すだけで、全てに反映される。インラインCSS では、使っている箇所を全て修正が必要であり、段違いに便利。
メニュー | カスタマイズの方法 |
CSSの追加 | テーマDefaltファイルに追記。 |
CSS追加と置換 | テーマDefaltファイルでBootstrapファイルの一部置き換えと新たなCSSを追記。 |
修正ファイルは、上記の「テーマDefaltのパス」と同じ。
使えるプラグインは、ツールボタン付きの以下11個のプラグインです。
- お知らせ
- 掲示板
- ブログ
- カレンダー
- 回覧板
- FAQ
- アンケート
- 小テスト
- 登録フォーム
- 施設予約
- TODO
3.その他カスタマイズ。
上記以外の特殊なカスタマイズです。
一例は、フッター「powered By NetCommons」を非表示にする。