皆が使えるテンプレートを作るスレ3
web制作板の皆さんで作ってしまおうというスレッドです。
■前スレ
皆が使えるテンプレートを作るスレ2
http://pc8.2ch.sc/test/read.cgi/hp/1117274563/
ホームページで皆が使えるテンプレートを作るスレ
http://pc8.2ch.sc/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://majix.dip.jp/~naoto/cgi-bin/uploader/uploader.cgi/template_863_02.lzh
#CONTENTのheightを外せばインラインフレーム効果は無くなりますけど、
その方が見やすいページになると思います。
あと、細かいポイントとして、
フォントによっては#NAV内(タブのとこ)に日本語と英語を混在させるとIEで
日本語のタブだけ高さが1px低くなります。
結論：
タブナビゲーションは画像でやった方がズレも無く、らくちん。
それをいったらniftyコーナーはどうなるんだ、と。
サンクス。
いただきました。
あれはちと無理矢理すぎるからなぁ...
素直にテーブル+画像の方がよさそう。
>>8
スタイルシートみたらひっくり返るかもしれませんが、
使ってやってください。
今来ました。
>>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」のリンクが
全部スクリーンショットへのリンクになってるみたいよ。
うｐしておいた方がいいのかな？ >もへい
あと、移行通知(旧test.html)が結構よさげな点について。
以前は、アクセス解説になってたけどよーく考えたら解説って...実況みたいだなw
アクセス解折だった。
>>16
ぉ、HPENTC ◆5dgbPjIkY2氏のダウンロード一覧がカッコ良くなってる。
> 全部スクリーンショットへのリンクになってるみたいよ。
圧縮してないとか..?
>>14 , >>17
ありがとう。
>>6のテンプレートHPENTC氏のうpロダにうpしたほうがいいかも？
でも、一覧に追加するのはHPENTC 氏なんだから、お願いするしかないな。
> 圧縮してないとか..?
「Download」っていうリンクが全部ss.jpgへの
リンクになってる。
ってか、これHPENTC氏にお願いすべきか。
修正よろしくお願いします > HPENTC氏
内容は同じなのに見た目がじゃんじゃん変われば利用者も
「お、cssすげ」
ってなるんじゃね。
いいんだけど。
ただ、切り替えスクリプト云々になると
面倒なことになりそう。
IEには例のJavaScriptを用意すればいいんでは。
それ以外のFFとかOperaとかは勝手に切り替えてもらう。
ところでもへいよ。トップページはもうちょっとマシにならんかね。
サイドメニュークリックしたらページ内リンクって…。
実質２〜３ページだろ？
ページ内なら本文中にナビつけりゃいいじゃん。
それとサイトマップうｐしたのか？404だぞ？
マップ作るほどのコンテンツ量とも思えないが、
ちょっと脳内サイトが巨大化しすぎてないか。
すこしずつでイイから、慌てんなよ。
スクリプトに関しては使用者側におまかせで、
こちらはベースHTMLとCSSのみ提供の方がいいんでない？
スクリプトが動きませんなんて質問が飛んできたら
面倒だし。
>>もへい
20さんの言ってることは結構的を射ていると思う。
前スレでムキになってあれこれ教えたが、ぶっちゃけ
まだメニューは必要ない希ガス。
CSS Zen Garden→http://www.csszengarden.com/
こんな感じで、ベースHTMLを書いてみんなが CSSを作っていく感じですか？
これは強制じゃなくて、面倒な人はコレ使って下さいって事でいいと思います。
>>22-23
ぁ、まぁそんなにページ少ないからメニューはいらないのね。
サイトマップは考えてみればいらない。(そんな大きなサイトじゃ無いし…)
ページ内にナビゲーションバーでもいれておくとか..?
もしかして、昔、俺が住んでいたところと近い？
＞しょこらﾀｿ
意味ブロックと構造ブロックの違いがよく分からないです。
もしよろしければ、解説お願いします。<(_ _)>
> もしかして、昔、俺が住んでいたところと近い？
ぇ？板に住んでいたところって事？。それとも家の住所!?
もしや、pingでIP抜かれたww!?
ひんと：関東...
あぁ、プロフィールみたのね…
と、所沢....なんて言い所に住んでたんだ。。orz
俺なんか、田舎だよ。
うん、急には出来ないので ﾏﾀｰﾘ変更します。
前からだったけど、ページ内リンクは、止めようかと思ったり........
ただ、そうすると 個々のページを一つ一つ作らないといけないから時間かかりそう。でもCSSでなんとかなるがね。
■index.html【トップページ】(はじめに)(新着情報)
｜■dl.html【ダウンロードページ】(ダウンロード)
(以下略)
大学は都心まで通っているの？
そんなに北の方じゃ無いけど、そういう事です。
おいちゃんは JavaScript はよくわかんないんだけど、
ベースになる HTML がだいたい共通していれば
PHP でテンプレート切り替え器くらいは作ってあげられるとおも。
PHP ならプラットフォームの問題で動かんとかにはならんだろ。
ちなみに俺んちはは駅からバスで10分。
竹島？（違
日本で一番住みにくいといったら、国後島?(違う
>35
俺もJ.S良く分からんので...phpの方がイィかもね。
CSS禅 はどういう仕組みなんだろ。
問題はHPENTCさんの鯖にphpが使えたかな？その変は聞いていないんだけれど。
ちなみに、mohei.dip.jpはphpは不可能でした。
え？京都って住みにくいの！？
よーく見たらCSS Zen Garden はphpだった。(index.php)
http://www.csszengarden.com/index.php?cssfile=/046/046.css&page=15
素の（圧縮されていない）CSS に直接アクセスできたら別に外部鯖に切り替え器を置いてもよかですよ。
まあ圧縮ファイルでもやりようはあるが。
んでも、80年くらい Perl 書いてないからわからんけど、Perl で書けと言われりゃたぶん俺でも書けると思う。
要するに GET でパラメタ渡すだけだし。
>>38
あ、近いすねぃ、俺は大阪と京都と奈良のちょうど中間くらい。
なんか大阪から来た人、嘆いている。
京都人は陰険って。
結局は template.en.tc のサーバに全て転送される予定です。
だから、切替え器って言うか CSS Zen Gardenみたいな物をやるとしたら 全て HPENTC氏の
鯖内で出来ると思います。(まぁHPENTCさんがOK出してくれればの話しですが)
まずは、ベースHTMLを書くかな( ´∀｀)
うん、まあそん時になってできそうなことを考えりゃいいと思う。
今詰めなきゃならない話じゃないな。
俺も「やりようはいくらでもあるぞ」ということが言いたかっただけなので、ひとまず措こう。
>>41
行きつけの店があるのでほぼ毎週逝ってるが＜京都
いい人たちにしか出会っていない俺は、このスレのラッキーボーイに違いない。
# それか、俺の方が陰険だから問題がないか。
了解!!
では、サイト再構築する時についでで XHTML 1.0 を使いたいと思います。
まずは、index.html をXにして。。。dl.htmlをXHTMLで作ります。
ﾏﾀｰﾘとね。
ZenGardenの日本サイト版ってイメージ？
だったら俺、CSS書いても良いかなって激しく思ってるんだが、どうだろう
うｐ。
もしあれなら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はこっちでなんとかするぜ。
骨格は任せた。
＃ただし、学業はおろそかにせんよーに。
もちろん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用のアップローダを加えるだけです。##
そういや、画像やスクリプトなんかを含む
スタイルの場合はどうしよう？
CSS用あぷろだに画像その他をいろいろうｐしておいて、
スタイルシート内でそのURLを参照するようにする?
毎回CGIにアクセスするのはアレなので、うｐしたファイルの
実体のURLを参照できるといいけど。
みなさん、何か良いアイデアないですか？
> もへい
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/
にアクセスするとディレクトリツリーが丸見え。
.htaccess使えるならDirectoryIndexにindex.cgiを
入れておいた方がいいと思う。
あぷろだの方は大丈夫みたいだけど...?
あと、余計なお世話かもしれないけど
http://mohei.dip.jp/~naoto/cgi-bin/
直下にアクセスした時に表示されるページは
かなり微妙。
ﾜﾛﾀ
俺はこれで良いと思う
これがモヘイなんだ！
Options -Indexes
でいいんじゃないか？
というか、普通そうするもんだとばかり
思っていたが。
wwはぃ、ふざけが過ぎました。ずーと前からなんですよ。
403にしておきますね。＞＞cgi-bin
.htaccess使えたかな?
とりあえず、それを置いて index.cgi を省略できるようにしておきます。
>>57
ファイル一覧が見えちゃうと恐いっすよ。特に CGI だから...
違う板に書いてて 名前を間違えました。
>>59は俺です。。
254 ◆hNuBPsan.Aで検索してもいい？
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/
以下は相変わらず丸見え
my鯖板です。検索の前に晒すww
http://pc8.2ch.sc/test/read.cgi/mysv/1087904056/l50
>>62
.htaccessが使えませんでした。
では、index.htmlに<meta>でindex.cgiへ転送させますかな?
###これしか方法が無い。あとは chmod でアクセス制限とか...###
リネームするの大変ww
今の鯖って自宅で管理してるやつじゃないんだっけ？
と思ったら、HPENTC氏のやつだったか...
HPENTC氏に直接交渉できんかな？
index.htmlでrefreshで飛ばすくらいしかないかな。
ちゃんとindex.cgiへのアンカー付きで。
1. test/ ディレクトリを作り、パーミッションを 500 とかにする
2. ブラウザでアクセスすると Forbidden を喰らうので、それを index.html として保存しる
3. cgi/index.html としてうpしる
サブディレクトリ作ったら同じことやらんといかんがw
まだ自宅鯖の方で作業してますよ。
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>
HTTP レスポンスヘッダでエラーを返してリダイレクトしてやるのが、正しいっちゃ正しい。
意味不明な香具師は流してくれ。興味がある香具師は 「HTTP ヘッダ ステータスコード」でググってくれ。
# そか、これは確かに「エラー」ではないね、厳密に言えば。
４０４で返すのですね。了解です。
>>73
http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/
こんな感じかな?( ´∀｀)
ディレクトリの中は見えなくなった。
で、俺が挙げた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に載せておくって
使い方を想定してたんだけど...
20さんも何かうｐしてくれよ。
自己レス。
> http://mohei.dip.jp/~naoto/cgi-bin/2chtemplate/ に
> index.htmlを置いて、
ちょうど今、「CSS一覧」ってアンカーがあるな。
リンク先が「template.html」になってるけど、それをindex.htmlに
変えてしまえばいいんじゃね？
で、index.htmlにうｐされたCSS一覧を表なりリストなりで表示させる、と。
了解!!
明日から連休取れるからシコシコ作ってみる。
よろしく！
何だかんだでテンプレ来ないとこのスレの存在意義が
ないからね。他に見てる人も暇があればどんどん
うｐしてほしい。
で、テンプレのネタ切れになったので
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すればいいのかな？
とりあえず上。かな。
> スクリーンショットとhtmlファイルの両方うpすればいいのかな？
両方あるといいね。よろしくお願いします。
よろしくです。
>>80
・どの文書型でやるか→XHTML 1.0 でおkだと思います。
・構造ブロックをどう分けるか
#navigation #header #content #footer
(これしか思い付かないorz...)
>>81
ありがとん。ちょいと見て来ますﾉｼ
> #navigation #header #content #footer
最小の構成にするとこんな感じだろうね。
ただ、これだけだといくらなんでもやりづらいだろう。
CSS Zen Gardenのソース見てみるわ。
同意...
CSS Zen Garden のベースHTMLなのだが。。
http://www.csszengarden.com/zengarden-sample.html
結構ややこしい。
参考にしようと思ったけど、予想以上にごちゃごちゃしてるなぁ。
とりあえず、先に挙げた4つと、3列段組も作れるように
#navigationを2つに分けて5つにしたほうがいいかな？
#mainnav(自サイトのリンク)
#subnav(外部へのリンクやその他)
みたいな。
他の人の意見はどうかな？
複雑なので、一度印刷してから メモにまとめます。
> #navigationを2つに分けて5つにしたほうがいいかな？
あのスクリプトによるけれど、他のCSSを適用するリンクと
外部へのリンクって言ったら、「トップへ戻る」ぐらいかな？
> あのスクリプトによるけれど、他のCSSを適用するリンクと
> 外部へのリンクって言ったら、「トップへ戻る」ぐらいかな？
まあ、
「実際こういう風に出来ます」
っていうのが伝わればいいから仮のリンクを並べておこうと思ったんだけどね。
で、いまのところ考えている順番が
#header
#nav
- #mainnav
- #subnav
#content
#footer
ってな感じかな。
#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
>#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じゃないと上手く書けないッス……(；・ω・)
IE6の互換モードはクセがあるからなぁ。
まずはXML宣言抜きでちょろりと書いてみる。
マズそうならHTML4.01に直す。
とりあえずこれでいってみます。
>>92
俺も#contentが先にある方が良いと思うので
それで行こうと思います。
で、コンテンツの前に display: none な「ナビへスキップ」ページ内アンカーを置くとｳﾏｰ
という話が前スレにあったようななかったような。
DOCTYPE 宣言も DTD の URI があるのとないのとでモードが変わったような気がするが、そのへんうまいことやってくれ。
俺は信者なので XML 宣言も DTD の URI も全部書いてる。
モードで描画がちょっと変わろうが何だろうが、あるはずのものがないのは気持ち悪いと感じてしまう変態さんだから。
だから実を言うと、どうすればモードを制御できるか詳しく知らんかったりする。
はっきり言って俺、このスレ的に浮いてる orz
容量カツカツでやってるやつって、たいていはでっかい画像とか動画とか音声で容量を食っているので、
それに比べたらテキストの増加分なんてかわいいもんだと思う。
外部 CSS にしてるだけ救いがあるだろうし、テンプレで使う画像をなるべく軽くすればいい線行くだろう。
本来は文字コードくらいページ作者が自由に選択できて当然なのだが、
ブラウザがこんな状態なのでしゃーないわな。UTF-8 で XML 宣言なしってのは、かなり高い妥協点だと思うよ。
# モードチェンジはブラウザのバグであって、機能なんかじゃないと思う。
俺は 1年半ほど前に、目につく範囲の文書を全部 XHTML & UTF-8 化した。
別に unicode ﾏﾝｾｰなわけではないんだが、外国の友だちが多いのでこれもある意味妥協。
まそれはさておき。
想定している利用者には文字コードなんて知らん人もいるだろうから、
「他の文字コードで使う場合はここを書き換えてね」とかの説明があれば親切かなと思う＜テンプレ
ﾉｼ
出力しか考えてなかったからスクリプトの修正が
必要だな...
ベースHTMLをあげる時にスクリプトの修正版も
一緒にうｐします。
>>95
> 想定している利用者には文字コードなんて知らん人も
> いるだろうから、「他の文字コードで使う場合はここを
>書き換えてね」とかの説明があれば親切かなと思う＜テンプレ
その辺の解説を含めてHTML書いてみます。
よろしく!
問題は、CSSとイメージの投稿・編集(?)ぐらいですかな。
編集は出来なくてもいいんだとは思うけど...
http://mohei.dip.jp/~naoto/cgi-bin/uploader/uploader.cgi
にあげときました。comment適当ってヤツです。
さんきゅー!ダウンロードしてみます。
すいかがイィ! :- }
時代もスタイルシートに追い付いたのねー。
とりあえず、サイトを変更したので(というか追記)次アップロードします。
一旦ﾉｼ
100〜のスレッドの続きを読む