R'style が考えた、若干重量 XHTML（2006/8/26 更新） を、チョットした条件の下、CSS だけでステキな FC2BLOG 用テンプレートに仕上げてください。
※ プラグインタグ（<!--plugin--><!--/plugin-->）内はご自由に。
プラグイン機能に完全対応するとソースが汚くて仕方ないんですが…
テンプレートが完成したら、CSS 部分のみを CSS ファイルとして保存＆アップロードした後、アップロードした CSS ファイルの URI を教えてください。
最終的に当ブログにおいて CSS 切り替えのみでデザインを変更して見られるようにする予定です。具体的には sug さん作の Alt Style を利用させて頂きます。
今回は余分な要素を入れています。一応3カラムも可能ですし、extraDiv の使い方次第では面白いものができるかも。
私の作品は [samurai_bamboo] です。
続きは XHTML ソースを載せておきます。
PS. 参加された方はこの機会に「css Zen Garden」のデザインも考えられてはいかがでしょうか。
]]>（SEO関係に関しては、「はぁ？何が？」って感じだし、軽い分[simple_code]の方が(略）
以前から Chako さんが危惧されているのは知っていましたが、FC2BLOG 運営側の頑張り次第かなという感じでした。
まぁ、どんな物でもダウンロードして利用するかどうかはユーザの取捨選択に委ねるべきだと思う。ダウンロードして利用する場合に利用規約を付けたらそれはもう「共有テンプレート」じゃないだろうと思うと同時に、どんな初心者でも登録できるようでないとそれはもう「共有テンプレート」じゃないだろうと思うので。
しかし、それにはユーザが過去の物を知ったり、多くの「共有テンプレート」の存在を意識する必要があると思う。つまり、もっと情報を増やしてまともに取捨選択できるような状況にすべきだということ。新着しか知らないのでは話にならない。
という訳で、トップページ（最近は違うらしいが、新着共有テンプレートとかが表示される画面）に「ランダムピックアップ」を表示しておくようにすると良いと思う。それも新着より多く。これがあるだけで随分違うと思う。そうすれば、「これ見た事あるぞ」とかでパクリは誰かが気づくんじゃないかと。まぁ、新着３個なので、６個とか？ 運営側が「画像置くのめんどくさー」とかでテキストリンク置くだけって場合でも効果はあると思う。ただ、その場合も Ajax とかで、画像はマウスオーバーで見れるようにすると良いと思う。っていうか、それくらいやってくれ、と。
たとえ妙な共有テンプレートでも、ダウンロードするかどうかはユーザ次第なのに、新着のみが目立つような現状では新参ユーザが取捨選択するのは難しく、まずは新着からダウンロードするんじゃないかと考えるからです。
要するに、どんなものでもユーザが取捨選択すれば良いし、それができる状況を作るべきだということ。
そうすれば、本当に妙なテンプレートならその内消えるはず。
もちろん、FC2BLOG 運営側が頑張らないといけない部分は多々ある。diff コマンドとか使えば、ある程度自動で調べられるはずだし、何％違うかとかで比較すれば微妙に変更しただけの共有テンプレートだって自動で弾く事もできるだろうと思う。時間掛かるって？ ハードウェア的に何とかしなさいよ、と。並列処理しなさいよ、と。
手動チェックは難しいんだから、その辺はユーザと一緒にやっていこうとか、自動化できる部分だけ自動化しようとかそういうのはないのか、と。正直、「ユーザに手伝ってもらう」っていうのは時代的に結構受けが良いと思うし。
イマイチ FC2BLOG の本気さが見えないのが問題だ。相も変わらず説明なしで何かやってるみたいだし。テストサーバないの？（まさか、「blog1がテストサーバです」とか言わないだろうな…）
だったらBetaとかにしとけよ、と。
「管理画面」にアクセスしたら「新規投稿画面にリダイレクト」とか意味不明なことやるくらいだから、あんまり期待できないわけですが。設定できるみたい（設定項目を見つけられていない）ですが、それならデフォルトを変えるな、と。で、アナウンスしろよ、と。
まぁ、相当酔ってるので，マークアップさえしていませんが。（起きて修正（笑）
]]>上書き登録したんだけど、登録時の日付は１年前（笑
どんだけ放置してんの、と。多分、プライベートが結構忙しかったからではないかと、いろいろと。でも今はフリー orz（何
まぁ、４月からは仕事が忙しい訳で、今でも自社サービスのサイト制作、コンテンツ作成、企画会議で忙しくて、他にも１件企業サイトの制作が入っている。その上、来週には別のサイト制作が入る。（打ち合わせは１回あった）さらに、９月半ばから環境が変わって、IT系の某有名企業にプログラマとして出向の予定とか。（多分正社員扱い？）
そんな感じですが、最近（？）、共有テンプレートシステム関係で何か盛り上がって（？）いるらしいので、何か書いてみる。しかし、詳しいことがイマイチわからない状態。利用規約に関係しているっぽい話題が多そうだから、利用規約を守らないユーザの話だと勝手に判断。
]]>この企画は終了しました。第２弾があるのでそちらをどうぞ。
CSS で装飾してください。 vol. 2.0
R'style が考えた、若干軽量 XHTML を、チョットした条件の下、CSS だけでステキなテンプレートに仕上げてください。
※ 装飾対象はトップページ（プラグイン無効状態）
プラグインタグ（<!--plugin--><!--/plugin-->）内はご自由に。
テンプレートが完成したら、当記事へトラックバックで宣伝してください。少なくとも R'style が喜んで拝見しに行きます
以上の条件は全てトップページのみに限る。
テンプレートとする為のトップページ以外への工夫は自由。
これくらい条件を設けても恐らく似たようなモノばかりにはならないと思っているので、たくさんのトラックバックを期待しています。
ちなみに、[simple_code] と [cyberspace_behind] が上記条件下で私が作成したモノです。
続きは XHTML ソースを載せておきます。
PS. 参加された方はこの機会に「css Zen Garden」のデザインも考えられてはいかがでしょう？主旨が若干異なりますし、面白いと思います。
ちなみに、次回はある理由から、css Zen Garden のような XHTML を考えようかと思っています。
実は、私は 3 カラムが色んな意味で嫌いで、[samurai_bamboo] の 3 カラム版はイメージに合わないので共有登録はしません。
まぁ、それは置いておくとして、取り敢えず、カスタマイズ結果のサンプルを
どうなるかを見てもらったところで、ココからカスタマイズ方法の説明に入ります。
まずは以下のソースを見てください。
/* extra setting for 3 column */
#wrapper {
background-image: url(http://blog-imgs-31.fc2.com/r/s/t/rstyle/samurai_bamboo_content_bg_3col.gif);
width: 900px;
}
#mainContent {float: right; width: 649px;}
#articles {padding-right: 251px;}
#navs {float: left; position: relative;}
#extra {background-image: url(http://blog-imgs-31.fc2.com/r/s/t/rstyle/samurai_bamboo_footer_3col.gif);}
#branding h1 {background-image: url(http://blog-imgs-31.fc2.com/r/s/t/rstyle/samurai_bamboo_title_bg_3col.jpg);}
#extraDiv1 {width: 900px;}
.articleText pre {width: 330px;}
.component textarea {width: 90%;}
.module {overflow: auto; width: 245px;}
#nav-calendar,
#nav-comments,
#nav-trackbacks {
position: absolute;
left: 655px;
}
#nav-calendar {height: 250px; top: 0px;}
#nav-comments {height: 340px; top: 250px;}
#nav-trackbacks {height: 340px; top: 590px;}
#plugin_third {
position: absolute;
top: 0;
left: 655px;
width: 245px;
}
#plugin_first .module,
#plugin_second .module,
#plugin_third .module{
overflow: visible;
}
#plugin_first #nav-calendar,
#plugin_second #nav-calendar,
#plugin_third #nav-calendar,
#plugin_first #nav-comments,
#plugin_second #nav-comments,
#plugin_third #nav-comments,
#plugin_first #nav-trackbacks,
#plugin_second #nav-trackbacks,
#plugin_third #nav-trackbacks {
height: auto;
position: static;
}
これを「テンプレートの設定」にある「[samurai_bamboo]」の行の「編集」をクリックして、「スタイルシートの編集」の項目（画面一番下の枠）の一番最後に追記してください。
はい、3 カラム化完了です。簡単ですね。
この例では、プラグインカテゴリー１，２を左サイド、プラグインカテゴリー３を右サイドに配置しました。
他にも方法はあるので、自分用にカスタマイズされるのが良いと思います。
3 カラム化のようにデフォルトの画像だとダメって時はそれ用の画像をこちらで用意するので、遠慮なくどうぞ。
]]>まぁ、MovableType のデフォルトテンプレートと企画用テンプレートは全然構造が違うので、同じように見せるのはチョット面倒でしたが、ようやく何とかなりましたね。
取り敢えず、CSS の調整が完了し次第、共有テンプレートに登録予定です。
ぁ… プラグイン… orz
登録申請中ー なかなか登録されないと思ったら、日曜日か orz
]]>プラグイン強制時代ですか。
プレビューしても記事部分しかないものが殆ど。
プラグインのデフォルト HTML を使いたくないけど、編集したら、共有テンプレートを作る作業がやりにくいという理由でプラグイン無効で利用しているのに…。「プレビューする時だけプラグイン有効にしろ」と思われるかもしれませんが、イチイチ切り替えてまでプレビューしようと思いませんです…
取り敢えず、まるで「このサイトは Windows InternetExplorer 5.x 以上でしか見られません」といわれているのと同じ感覚ですね。
上の例なら何かしら理由がありそうだが、特に理由もなく門前払いしていいのだろうか？
「プラグイン対応」と「プラグイン専用」は違うと思います。もう何回同じ事書いたことやら…（しつこい？）
ちなみに、私が作った主なテンプレートは「プラグイン対応」のつもりです。それが、R'style（それが、公安 9 課だよ。
的に）
やっぱり、攻殻はイイなぁ…。
]]>敢えて対応させない方向だったんですが、「部分対応」なら許せるかな、という事で。
で、どの辺りが「部分対応」なのかというと、
まぁ、簡単に言うと、タイトルとコンテンツが入るだけ。
ちなみに、ソースは以下のようになってます。
<dt>プラグインタイトル</dt>
<dd>プラグインコンテンツ</dd>
これだけ。
元の方の HTML をプラグインの構造にあわせたりしていないので、CSS で対処。が、今後新しいプラグインが追加された時、同じ見栄えである保障はない。
ここで、やっぱりプラグインの規格が決まってない感じなのはオカシイ。メールフォームプラグインの識別タグが空なのは何だろう？
取り敢えず、他の方のテンプレートを見る時に「プラグイン有効」の状態でないと「サイドバーなし」という状況でプレビュー意味なし。イチイチ有効 / 無効 を切り替えるのが面倒なので、R'style 用の [simple_code]（[simple_code_r]）だけ上記のソースでプラグインに対応。そこで、「部分対応」という考え方を思いついた（？）ので、[simple_code] もプラグインタグ追加しておきました。
尚、以前の [simple_code] に上記ソースを追加しただけでは「部分対応」とはならないので、再ダウンロードを。
]]>しばらく「プラグイン」という言葉は見たくない…
まぁ、あんなトリッキーな（？）レイアウトだったのが悪いんですが。ぁ、ということは、プラグイン対応ではトリッキーなレイアウトが少なくなる？ いや、そんなことはない。今回は使用した HTML が悪かっただけである。
実は（といいつつ前に書いてますが…）、プラグイン対応化の際に HTML を [simple_code] と同じモノにし、「CSS で装飾してください。」に合わせてみた。ついでにメジャーなブラウザでは全て同じ見栄え。 Operaっちでは確認してませんが、まぁ特別おかしな部分はないでしょう。ただ、class 属性や id 属性を多少付加したように思うので（うろ覚え（!?））、もしかしたら若干条件に合わない部分があるかもしれない。
]]>