- 2009-12-04 (金) 14:06
スキン切り替えによりデザインを変更するplala Broach用の着せ替えテンプレートです。
スキン一覧
http://blackbird.stylefree.info/skin/
着せ替えテンプレート利用方法
http://blackbird.stylefree.info/use/
サイドバー項目の移動と削除、ブログパーツなどの追加方法
http://blackbird.stylefree.info/template/custom/
動作サンプル及びサポートブログ
http://pub.ne.jp/blackbird/
着せ替えテンプレートとは
broachのテンプレートでは
Broachの公式テンプレートの場合、HTMLとCSS（スタイルシート）が一対になっています。なのでテンプレートを変更する場合はHTMLの変更も余儀なくされます（一部例外あり）。そのため、既にカスタマイズしたHTMLを使っている環境でテンプレートを変更するには、再度HTMLのカスタマイズを強いられることとなりデザイン変更をするには多大な時間と労力を要します。
着せ替えテンプレートでは
blackbirdの着せ替えテンプレートでは全てのスキンデザインで共通のHTMLを利用しています。一度設置したブログパーツやバナーなどはそのままにデザインを変更することが可能です。（既に設置しているブログパーツなどを継続して利用する場合、レンタルテンプレート導入時にHTMLを編集する必要があります。現在使用中のテンプレートHTMLにそのままスキンを適用できるわけではありません）
スキンデザインファイル（スタイルシート）は当サイトのサーバーから呼び出しますので、CSSの知識は必要ありません。簡単なHTMLの変更のみでスキンを切り替えることができます。
着せ替えテンプレートの仕様
- 簡単な修正だけでデザイン変更
- JavaScriptによる簡易スパム対策（コメント・トラックバック）
- コメント・トラックバック・リンクを含む全ページ統一デザイン
- 表示確認済みブラウザ（全てWindowsでのみ確認）
- Internet Explorer 7 , 8
- Forefox 3.5.3
- Opera 10.0
- Google Chrome 3.0.195.25
- 2カラムスキン適用時の横幅
- 全体 800px
- 記事部分（内部幅） 約550px
- サイドバー（内部幅） 約200px
- 3カラムスキン適用時の横幅
- 全体 1000px
- 記事部分（内部幅） 約550px
- 左サイドバー（内部幅） 約180px
- 右サイドバー（内部幅） 約200px
だいたいの目安です、デザインによって若干の相違があります。
着せ替えテンプレート利用規約
- 着せ替えテンプレートをご利用いただく前に以下の内容をお読みください。
-
- plala Broach専用のサービスです。plala Broach内であれば個人・商用問わずご利用いただけます。
- 着せかえテンプレートのサービスは事前の予告なく変更・終了する場合がございます。
- 着せかえテンプレートの利用により発生した損失・損害に対して当方では一切の責任を負いません。
- 着せかえテンプレートのサービスは当方が契約するサーバー内に収蔵されておりサービス提供者により管理されています。
- 当方の管理外での利用を発見した場合は利用の停止を要求する場合がございます。
ご利用にあたってのご注意
- スキンデザインファイル（スタイルシート）はレンタルですので文字サイズや配色などに不満があっても編集することはできません。
- 当サイトのサーバーにトラブルが生じた場合にデザインが読み込めなくなる可能性があります。（過去一年間に長時間に渡るトラブルが発生した回数は0回です）
- 検索フォームによるリンクキーワード検索には対応していません。（今後の対応予定も無し）
- Broachの機能、ナビゲーションバーには対応していません。（今後の対応予定も無し）
- Broachの機能、ポッドキャスティング には対応していません。（今後対応できるかもしれない）
- Broachの機能、フォトアルバム には対応していません。（今後対応できるかもしれない）
- Broachのカレンダー、カスタイズモードには対応していません。（対応未定）
- Internet Explorer 6 以前のバージョンには対応していません。対応していないブラウザで表示した場合はデザインが崩れることがあります。
非対応ブラウザについて
Internet Explorer 6以前のブラウザには「webページを正確に表示する」という機能に於いて多数の重大なバグが含まれています。
全てのあらゆるブラウザで正確に表示できるソースを書くことが制作者の努力目標ではありますが、バグを含んだブラウザに対応するには多大な労力と時間を必要とします。
既にInternet Explorerのバージョンは8になっており、Fiefox , Opera , Google chrome など、Internet Explorer以外の選択肢も豊富になっている現状で、IE6のために生産性を犠牲にすることは無意味と判断しました、ご了承ください。
着せかえテンプレートでは非対応ブラウザで閲覧した際にブラウザのアップグレードを促す推奨バナーが表示されます。この表示が不要な場合はテンプレート内の以下のソースを削除してください。
<!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'> <a href='#' onclick='javascript:this.parentNode.parentNode.style.display='none'; return false;'> <img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>あなたは旧式ブラウザをご利用中です</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div> </div> <div style='width: 75px; float: left;'><a href='http://www.mozilla.jp' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div> <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&DisplayLang=ja' target='_blank'> <img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'> <a href='http://www.apple.com/jp/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left;'><a href='http://www.google.com/chrome?hl=ja' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div> </div> </div> <![endif]-->
参考
http://www.itmedia.co.jp/news/articles/0908/06/news031.html
