LABORATORY.R-STYLES in FC2

http://www.r-styles.net/weblog/ にログをイッパイ移動

Articles

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS で装飾してください。 vol. 2.0

R'style の思いつき企画第2弾。

企画内容

R'style が考えた、若干重量 XHTML2006/8/26 更新) を、チョットした条件の下、CSS だけでステキな FC2BLOG 用テンプレートに仕上げてください。

※ プラグインタグ(<!--plugin--><!--/plugin-->)内はご自由に。
プラグイン機能に完全対応するとソースが汚くて仕方ないんですが…

テンプレートが完成したら、CSS 部分のみを CSS ファイルとして保存&アップロードした後、アップロードした CSS ファイルの URI を教えてください。

最終的に当ブログにおいて CSS 切り替えのみでデザインを変更して見られるようにする予定です。具体的には sug さん作の Alt Style を利用させて頂きます。

チョットした条件
  • XHTML ソースの変更不可
  • テンプレート足ること。
    (ユーザに固有の要素を画像文字等で無効にしない, etc.)

今回は余分な要素を入れています。一応3カラムも可能ですし、extraDiv の使い方次第では面白いものができるかも。

私の作品は [samurai_bamboo] です。

続きは XHTML ソースを載せておきます。

PS. 参加された方はこの機会に「css Zen Garden」のデザインも考えられてはいかがでしょうか。

...続きを読む

スポンサーサイト

妙な共有テンプレートに関して

規約違反の過度の商用リンクだとかパクリだとかSEO対策済みを謳う意味不明なものだとかそんな共有テンプレートに関して。

