皆が使えるテンプレートを作るスレ3
■ このスレッドは過去ログ倉庫に格納されています
皆さんのwebサイト上で簡単に利用できるようなテンプレートを、
web制作板の皆さんで作ってしまおうというスレッドです。
■前スレ
皆が使えるテンプレートを作るスレ2
http://pc8.2ch.net/test/read.cgi/hp/1117274563/
ホームページで皆が使えるテンプレートを作るスレ
http://pc8.2ch.net/test/read.cgi/hp/1115113828/
■サポートサイト
http://mohei.dip.jp/~naoto/2chtemp/
■アップローダー
MOHEI ◆GrsqjXpGxE氏が管理されているアップローダー
http://mohei.dip.jp/~naoto/cgi-bin/uploader/uploader.cgi
HPENTC ◆5dgbPjIkY2 氏が管理されているアップローダー
http://template.en.tc/cgi/upload/ http://pc8.2ch.net/test/read.cgi/hp/1117274563/977
のファイルうｐしました。
http://majix.dip.jp/~naoto/cgi-bin/uploader/uploader.cgi/template_863_02.lzh
#CONTENTのheightを外せばインラインフレーム効果は無くなりますけど、
その方が見やすいページになると思います。
あと、細かいポイントとして、
フォントによっては#NAV内(タブのとこ)に日本語と英語を混在させるとIEで
日本語のタブだけ高さが1px低くなります。
結論：
タブナビゲーションは画像でやった方がズレも無く、らくちん。 >>6
それをいったらniftyコーナーはどうなるんだ、と。 >>7
あれはちと無理矢理すぎるからなぁ...
素直にテーブル+画像の方がよさそう。
>>8
スタイルシートみたらひっくり返るかもしれませんが、
使ってやってください。 ﾔﾊﾞｽww まだ２に居たのは俺だけ?
今来ました。 どうやら前スレは、1000越えたらしいです。
>>6
うpサンクス!
俺はテンプレ作れるまではいかないけど...
test.htmlはindex.htmlに移行しますた。
http://mohei.dip.jp/~naoto/2chtemp/
ttp://mohei.dip.jp/~naoto/2chtemp/monastyle.css
http://mohei.dip.jp/~naoto/2chtemp/test.html 【閉鎖メッセージ】
ttp://mohei.dip.jp/~naoto/2chtemp/tes.css 【閉鎖メッセージ用CSS】
ttp://mohei.dip.jp/~naoto/2chtemp/test.css 【monastyle.cssへのショートカット】
修正::::::::::::::
【閉鎖メッセージ】
↓↓↓↓
【移行メッセージ】
誤解ｽﾏｿ.. 前からずっと見てました。着実に進化してるみたいです。
MOHEI頑張れー（｀・ω・´）ｼｬｷｰﾝ ふと思い出した。
もへーたそは結局、アクセスを解析してくれるツール(CGIやJSやPHPなど）の一般の呼び名が何かわかったのか？ おはようございます。
HPENTC ◆5dgbPjIkY2氏のアプロダ、「Download」のリンクが
全部スクリーンショットへのリンクになってるみたいよ。 >>6のテンプレもHPENTC ◆5dgbPjIkY2氏の方に
うｐしておいた方がいいのかな？ >もへい
あと、移行通知(旧test.html)が結構よさげな点について。 >>15
以前は、アクセス解説になってたけどよーく考えたら解説って...実況みたいだなw
アクセス解折だった。
>>16
ぉ、HPENTC ◆5dgbPjIkY2氏のダウンロード一覧がカッコ良くなってる。
> 全部スクリーンショットへのリンクになってるみたいよ。
圧縮してないとか..?
>>14 , >>17
ありがとう。
>>6のテンプレートHPENTC氏のうpロダにうpしたほうがいいかも？
でも、一覧に追加するのはHPENTC 氏なんだから、お願いするしかないな。 >>18
> 圧縮してないとか..?
「Download」っていうリンクが全部ss.jpgへの
リンクになってる。
ってか、これHPENTC氏にお願いすべきか。
修正よろしくお願いします > HPENTC氏
なぁ、代替css使おうぜ。
内容は同じなのに見た目がじゃんじゃん変われば利用者も
「お、cssすげ」
ってなるんじゃね。 誰かベースになるHTMLを書いてくれると
いいんだけど。
ただ、切り替えスクリプト云々になると
面倒なことになりそう。 >21
IEには例のJavaScriptを用意すればいいんでは。
それ以外のFFとかOperaとかは勝手に切り替えてもらう。
ところでもへいよ。トップページはもうちょっとマシにならんかね。
サイドメニュークリックしたらページ内リンクって…。
実質２〜３ページだろ？
ページ内なら本文中にナビつけりゃいいじゃん。
それとサイトマップうｐしたのか？404だぞ？
マップ作るほどのコンテンツ量とも思えないが、
ちょっと脳内サイトが巨大化しすぎてないか。
すこしずつでイイから、慌てんなよ。 >>22
スクリプトに関しては使用者側におまかせで、
こちらはベースHTMLとCSSのみ提供の方がいいんでない？
スクリプトが動きませんなんて質問が飛んできたら
面倒だし。
>>もへい
20さんの言ってることは結構的を射ていると思う。
前スレでムキになってあれこれ教えたが、ぶっちゃけ
まだメニューは必要ない希ガス。 >>20
CSS Zen Garden→http://www.csszengarden.com/
こんな感じで、ベースHTMLを書いてみんなが CSSを作っていく感じですか？
これは強制じゃなくて、面倒な人はコレ使って下さいって事でいいと思います。
>>22-23
ぁ、まぁそんなにページ少ないからメニューはいらないのね。
サイトマップは考えてみればいらない。(そんな大きなサイトじゃ無いし…)
では、index.htmlには 『はじめに』を書いておけばいいかな？
ページ内にナビゲーションバーでもいれておくとか..? ＞もへいﾀｿ
もしかして、昔、俺が住んでいたところと近い？
＞しょこらﾀｿ
意味ブロックと構造ブロックの違いがよく分からないです。
もしよろしければ、解説お願いします。<(_ _)> >>26
> もしかして、昔、俺が住んでいたところと近い？
ぇ？板に住んでいたところって事？。それとも家の住所!?
もしや、pingでIP抜かれたww!?
ひんと：関東... >29
と、所沢....なんて言い所に住んでたんだ。。orz
俺なんか、田舎だよ。 >>22
うん、急には出来ないので ﾏﾀｰﾘ変更します。
前からだったけど、ページ内リンクは、止めようかと思ったり........
ただ、そうすると 個々のページを一つ一つ作らないといけないから時間かかりそう。でもCSSでなんとかなるがね。
■index.html【トップページ】(はじめに)(新着情報)
｜■dl.html【ダウンロードページ】(ダウンロード)
(以下略) >32
そんなに北の方じゃ無いけど、そういう事です。 俺はおそらく日本で一番、住みにくいとされている場所に今、いるよ。 >>21-23
おいちゃんは JavaScript はよくわかんないんだけど、
ベースになる HTML がだいたい共通していれば
PHP でテンプレート切り替え器くらいは作ってあげられるとおも。
PHP ならプラットフォームの問題で動かんとかにはならんだろ。
ちなみに俺んちはは駅からバスで10分。 >34
日本で一番住みにくいといったら、国後島?(違う
>35
俺もJ.S良く分からんので...phpの方がイィかもね。
CSS禅 はどういう仕組みなんだろ。
問題はHPENTCさんの鯖にphpが使えたかな？その変は聞いていないんだけれど。
ちなみに、mohei.dip.jpはphpは不可能でした。 >>37
素の（圧縮されていない）CSS に直接アクセスできたら別に外部鯖に切り替え器を置いてもよかですよ。
まあ圧縮ファイルでもやりようはあるが。
んでも、80年くらい Perl 書いてないからわからんけど、Perl で書けと言われりゃたぶん俺でも書けると思う。
要するに GET でパラメタ渡すだけだし。
>>38
あ、近いすねぃ、俺は大阪と京都と奈良のちょうど中間くらい。 >>40
なんか大阪から来た人、嘆いている。
京都人は陰険って。 >>40
結局は template.en.tc のサーバに全て転送される予定です。
だから、切替え器って言うか CSS Zen Gardenみたいな物をやるとしたら 全て HPENTC氏の
鯖内で出来ると思います。(まぁHPENTCさんがOK出してくれればの話しですが)
まずは、ベースHTMLを書くかな( ´∀｀) >>42
うん、まあそん時になってできそうなことを考えりゃいいと思う。
今詰めなきゃならない話じゃないな。
俺も「やりようはいくらでもあるぞ」ということが言いたかっただけなので、ひとまず措こう。
>>41
行きつけの店があるのでほぼ毎週逝ってるが＜京都
いい人たちにしか出会っていない俺は、このスレのラッキーボーイに違いない。
# それか、俺の方が陰険だから問題がないか。 >43
了解!!
では、サイト再構築する時についでで XHTML 1.0 を使いたいと思います。
まずは、index.html をXにして。。。dl.htmlをXHTMLで作ります。
ﾏﾀｰﾘとね。 >>24
ZenGardenの日本サイト版ってイメージ？
だったら俺、CSS書いても良いかなって激しく思ってるんだが、どうだろう >>46
うｐ。
もしあれならPerlで移植可。
どっちがいい？ >もへい とりあえずスクリプト組んでみた。
http://majix.dip.jp/~naoto/cgi-bin/uploader/uploader.cgi/csschange2.tar.gz
1.CGIの名前を適当にリネーム
2.CGIをエディタで開いて各種設定(スクリプトの中見て下さい)
実際に表示するHTMLはテンプレート方式。
CGI内でテンプレートとして使うファイルを指定して、好きに書いてください。
「::style::」という文字列を埋め込むと、そこがCSSへのURLに置換される
テンプレートが無ければ自前で簡単なHTMLを吐くようになっている。
http:://www.foo.net/csschange.cgi?style=bar
ってな具合にパラメータを渡すと、「bar.css」が適用される。
ちなみに含まれるファイルは全部EUC+LFです。
>もへい
間違ってうｐしたので
http://majix.dip.jp/~naoto/cgi-bin/uploader/uploader.cgi/csschange.tar.gz
を消しておいてください。 根っからの京都人はよそ者に冷たいですよ。住めば分かる。
真夜中の渋谷でDQNにーちゃんと話してるほうがまだマシさ……。
>>42
適当にIDやらなんやら振ってくれたらcssはこっちでなんとかするぜ。
骨格は任せた。
＃ただし、学業はおろそかにせんよーに。 >>45
もちろんHTMLは自分で書いてもらってもOKです。
今度作ろうと思います。(HTMLの文書を考えるのが大変そう...
>>46-47
HPENTCさん提供のサーバが、php使えるなら鯖に負荷を掛けない php が良いと
思います。mohei.dip.jp はperlしか使えない...orz
>>48
ありが乙!試しに cgi-binへうpしてみます。
>>49
はい、ガンバリます。
UP完了:::::
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/index.cgi
##後はCSS用のアップローダを加えるだけです。## >>51
そういや、画像やスクリプトなんかを含む
スタイルの場合はどうしよう？
CSS用あぷろだに画像その他をいろいろうｐしておいて、
スタイルシート内でそのURLを参照するようにする?
毎回CGIにアクセスするのはアレなので、うｐしたファイルの
実体のURLを参照できるといいけど。
みなさん、何か良いアイデアないですか？ 追記。
> もへい
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/
にアクセスするとディレクトリツリーが丸見え。
.htaccess使えるならDirectoryIndexにindex.cgiを
入れておいた方がいいと思う。
あぷろだの方は大丈夫みたいだけど...?
あと、余計なお世話かもしれないけど
http://mohei.dip.jp/~naoto/cgi-bin/
直下にアクセスした時に表示されるページは
かなり微妙。 >>53
俺はこれで良いと思う
これがモヘイなんだ！ つか、cgi-bin/以下は
Options -Indexes
でいいんじゃないか？
というか、普通そうするもんだとばかり
思っていたが。 >>53
wwはぃ、ふざけが過ぎました。ずーと前からなんですよ。
403にしておきますね。＞＞cgi-bin >>53
.htaccess使えたかな?
とりあえず、それを置いて index.cgi を省略できるようにしておきます。
>>57
ファイル一覧が見えちゃうと恐いっすよ。特に CGI だから... >>59です。
違う板に書いてて 名前を間違えました。
>>59は俺です。。 >>60
254 ◆hNuBPsan.Aで検索してもいい？ >>59
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/
以下は相変わらず丸見え >>61
my鯖板です。検索の前に晒すww
http://pc8.2ch.net/test/read.cgi/mysv/1087904056/l50
>>62
.htaccessが使えませんでした。
では、index.htmlに<meta>でindex.cgiへ転送させますかな?
###これしか方法が無い。あとは chmod でアクセス制限とか...### やっぱ、向こうの板でも MOHEI で書き込もうかな？
リネームするの大変ww >>63
今の鯖って自宅で管理してるやつじゃないんだっけ？
と思ったら、HPENTC氏のやつだったか...
HPENTC氏に直接交渉できんかな？
index.htmlでrefreshで飛ばすくらいしかないかな。
ちゃんとindex.cgiへのアンカー付きで。 お手軽な策としては：
1. test/ ディレクトリを作り、パーミッションを 500 とかにする
2. ブラウザでアクセスすると Forbidden を喰らうので、それを index.html として保存しる
3. cgi/index.html としてうpしる
サブディレクトリ作ったら同じことやらんといかんがw >>65
まだ自宅鯖の方で作業してますよ。
HPENTCさんとメールできればいいのですが...
>>66
Forbidden のメッセージが出た＞＞ 保存したindex.html にrefreshでindex.cgi
へ飛ばす。(html内には index.cgi へのアンカーをいれる)
.........で、FAです。 提案
index.htmlを一応設置。内容は以下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>404</title>
</head>
<body>not found on this server
</body>
</html>
ものすごく細かいことを言うと、本来は CGI などを使ってエラーコードを返すべきだけどな。
HTTP レスポンスヘッダでエラーを返してリダイレクトしてやるのが、正しいっちゃ正しい。
意味不明な香具師は流してくれ。興味がある香具師は 「HTTP ヘッダ ステータスコード」でググってくれ。 201か3**吐かないとLocationは使えないがね。metaのrefreshのことか? や、だからリダイレクトするなら Permanently Moved（だっけ？）とかを返してやるべきってことです。
# そか、これは確かに「エラー」ではないね、厳密に言えば。 >>68サンクス!
４０４で返すのですね。了解です。 みんな、おはやう。
>>73
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/
こんな感じかな?( ´∀｀) >>74
ディレクトリの中は見えなくなった。
で、俺が挙げたCGIの使い方なんだが、
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/ に
index.htmlを置いて、
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/csschange.cgi?style=hoge
へのアンカー一覧をそのindex.htmlに載せておくって
使い方を想定してたんだけど... >>75
自己レス。
> http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/ に
> index.htmlを置いて、
ちょうど今、「CSS一覧」ってアンカーがあるな。
リンク先が「template.html」になってるけど、それをindex.htmlに
変えてしまえばいいんじゃね？
で、index.htmlにうｐされたCSS一覧を表なりリストなりで表示させる、と。 >>76
明日から連休取れるからシコシコ作ってみる。 >>79
よろしく！
何だかんだでテンプレ来ないとこのスレの存在意義が
ないからね。他に見てる人も暇があればどんどん
うｐしてほしい。
で、テンプレのネタ切れになったので
CSS Zen Gardenもどき作戦のベースHTMLを作ろうと
思うのだけど、
・どの文書型でやるか
・構造ブロックをどう分けるか
あたりで各自ご意見はありますか？
個人的にはXHTML1.0 strictでやるのがいいかなと
思っているけど。 適当に作ってみたんだけど、何処にあげればいいの？
■アップローダー
MOHEI ◆GrsqjXpGxE氏が管理されているアップローダー
http://mohei.dip.jp/~naoto/cgi-bin/uploader/uploader.cgi
HPENTC ◆5dgbPjIkY2 氏が管理されているアップローダー
http://template.en.tc/cgi/upload/
ってのがあるけど、上の方でいいのかな？
スクリーンショットとhtmlファイルの両方うpすればいいのかな？ >>81
とりあえず上。かな。
> スクリーンショットとhtmlファイルの両方うpすればいいのかな？
両方あるといいね。よろしくお願いします。 >>79
よろしくです。
>>80
・どの文書型でやるか→XHTML 1.0 でおkだと思います。
・構造ブロックをどう分けるか
#navigation #header #content #footer
(これしか思い付かないorz...)
>>81
ありがとん。ちょいと見て来ますﾉｼ >>83
> #navigation #header #content #footer
最小の構成にするとこんな感じだろうね。
ただ、これだけだといくらなんでもやりづらいだろう。
CSS Zen Gardenのソース見てみるわ。 >>85
参考にしようと思ったけど、予想以上にごちゃごちゃしてるなぁ。
とりあえず、先に挙げた4つと、3列段組も作れるように
#navigationを2つに分けて5つにしたほうがいいかな？
#mainnav(自サイトのリンク)
#subnav(外部へのリンクやその他)
みたいな。
他の人の意見はどうかな？ >86
複雑なので、一度印刷してから メモにまとめます。
> #navigationを2つに分けて5つにしたほうがいいかな？
あのスクリプトによるけれど、他のCSSを適用するリンクと
外部へのリンクって言ったら、「トップへ戻る」ぐらいかな？ >>87
> あのスクリプトによるけれど、他のCSSを適用するリンクと
> 外部へのリンクって言ったら、「トップへ戻る」ぐらいかな？
まあ、
「実際こういう風に出来ます」
っていうのが伝わればいいから仮のリンクを並べておこうと思ったんだけどね。
で、いまのところ考えている順番が
#header
#nav
- #mainnav
- #subnav
#content
#footer
ってな感じかな。 >>88の続き
#navと#content、どっちを先に持ってくるかが悩みどころ。
あとひとつ思い出したんだけど、IE6ってXHTMLの先頭に書く
XML宣言があると互換モードで動くんだよな...
XHTML1.0の仕様だと、文字コードがUTF-8かUTF-16以外の場合は
XML宣言が必須で、それ以外の場合は必須でない(強く推奨される)とあるから、
XML宣言を外してUTF-8で書こうかな？
参照:
http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html#docconf >89
>#navと#content、どっちを先に持ってくるかが悩みどころ。
CSS Gen Gardenだと、メイン文章が先で その後 メニューがあるのですが、、
これはどういう理由なのかは知らないけれど、音声ブラウザで読み上げた時に
メニューが先だと、同じ文章を何度もくどく読んでしまうからかなぁ？(と、これはあくまで推測..)
CSS の メディア属性で音声ブラウザを指定すると、解決できるのかな？万が一 CSSに対応していない
場合は #navigationが最後になるのだろうか...
> XML宣言を外してUTF-8で書こうかな？
難しい問題...UTF-8
【引用】>メモリ上では、UCS-2 の一文字2バイトに対して UTF-8 では3バイトに増える場合が多いと思われる。
http://www.asahi-net.or.jp/~CI5M-NMR/w3/utf-8.html 俺は、システムの文字エンコードの仕組みを知らないから何とも言えないけれど
使ってもおkだと思います。その辺はおまかせしますよ。 ＞構造ブロック
>>80,83-84
IDがｲﾊﾟｰｲあると背景画像使いまくりんぐで楽チンチン。
＞順番
いいと思うけど、自分だったら#navを#contentの下に置いてしまう。
#navが無くなっても#contentがあればページとしての意味は保てるし。
＞文書宣言とか
>>80,89-91
XHTML1.0 strict＋UTF-8じゃないと上手く書けないッス……(；・ω・)
>>91
IE6の互換モードはクセがあるからなぁ。
まずはXML宣言抜きでちょろりと書いてみる。
マズそうならHTML4.01に直す。
とりあえずこれでいってみます。
>>92
俺も#contentが先にある方が良いと思うので
それで行こうと思います。 コンテンツ→ナビの順はそんでいいんじゃね？
で、コンテンツの前に display: none な「ナビへスキップ」ページ内アンカーを置くとｳﾏｰ
という話が前スレにあったようななかったような。
DOCTYPE 宣言も DTD の URI があるのとないのとでモードが変わったような気がするが、そのへんうまいことやってくれ。
俺は信者なので XML 宣言も DTD の URI も全部書いてる。
モードで描画がちょっと変わろうが何だろうが、あるはずのものがないのは気持ち悪いと感じてしまう変態さんだから。
だから実を言うと、どうすればモードを制御できるか詳しく知らんかったりする。
はっきり言って俺、このスレ的に浮いてる orz んで、たしかに UTF-8 だとマルチバイトキャラクタの容量が 5割増になってしまうのだが。
容量カツカツでやってるやつって、たいていはでっかい画像とか動画とか音声で容量を食っているので、
それに比べたらテキストの増加分なんてかわいいもんだと思う。
外部 CSS にしてるだけ救いがあるだろうし、テンプレで使う画像をなるべく軽くすればいい線行くだろう。
本来は文字コードくらいページ作者が自由に選択できて当然なのだが、
ブラウザがこんな状態なのでしゃーないわな。UTF-8 で XML 宣言なしってのは、かなり高い妥協点だと思うよ。
# モードチェンジはブラウザのバグであって、機能なんかじゃないと思う。
俺は 1年半ほど前に、目につく範囲の文書を全部 XHTML & UTF-8 化した。
別に unicode ﾏﾝｾｰなわけではないんだが、外国の友だちが多いのでこれもある意味妥協。
まそれはさておき。
想定している利用者には文字コードなんて知らん人もいるだろうから、
「他の文字コードで使う場合はここを書き換えてね」とかの説明があれば親切かなと思う＜テンプレ
ﾉｼ この前うｐしたCSS置き換えスクリプト、EUCでの
出力しか考えてなかったからスクリプトの修正が
必要だな...
ベースHTMLをあげる時にスクリプトの修正版も
一緒にうｐします。
>>95
> 想定している利用者には文字コードなんて知らん人も
> いるだろうから、「他の文字コードで使う場合はここを
>書き換えてね」とかの説明があれば親切かなと思う＜テンプレ
その辺の解説を含めてHTML書いてみます。 >>96
よろしく!
問題は、CSSとイメージの投稿・編集(?)ぐらいですかな。
編集は出来なくてもいいんだとは思うけど... 超シンプルに作ってみました。
http://mohei.dip.jp/~naoto/cgi-bin/uploader/uploader.cgi
にあげときました。comment適当ってヤツです。 >>98
さんきゅー!ダウンロードしてみます。
すいかがイィ! :- } ぉ！愛・地球博 のWebサイトは 完全CSSデザインサイトかぁ…。
時代もスタイルシートに追い付いたのねー。
とりあえず、サイトを変更したので(というか追記)次アップロードします。
一旦ﾉｼ ■ このスレッドは過去ログ倉庫に格納されています
