ウェブ制作のクラウドビジネスをはじめよう！

カスタマイズ性を重視した
bingo!CMSの新たなスキン

無料 / スキン名：PC7-PN-04-7 / 対応バージョン：1.7.3～

今回のスキンの特徴は、ズバリ「カスタマイズ」です

従来のスキンもカスタマイズはできますが、構成や記述が複雑でどこを変更すればいいのかわかりにくいというお声がありました。
そこで、スキンの構成を見直し不要な記述を除いたカスタマイズに特化した専用のスキンを開発いたしました！
さらに、1.7.3へのバージョンアップでスキン管理画面から従来のcssファイルのほかに、index.tplなどのテンプレートファイルの編集が可能になります。
より手軽になったオリジナルスキンの制作を是非ご体験ください。

シンプル

HTMLタグやCSSの記述は必要最小限に。メインのCSSファイルの容量が半分になりました。

コンポーネント

テンプレートファイルをパーツ別に分ける事により、管理や再利用がしやすくなりました。

互換性

今までのスキンの記述方法もそのまま使えるよう互換性を保っています。

新しくなったスキンの構成

今までのスキンでは、１ファイル（index.tpl）に全てのHTMLとSmarty（PHPのテンプレートエンジン。条件分岐などに使用します）が記述されており一部を変更したい場合であっても見通しが悪く、変更部分を探すのにも手間がかかっていました。また、メニューをカバーの上に移動したい、下にしたいなどのちょっとしたレイアウト変更であってもどこからどこまでを移動すれば良いかわからない、などのユーザーの声がありました。

このスキンでは問題点を解決すべく、ファイルをパーツ毎に細分化（コンポーネント化）することで変更する場所をより見つけやすくし、よりわかりやすく、一度作成したパーツを別のスキンでも再利用しやすくする為に構造の最適化を行いました。

スキンを構成するファイルの比較

従来のスキン
メリット
・１ファイルで完結するのでファイルの管理が楽
 
デメリット
・中身が長く煩雑になりがちのため、変更箇所を見つけるのが困難
・再利用性が低い
新しいスキン
メリット
・パーツ単位で使いまわせるため再利用性が高い
・各ファイルの中身が短くなるので変更箇所の把握が簡単
デメリット
・ファイルが多くなるにつれ、ファイルの管理が大変になる

スキン制作時の再利用性の比較

従来のスキン

これまでのスキンでは全て複製してそれを元に新しいスキンを作成するか、全て新規で作成するということしか出来ませんでした。そのため一部分のみを別のスキンでも使いまわしたという場合は、使いまわしたい場所のHTMLタグと、CSSファイルの中から必要な記述を探してコピー＆ペーストしてもっていく必要がありました。

新しいスキン
PC7-PN-4-7

PC7-PN-04-7ではコンポーネント化されているhtmlファイルは各ファイル毎に対応するcssファイル（header.tplならheader.css、sidebar.tplならsidebar.cssなど）が用意されています。従来のように、共通のCSSファイルの中から必要箇所を探してコピー＆ペーストしてもっていくなどのような面倒な作業が不要になります。パーツファイルと対応したcssファイルをそのままもっていくだけで再利用が楽におこなえます。

より簡単になったスキンのカスタマイズ

カバーエフェクトの変更

「PC7-PN-04-7」では３種類のカバー用エフェクトが同梱されています。


  • ケンバーンズ エフェクト
  • フェード
  • スライド

これらはスキンの設定ファイルの変更のみで簡単に利用できます。
htmlやcssを編集する必要はありません。更に設定ファイルは管理画面から変更することもできます。

ヘッダー・カバー・メニューなどの順序入れ替え

これまでのスキンではメニューとカバーの位置などを入れ替えるだけでも、どこからどこまでを入れ替えればいいのか悩んで時間を浪費してしまったり、変更はしてみたもののタグが崩れてしまいレイアウトがぐちゃぐちゃになってしまった！など経験された方も多いと思います。

ですがこれからはそんな悩みは不要です。各パーツが１行、多くても数行にまとまっているので順序の入れ替えだけならHTMLの知識すら不要なほど簡単になりました！

サイドバーの表示と位置

普段使用しているスキンでサイドバーが欲しいと思ったことはありませんか？また、制作段階では仕様が決まっておらず後からサイドバーが必要になって大変だった！など、様々な意見をいただくことがあります。

でも「PC7-PN-04-7」を元に制作を行えばこれからはサイドバーなんて怖くありません。設定ファイルの変更のみでいつでも簡単にサイドバーを利用することができます。更にあらかじめ組み込まれているclassを指定のタグに１つだけ追加することで、左右どちらに表示するかも簡単に変更できます。

今までの機能もモチロン使用できます

テンプレート管理でのデザイン編集

構成の変更をはじめ様々な変更を行っていますが、テンプレート管理でのロゴやカバー画像の設定、背景色・文字・リンク色の変更など既存の機能はそのまま従来どおりご使用いただけます！

その為簡単なサイトであればテンプレート管理からの設定のみで、そのままサイトを制作することも可能です。

ブラウザでのCSS、テンプレートファイルの編集

「bingo!CMS 1.7.3」からはテンプレートファイル（xxx.tpl）もスキン管理から編集することが可能になりました。もちろん今回から追加となった各パーツのテンプレートファイルの編集も可能です。オリジナルファイルのバックアップ機能もついていますので、もし誤ってぐちゃぐちゃにしてしまった場合などもオリジナルのファイルに戻すことができますので安心してご利用いただけます。 ちょっとした変更であればこれからはFTPを使用する必要もありません！

ページトップ