カスタマイズ

カスタマイズの方法として、3つの方法を記述。

1.BootstrapCSSをテーマ設定CSSで置換。

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

このページでは、Bootstrapファイルを変更しないで、ページ設定→テーマ設定→テーマファイルを操作して、カストマイズする方法を記述している。CSS文が短く、修正し易いので、安全性が高いと感じる。
 テーマ設定ファイルのページ読込は、Bootstrapファイルよりずっと後なので、Bootstrapの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」を非表示にする。