カスタマイズ

ここでのカスタマイズとは、NetCommons3本体に触れていません。内容は、ウィズウィグ・エディター「タグ<>」を使ってコンテンツ表示をＮＣ３の表示に変化を付ける事例の紹介です。ＮＣ３は複雑過ぎて筆者の技量では手に負えません。

１．BootstrapCSSをテーマ設定CSSで置換。

全プラグインは、テーマ設定にBootstrapのCSS利用している。このＣＳＳをカスタマイズすれば、ある程度のカスタマイズが可能と思うが、この方法だとかなり危険性が伴う。慎重さとバックアップに充分な対応が必要となる。また、ＮＣ３やBootstrapのバージョンアップでそれまでの変更が水泡となる可能性がある。　尚、Bootstrapファイルは文字数が多すぎて、さくらインターネットの場合、ファイルマネージャーでは、文字数超過で直接編集は出来ない。

このページでは、Bootstrapファイルを変更しないで、ページ設定→テーマ設定→テーマファイルを操作して、カストマイズする方法を記述している。ＣＳＳ文が短く、修正し易いので、安全性が高いと感じる。
　テーマ設定ファイルのページ読込は、Bootstrapファイルよりずっと後なので、BootstrapのCSSを後から置き換えることが出来る。また、以下のファイルに追記することでオリジナルのＣＳＳを入れることが出来るので、かなりオリジナルの表現が可能となる。

　この事例では、テーマ設定を「none」or「default」で記述している。

利用する２つのファイルの場所（パス）

BootStrapのパス
*/app/webroot/components/bootstrap/dist/css/bootstrap.css

テーマDefultのパス
*/app/webroot/theme/Default/css/style.css

  ファイルの更新方法
１）ＦＴＰソフトを利用する。
２）サーバーのファイル機能を使う。
　　さくらインターネットの場合は、ファイルマネージャーで直接修正する方が楽。

Bootstrapファイルから修正したい目的のＣＳＳ要素を探す。

　１．ブラウザの開発ツールを使い、どのように表示しているか、ＣＳＳを確認する。
　　　調べたい箇所を右クリックする。
　　　Google Chrome：検証（I）　　Firefox：要素を調査（Ｑ）
　２．bootstrap.cssファイルをダウンロードする。
　　　行数：６，８３４行　と非常に沢山のＣＳＳが記述されている。
　　　このサイトの現在のバージョン：Bootstrap v3.4.0
　３．ダウンロードしたファイルから目的のセレクターをテキストエディターで探す。
　　　筆者は、「TeraPad」or「Crescent Eve」で検索窓にセレクターを入れて、検索している。
　　　例えば、メニューのホバー時は、「a.list-group-item」を検索キーにするなど。

２．テーマ設定ファイルにオリジナルＣＳＳを記述。

お知らせプラグインなどwysiwyg（ウィジウィグ）エディタのＨＴＭＬタグ内にオリジナルＣＳＳを記述する方法。インラインでＣＳＳを記述出来るが、同じＣＳＳを何度も記述しなければならないので、面倒。特に複数のＣＳＳを当てたい場合、効果的。
　更に、CSSファイルに記述しておけば、１箇所を直すだけで、全てに反映される。インラインCSS では、使っている箇所を全て修正が必要であり、段違いに便利。

メニュー	カスタマイズの方法
CSSの追加	テーマDefaltファイルに追記。
CSS追加と置換	テーマDefaltファイルでBootstrapファイルの一部置き換えと新たなＣＳＳを追記。

修正ファイルは、上記の「テーマDefaltのパス」と同じ。

 使えるプラグインは、ツールボタン付きの以下１１個のプラグインです。

 

３．その他カスタマイズ。

上記以外の特殊なカスタマイズです。
一例は、フッター「powered By NetCommons」を非表示にする。