CMS名 : Evolution CMS 3.2.2
Bootstrap : Version 5
テンプレート作成に使われる Bootstrap。
特徴は、HTMLのタグに数文字記述するだけで、テンプレートのデザインができること。
Evolution CMS (Evolution)は、テンプレートを作成するのが容易だ。 Bootstrapを導入することによって、より多機能なホームページをつくることができる。 また、画面幅に対応しているため、パソコンやスマホで表示されることを意識しなくてもいい。
Bootstrap 導入で多機能になる例をいくつか上げると、
- プルダウンメニューの作成。
- 色付きボタンの作成。
- ボタンをクリックすると、特定記事をポップアップして表示。
- 表が画面幅からはみ出た時、横スライドバーを表示してくれる。
- ボタンをクリックするだけで、同一記事内の特定行にジャンプしてくれる。
これらは、HTMLのタグに記述するだけでできる。
使えるように設定するのは、特定のプログラムファイルを読み込むだけ。
ここでは、Evolutionでの使用例を紹介。
スライドショー
上図は、画像のスライドショーと文字のスライドショーだ。
HTMLの要素、属性、属性値を記述することでできる。
CSSと組み合わせれば、デザインを好みにできる。
■ 画像のスライドショーについて
画像をフォルダーにアップロードし、ファイル位置をHTMLで記述する。
画像上に後付で文字を表示することができる。 文字位置は、デフォルトで決まっているため、変更したい時はCSSで指定する。 上図では、文字の位置、背景色をCSSで指定した。
スライドする間隔は、HTMLで記述する。 スマホではスワイプで画像が手動でスライドする。
画像は画面幅に自動で合わせてくれる。 文字はスマホ画面では、表示されなくなっていた。
マウスカーソルを画面上に置くと、スライドはストップする。
特定画像にリンクを設定することができる。
■ 文字のスライドショーについて
文字のみのスライドショー。
画像を指定する以外は、同様なことができる。
上図では背景色が黒になっているが、CSSでデザインを変更した。
なぜ、Evolution が Bootstrap と相性がいいのか？
Evolution の特徴として、チャンクというものがある。
チャンクは HTML 、 Javascript 、CSSを自由記述し、ファイル名として登録できる。 記事に {{チャンク名}} を記述するだけで、ブラウザーで開いたときに、チャンクの内容が展開される。
例えば、予め、画像スライドショーを実行させるHTMLをチャンクとして登録する。 記事内に、{{チャンク名}} と記述すれば見た目スッキリした記事になる。
チャンク名に「スライドショー」と日本語で命名できる。
{{スライドショー}}
と記述すれば、上図の画像スライドショーを表示することができ、わかりやすい。
Evolutionの特徴として、もう一つ。
「スライドショーをトップページのみに表示する」の設定を、テンプレートに記述しておけば記事に直接記述しなくてもいい。
この時、テンプレートに記述するのは、一例として
[[if? &is=`[*id*]:=:1` &then={{スライドショー}} ]]
だけ。 とても簡単だ。
#Evolution #CMS #Bootstrap #スライドショー #プルダウンメニュー #チャンク #アップロード #ポップアップ #スライドバー #表