(SEO関係に関しては、「はぁ?何が?」って感じだし、軽い分[simple_code]の方が(略)

以前から Chako さんが危惧されているのは知っていましたが、FC2BLOG 運営側の頑張り次第かなという感じでした。

まぁ、どんな物でもダウンロードして利用するかどうかはユーザの取捨選択に委ねるべきだと思う。ダウンロードして利用する場合に利用規約を付けたらそれはもう「共有テンプレート」じゃないだろうと思うと同時に、どんな初心者でも登録できるようでないとそれはもう「共有テンプレート」じゃないだろうと思うので。

しかし、それにはユーザが過去の物を知ったり、多くの「共有テンプレート」の存在を意識する必要があると思う。つまり、もっと情報を増やしてまともに取捨選択できるような状況にすべきだということ。新着しか知らないのでは話にならない。

という訳で、トップページ(最近は違うらしいが、新着共有テンプレートとかが表示される画面)に「ランダムピックアップ」を表示しておくようにすると良いと思う。それも新着より多く。これがあるだけで随分違うと思う。そうすれば、「これ見た事あるぞ」とかでパクリは誰かが気づくんじゃないかと。まぁ、新着3個なので、6個とか? 運営側が「画像置くのめんどくさー」とかでテキストリンク置くだけって場合でも効果はあると思う。ただ、その場合も Ajax とかで、画像はマウスオーバーで見れるようにすると良いと思う。っていうか、それくらいやってくれ、と。

たとえ妙な共有テンプレートでも、ダウンロードするかどうかはユーザ次第なのに、新着のみが目立つような現状では新参ユーザが取捨選択するのは難しく、まずは新着からダウンロードするんじゃないかと考えるからです。

要するに、どんなものでもユーザが取捨選択すれば良いし、それができる状況を作るべきだということ。

そうすれば、本当に妙なテンプレートならその内消えるはず。

もちろん、FC2BLOG 運営側が頑張らないといけない部分は多々ある。diff コマンドとか使えば、ある程度自動で調べられるはずだし、何%違うかとかで比較すれば微妙に変更しただけの共有テンプレートだって自動で弾く事もできるだろうと思う。時間掛かるって? ハードウェア的に何とかしなさいよ、と。並列処理しなさいよ、と。

手動チェックは難しいんだから、その辺はユーザと一緒にやっていこうとか、自動化できる部分だけ自動化しようとかそういうのはないのか、と。正直、「ユーザに手伝ってもらう」っていうのは時代的に結構受けが良いと思うし。

イマイチ FC2BLOG の本気さが見えないのが問題だ。相も変わらず説明なしで何かやってるみたいだし。テストサーバないの?(まさか、「blog1がテストサーバです」とか言わないだろうな…)

だったらBetaとかにしとけよ、と。

「管理画面」にアクセスしたら「新規投稿画面にリダイレクト」とか意味不明なことやるくらいだから、あんまり期待できないわけですが。設定できるみたい(設定項目を見つけられていない)ですが、それならデフォルトを変えるな、と。で、アナウンスしろよ、と。

まぁ、相当酔ってるので,マークアップさえしていませんが。(起きて修正(笑)

共有テンプレート配布再開

「プラグイン有効時に広告なし」の問題を解決して地味に配布再開しました。

上書き登録したんだけど、登録時の日付は1年前(笑

どんだけ放置してんの、と。多分、プライベートが結構忙しかったからではないかと、いろいろと。でも今はフリー orz(何

まぁ、4月からは仕事が忙しい訳で、今でも自社サービスのサイト制作、コンテンツ作成、企画会議で忙しくて、他にも1件企業サイトの制作が入っている。その上、来週には別のサイト制作が入る。(打ち合わせは1回あった)さらに、9月半ばから環境が変わって、IT系の某有名企業にプログラマとして出向の予定とか。(多分正社員扱い?)

そんな感じですが、最近(?)、共有テンプレートシステム関係で何か盛り上がって(?)いるらしいので、何か書いてみる。しかし、詳しいことがイマイチわからない状態。利用規約に関係しているっぽい話題が多そうだから、利用規約を守らないユーザの話だと勝手に判断。

...続きを読む

CSS で装飾してください。

R'style の思いつき企画。
(っていうか、ほぼ「css Zen Garden」なんですけど。)

この企画は終了しました。第2弾があるのでそちらをどうぞ。
CSS で装飾してください。 vol. 2.0

企画内容

R'style が考えた、若干軽量 XHTML を、チョットした条件の下、CSS だけでステキなテンプレートに仕上げてください。

※ 装飾対象はトップページ(プラグイン無効状態)
プラグインタグ(<!--plugin--><!--/plugin-->)内はご自由に。

テンプレートが完成したら、当記事へトラックバックで宣伝してください。少なくとも R'style が喜んで拝見しに行きます

チョットした条件
  • タグの総数を増やしてはいけない
    (ただし、減らすことに制限なし)
  • 他の部分でタグを削れば、その同数タグの追加は可
  • xml 宣言、head 要素 内などは上記条件の対象外。
  • 一般的なブログとしての機能は確保してあること
    (コメント、トラックバック、ナビゲーション、なるべくトップに記事)
  • テキスト部分、及び属性などは全て自由に編集可
    (タグ以外の編集に制限なし)
  • RSS Feed、管理者ページへのリンクなどの記述位置・有無は自由。
  • id 属性は 10 個まで任意で追加可
  • class 属性は 5 種類まで任意で追加可
  • CSS で使用する画像サイズに制限なし

以上の条件は全てトップページのみに限る。
テンプレートとする為のトップページ以外への工夫は自由。

これくらい条件を設けても恐らく似たようなモノばかりにはならないと思っているので、たくさんのトラックバックを期待しています。

ちなみに、[simple_code] と [cyberspace_behind] が上記条件下で私が作成したモノです。

続きは XHTML ソースを載せておきます。

PS. 参加された方はこの機会に「css Zen Garden」のデザインも考えられてはいかがでしょう?主旨が若干異なりますし、面白いと思います。
ちなみに、次回はある理由から、css Zen Garden のような XHTML を考えようかと思っています。

...続きを読む

[samurai_bamboo] 3 カラム化の例

ちよつと最近忙しいので遅くなりましたが、 [samurai_bamboo] の 3 カラム化の1例を紹介します。

実は、私は 3 カラムが色んな意味で嫌いで、[samurai_bamboo] の 3 カラム版はイメージに合わないので共有登録はしません。

まぁ、それは置いておくとして、取り敢えず、カスタマイズ結果のサンプルを

[samurai_bamboo_3col]

どうなるかを見てもらったところで、ココからカスタマイズ方法の説明に入ります。

まずは以下のソースを見てください。


/* 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 カラム化完了です。簡単ですね。

この例では、プラグインカテゴリー1,2を左サイド、プラグインカテゴリー3を右サイドに配置しました。

他にも方法はあるので、自分用にカスタマイズされるのが良いと思います。

3 カラム化のようにデフォルトの画像だとダメって時はそれ用の画像をこちらで用意するので、遠慮なくどうぞ。

...続きを読む

新作テンプレート第一弾完成

新作といっても全く新しいわけではなく、R's Weblog で使用中のモノを FC2BLOG 用に調整したモノです。

まぁ、MovableType のデフォルトテンプレートと企画用テンプレートは全然構造が違うので、同じように見せるのはチョット面倒でしたが、ようやく何とかなりましたね。

取り敢えず、CSS の調整が完了し次第、共有テンプレートに登録予定です。

ぁ… プラグイン… orz

登録申請中ー なかなか登録されないと思ったら、日曜日か orz

...続きを読む

プラグイン無効な人

共有テンプレート作者の皆さん、プラグイン無効な人はもう無視ですか…

プラグイン強制時代ですか。

プレビューしても記事部分しかないものが殆ど。

プラグインのデフォルト HTML を使いたくないけど、編集したら、共有テンプレートを作る作業がやりにくいという理由でプラグイン無効で利用しているのに…。「プレビューする時だけプラグイン有効にしろ」と思われるかもしれませんが、イチイチ切り替えてまでプレビューしようと思いませんです…

取り敢えず、まるで「このサイトは Windows InternetExplorer 5.x 以上でしか見られません」といわれているのと同じ感覚ですね。

上の例なら何かしら理由がありそうだが、特に理由もなく門前払いしていいのだろうか?

「プラグイン対応」と「プラグイン専用」は違うと思います。もう何回同じ事書いたことやら…(しつこい?)

ちなみに、私が作った主なテンプレートは「プラグイン対応」のつもりです。それが、R'style(それが、公安 9 課だよ。的に)

やっぱり、攻殻はイイなぁ…。

ついクリックしてみたくなるタイトル

ブログでアクセスアップを目指すならこれからはタイトルに一工夫を…

...続きを読む

プラグイン部分対応化

[simple_code] を部分的にプラグイン機能に対応させました。

敢えて対応させない方向だったんですが、「部分対応」なら許せるかな、という事で。

で、どの辺りが「部分対応」なのかというと、

  • アラインメントの設定無効
  • ディスクリプション表示エリアなし

まぁ、簡単に言うと、タイトルとコンテンツが入るだけ。

ちなみに、ソースは以下のようになってます。


<dt>プラグインタイトル</dt>
<dd>プラグインコンテンツ</dd>

これだけ。
元の方の HTML をプラグインの構造にあわせたりしていないので、CSS で対処。が、今後新しいプラグインが追加された時、同じ見栄えである保障はない。

ここで、やっぱりプラグインの規格が決まってない感じなのはオカシイ。メールフォームプラグインの識別タグが空なのは何だろう?

取り敢えず、他の方のテンプレートを見る時に「プラグイン有効」の状態でないと「サイドバーなし」という状況でプレビュー意味なし。イチイチ有効 / 無効 を切り替えるのが面倒なので、R'style 用の [simple_code]([simple_code_r])だけ上記のソースでプラグインに対応。そこで、「部分対応」という考え方を思いついた(?)ので、[simple_code] もプラグインタグ追加しておきました。

尚、以前の [simple_code] に上記ソースを追加しただけでは「部分対応」とはならないので、再ダウンロードを。

[cyberspace_behind] プラグインに対応

ようやく [cyberspace_behind] のプラグイン機能対応化作業終了。

しばらく「プラグイン」という言葉は見たくない…
まぁ、あんなトリッキーな(?)レイアウトだったのが悪いんですが。ぁ、ということは、プラグイン対応ではトリッキーなレイアウトが少なくなる? いや、そんなことはない。今回は使用した HTML が悪かっただけである。

実は(といいつつ前に書いてますが…)、プラグイン対応化の際に HTML を [simple_code] と同じモノにし、「CSS で装飾してください。」に合わせてみた。ついでにメジャーなブラウザでは全て同じ見栄え。 Operaっちでは確認してませんが、まぁ特別おかしな部分はないでしょう。ただ、class 属性や id 属性を多少付加したように思うので(うろ覚え(!?))、もしかしたら若干条件に合わない部分があるかもしれない。

...続きを読む

Paging Navigation

Navigations, etc.

About This Website

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。