９割がた完成したのでお披露目、というか
正式にアップしました。
もともとは、年数が増えてくると不便だなあ、と思ったのがきっかけ。
年ごとに管理してますが、
たとえばリベルタ杯や国内リーグの試合結果を見ていて、
前のシーズンはどうだっけ、と思ったら、
サイトトップに行ってその年の一覧に行って該当する大会をクリックして
その試合結果を見なければならない。
亀なので、面倒臭がりなんです。
それはイヤだ〜〜、と思ったのが始まり。
実際にはすでに２００５年からの蓄積があるわけで、
ミクシィに書いているレポを移行するかどうかはわかりませんけど、
少なくともこの先１０年くらいは不便のないようにしたい。
◆
と思って、いろいろ勉強しまして。
行き着いた先はインラインフレームという、やや邪道？
フレームセットでもないところがミソ。
フレームはこれから衰退、というか廃止されるなんて話もありましたが、
まあ１０年くらいはまだ大丈夫でしょ。
というわけで、これまでも使っていたテーブルに加えて、
インラインフレームを多用したメニュー構造になってます。
もしインラインフレームを何らかの理由で表示しない設定にしてる人、
いましたら、一応代替ページに飛べるようになってはいるはずですけど、
いまいち自信はありませんし、それにすごく不便です。
ごめんなさい。
でもたぶんこれで、私のほうのメニュー管理はかなり楽になったはず。
まだ慣れないところもあるので、失敗もあるかもですが。
インラインフレームに落ち着くまでは、
ジャバスクリプト勉強すべきなんだろうか、とか、
フレーム使うなとかいうサイトをいろいろ見て回って検討したり、
だいぶ迷いましたけど、
デメリットは一応克服できるように……してあるハズです。
◆
そしてもうひとつ、大幅に導入したのが外部ファイルによるCSS。
これも万が一読み込めないブラウザとか使ってる人がいたら、
かなり白くてそっけなくてわけのわからないページになっちゃいますが、
まあちょっと今回のデザインはこってりしすぎかもしれないので、
イヤな人は独自のCSS適応しちゃってくれてもいいです（できる人は）。
私もそのうち飽きたら、ガバッと真っ白デザインとかに変更するかも、
数年後くらいには？
◆
で、リンク集を除く、これまでのページ＋αをアップしました。
まだちょっと手抜きページとかあります。
それと、ざっとチェックして回ってますが、まだおかしいところあるかも。
もしリンクがおかしいとかうまく表示できないとかありましたら、
ここでも掲示板でもメールフォームでも、連絡いただけると嬉しいです。
一応私のほうのウィンドウズでIE7とファイアフォックスでは確認してますけど、
それ以外でおかしな隙間ができたりすることもあるかもです。
そんなのも報告いただければ、対応努力はしてみますので。
掲示板とメールフォームもデザインもうちょっと整えました。
特にメールフォームはいまいち仕様がよくわからず、
歯の浮くような色合いになったまま放置してて、すみませんでした。
リンク集も、数日中には作り直してアップする予定です。
◆
基本的に、内容はそんなに変わってません。
上部と左サイドにメニューをくっつけたのが一番の変化で、
それに伴って色合いやデザイン変更、
試合レポへのリンクをスコアのところにつけていたのを別にして
ミニアイコンから飛ぶようにしました。
ブログ記事の幅の狭さに音を上げて作ったサイトだったので、
かなり幅広く取ってたのが、今度のリニューアルで
またちょっと狭くなっちゃいましたけど……。
まあどっちがいいかわかりません。
私のモニタはけっこうでかいほうらしいので、
それに合わせてると、不便だった人もいたかも知れず。
今回は横幅９００ｐｘ前後で収まるようになってると思います。
◆
前から使っていたHTMLソフト（HPマネージャー）も引き続き使いましたが、
いろいろ不便もあって、今回はezHTMLという無料ソフトをかなり使いました。
でもこれも不便なところもあって、結局両者併用でしたけど。
しかも古いファイルを加工するのにワードやエクセルで一括変換とか
マクロ組んでざ〜〜っと書き換えとかやって貼り付けたりしたので、
ソースの見た目はすごく汚ないです。
見ないでください。
それから、画像ソフトのGIMP2をこれまで使いかねてたんですが、
だんだん慣れてきて、今回かなり利用しました。
そうそう、クラブ所在地のメキシコマップ、ベースのメキシコ画像は
友人のはびさんからもらったものです。サンクス！
まだまだ慣れないところもあって、素人臭さがあちこち残ってる、
というか相変わらずですけど、
でもまあ少なくとも少し使いやすくはなったかな？
だといいなと思ってます。
誰が使うかって、私が一番使ってるんでしょうけど……。
ここが不便とか、こうしたら、なんて話も、
あったらどんどんお寄せください。
対応できるかぎりで努力しますので。
【このブログについての最新記事】
＞たとえばリベルタ杯や国内リーグの試合結果を見て＞いて、
＞前のシーズンはどうだっけ、と思ったら、
＞サイトトップに行ってその年の一覧に行って該当す＞る大会をクリックして
＞その試合結果を見なければならない。
自分の動画埋め込んである方のブログもそうなんでいつかやろうとは思ってるんですが……なかなか。
作るときは参考にさせてもらいます。
でもこれをインラインフレームで作ったんですか！？
それはものすごく手間なような気が。
ともかく、リニューアルお披露目おめ＆お疲れさまでした。
これからますます充実していきそうですねぇ〜、特にサルシードの部屋が！？
ちっとはよくなってますか？ だと嬉しいです〜。
でもそうなんですよねえ、データとして使いたいと思うと、
やっぱりいろいろと工夫しないと不便で……。
アッキーさんのところも内容が充実しているだけに、
さらに便利になればさらに使いでのあるサイトになるでしょうね。
私もホントはｐｈｐとか使えたらいいんでしょうけど、
いろいろと条件が……。
そちらも頑張ってください。楽しみにしてます。
＞monjablancaさん
色、こってりすぎませんか？
まあでも何度も書いているように、それは飽きたら簡単に全部変えられるので、
あまり拘らず、好きなように作ってしまいました〜。
え、でもインラインフレームより効率的な方法ありますか？
あるんだったらぜひ教えてください、今からでもまだ頑張ります。
私が調べた範囲で（かつｆｃ２で使える範囲で）はこれが最良かなと思ったんですが……。
サルシードの部屋、放置しすぎで、
前に通達のあったＵＲＬ使用文字制限に引っかかって
写真がほとんど見られなくなってたことに、
今まで気がつかなかったという……（苦笑。
まあでも今回、そこらは徹底的に修正したので、たぶんもう大丈夫です。
おサルの部屋もまた写真とか溜まってるので増やしたいですが、
それよりもメキシコ代表なんですよ〜何とかしたいの。
あと、メキシコクラブもデータ少ないなあ、なんて
次々欲が出てきて困りますね。
でもまあとにかく、今回のリニュでコンテンツ増やしても
見通し悪くならない「予定」なので、
思いつくところ・気の向くところからやっていこうと思います。
（私はちらりと試してみて、すぐイヤになった）
そっかぁ、そういう制約があるところでは、
確かに使い勝手はよさそうですよね。
色も、バランスが良くて素敵です〜。
ただ、家の横長画面のパソコンで見ると、サイト自体が左寄りなんですが、
そういう設計なんでしょうか？
職場の旧型パソコンの画面ではちょうど真ん中に入っているようだったんですが、あれはたまたま？？
左寄りでも別に不自由はしないのですが、
右側がスペース空くので、ちょっと不思議な感じです。
って言葉で書くよりスクリーンショットとればいいんだよな。
と気づいたのでこっちをご覧下さいまし。http://blog107.fc2.com/g/guatefutbol/file/20080417154146.jpg
画面はファイアフォックス2ですが、IE7でもほぼ同じ。
私が気づいた唯一の違いは、メールフォームの下にあるはずのブログへのリンクボタンがファイアフォックスだと消えてることです･･･。
IEだとボタンは見えますが、ボタンの縦の長さが他の1/3くらいしかありません。
とりあえず気がついたのはそれくらい･･･ですが。
それにしても、これだけ素敵な入れ物ができたら、やっぱり、次は中身ですよねぇ〜。
また新たなコンテンツが出てくるのかな？
楽しみです〜。
さっきのリンク先は管理人しか見られないんでした。
こっちにアップしておきます。
http://picasaweb.google.co.jp/guatebuena.part2/fyBFHL
こちらはちゃんと見られるはず。多分･･････。
これは大変だったでしょう…亀さん。
私、たぶんココでは比較的貴重なMacユーザーなんですが
大丈夫そうですよ。
ただ、メインで使ってるのはFirefoxなんですが
monjablancaさんがおっしゃってるのと同じ現象はありますね。
おおっ、いろいろありがとうございます！
私はfc2サイトが初めてで、phpやcgiなんか今でも使えませんが、
HTMLタグもようやっと、って感じで始めたので、
別に不自由は感じてないんですけどね……。
むしろブログよりぜんぜん制限なくてラクチン〜とか思ってました（笑。
で、左寄り問題ですけど、デザイン参考にしたサイトがだいたいそんなんだったかも（笑。
それと私、最近右にグーグルカレンダーを読み込んでいるので、
横幅が短くなっておりました（苦笑。
で、それなのになぜ横に無駄に長くて横スクロールが出るのか？というと、
そこが素人の悲しさで、インラインフレームの幅とバックのテーブルとの兼ね合いとか……。
だけど、結局サブメニューだけ長くなるのもバカみたいだし、
メインコンテンツはだいたい同じ幅に固定してしまったし、
グチャグチャなデザインになっている外枠を何とかして、
全体を中央寄せにはできるかもです。
ちょっとやってみるので、気長に待ってみてください。
で、メールフォームの下のブログへのリンク？？？
これがよくわからないんですが、私のほうではそんなもの、キツネでもＩＥでも
さっぱり出てこないんですが……。
不便だなとは思ってたんですよ、トップへのリンクがないの。
投稿終了したら、トップに戻るリンクが出るようなんですけどね。
だから、あるのは嬉しいんだけど、それどこにあるの……？状態。
すみませんけど、またお時間あるときでいいのでスクリーンショットお願いできませんか？
肝心の中身のほうは……まあこれまでと同じ感じで、大会ごとに増やしていくくらいだと思いますが（苦笑。
＞Egoistさん
いや〜、大変だったといえば大変だったし、
これだけのページ数をと考えればそうでもなかったかもだし……（笑。
でもまあ楽しかったです、あれこれ工夫を考えるの。
デザイン決めて構築したら、あとは既存のページをちょっと加工して
流し込めばいいだけ、と思ってたんですが、どうせいじるならと
ついついああしたらこうしたら、なんて変更しちゃったり、
この試合どうだっけ、とレポ読みに飛んでいっちゃったり（笑。
まだ作りたいページもありますし、特に代表ですね、
まあぼちぼちやっていくので、たまに覗いてやってください。
で、同じ現象、左寄りですか、それともリンクボタン？
左寄りは、そうするつもりだったんですが、
上にも書いたように、全体を中央寄せにできるかどうかやってみます。
私も窓ではありますが、ファイアフォックス常用なので、
たま〜にＩＥで確認はするんですけどね……。
マックだと何かと違うところが出てくるようなので、
また何かありましたら遠慮なく書いてきてください。
実はマックから見に来てる人、わりかしいるようなんですよ。
どうしてこんな複雑怪奇な構造にしたのか思い出してきました（苦笑。
右の余分な余白を削る、という以前に、無駄な横スクロールが出ないようにしようと思ったんですが、
実はこれ、まずヘッド部分のインラインフレームを普通に幅１００％に指定すると、
なぜだか右端におかしな空白ができちゃうんですよ。
で、そこらをオーバーさせて調整して。
それから、今度は画面がトップのメニュー幅よりも小さい場合に、
IEとファイアフォックスの両方で、
１．メニューが縮んでデザインが崩れない、
２．かつ横スクロールできてちゃんと見える状態にする、
このふたつをクリアするために、こうもいろいろと珍妙な横幅設定になっていたのでありました。
だからいっそ横幅を全固定して、
全体を中央寄せにすれば、って思ったんですけど、
えーと、それをそもそも念頭に置かないデザインにしちゃってるので、
けったいな見栄えにならないためには、また少し頭を使わねばならないかも……。
ちょっととりあえず自分の覚え書きもかねての言い訳と中間報告です。
ちなみにマックのサファリだともっと深刻なデザイン崩れが……。
でもそれはサファリのバグかもとのことで、
まったく、ブラウザにはいつも泣かされますです。
う〜ん、すごいですね。しっかり整理されてますし･･･。見てても勉強になります。
あ、あとこっちでもmonjablancaさんがおっしゃってるボタンの現象確認しました。
使用しているのはファイアフォックスやIEではなく、
マイナーなブラウザなので、何とも言えんのですが。
メールフォームのページ、ではなくて、
左メニューの一番下のところ、
「最新記事（ブログ）」って書いたところが切れてるってことですかもしかして？
うーむ、とすると皆さん、私より大きなフォントで見てるってことなのかも……。
ちょっと対処してみます。
あらら、連続投稿したら、最初のchieesさんへのお返事が飛んじゃったみたいで……。
あとさきになっちゃいました、すみません〜。
===================
いやはや、手探り状態で我ながら情けないんですけど、
でもまあどうにか使っていただけるような構造にさえなっていてくれれば……
と、いろいろ弱気な現在です（笑。
ところでボタン、その存在自体が私には認識できてないんですけど……。
うう〜、謎のボタン、どこにあるんだぁ〜。
===================
と書いて投稿したつもりだったんですが……。
そのあと、たぶんわかったかも、と思って、
ちょっと修正してみました。
IEだとフォントサイズ固定しちゃって、すみません。
ファイアフォックスだとそれが効かないんですけど、
あまりに巨大フォントにしない限り、一応見えるくらいの余白はできたかと。
けど、考えたらフォントの大きさによっても見栄えが変わって、
インラインフレームだと不都合が出てくるかもだなあ。
と今ごろ気がつく亀でした……。
サイト作りって難しい……。
ちゃんとボタンが見えるようになってました。
問題は、フォントというよりも画面なのではないですか？
亀さんは大きなモニター使ってらっしゃるようだし。
私は職場でも自宅でも15インチのモニターですが、
縦横比が違うので、職場で見た時はファイアフォックスでも一部見えてたボタンが
自宅ではまったく姿を消していたと記憶しています。
いや、昨日のことなのに、もう記憶があやふやで申し訳ないんですが･･･。
画面の解像度を言えば、職場は1024×768（多分）、自宅は1280×800で、
ファイアフォックスのフォントはデフォルトの16をどちらも使っていますが、
自宅のPCの方が、表示される文字が小さいです。
なんだか段々おもしろくなってきたので、
ついでにWindows版のサファリ3.1でも見てみたのですが、
確かに一部デザイン崩れてしまってますね･･･。
ブラウザは本当に難しいですが、頑張って下さいね〜。
いえいえ、みんなわかってるのに私だけわからないなんて（笑。
でもとりあえず直ってよかったです。
それで気がついたけど、サイドメニュー、わーいぴったし！とか
高さを調整して嬉しがってましたけど、
この調子だと大部分が、一部隠れちゃってるんだろうな……。
HTMLソフトで見ているときと、実際にアップして見るのとでも
また違ったふうに見えちゃうんですよねえ。
ホント、難しい……。
私のモニタは１７インチ、まあ今だと標準でしょうか？
解像度はパソの設定で変えられますね。
変えてみたけど、それが原因ではなさそうでした（画面が狭くなるだけですもんね）。
やっぱり、フォントの大きさとの兼ね合いだと思うんですよ。
インラインフレームなのにスクロール出さない設定にしてるので、
はみ出した分はすっきり見えなくなるだけという弊害が。
私はフォントを小さめに設定しているような気がします。
んで、IEとキツネでもいろいろズレがあるんですよね……。
しかしサファリでのデザイン崩れはひどい。
上にも書いたように、原因不明で、手探りで修正方法を探すしかない場合もあるので、
自分でどうなってるか見ることができないのは不便です。
そういうプラグインを入れることもできるらしいんですけど、
私のパソ、最近何かと挙動不審なので、あまり余分なものは入れたくなかったり……。
どこで妥協するか、になってきますよね、こうなると。
ついでですが、リンク集もアップしました。
素材・サイト構築のところに、今回大いに活用した各種お役立ちサイトなんかも
新たにリンク張っておきましたので、興味のある人は覗いてみてください。
それ以外のはこれまでと同じです（苦笑。
http://browsershots.org/
サイトがいろんなブラウザでどういう風に表示されるか、が見られます。
それぞれのブラウザでのスクリーンショットが表示され、クリックで拡大。
微妙に見え方が違うのがおもしろいですね、やっぱり･･･。
うわああああ、また面白いものを〜〜（笑。
うーん、このごろはもう何でもネット上でできちゃうんですねえ。
しかしこれ、やりだしたらドツボって気もしますが（笑。
でも参考にはなります、ありがとうです。
で、中央寄せ、いろいろいろいろ迷いました。
幅を固定してしまっていいかどうか、
固定するためにはダイエットが必要なページもいくつかありましたし、
でもやっぱりやってみたらそのほうがスマートですっきりするかなあ、と思い、
まずはスタイルシートで何とか一括でやる方法がないかと模索し……
結局１５０ほどあるページひとつひとつに一言ずつ書き足すことになりました。
けど、おかげで、何やら小手先でごまかしていた部分がすっきりして、
ついでにもう一こえすっきりしようと思ったりもしたんですが、
結局テーブルはブラウザに左右されないレイアウトには相当有効だ、ということで、
そのまま据え置きになりました。
が、全体の幅を８５０ｐｘで固定にしました。
いかがでしょうか。
でもやっぱり根本的なところは変わってないので、サファリではぜんぜんダメですが……。
サファリ使ってる人、いたらごめんなさい。
でも原因がわからない……。
あと、少なくとも上記リンクのスクリーンショットサービスだと、
見事に文字化けしてるのもありますけど、でもちゃんと言語もチャートセットも指定してるのに……。
これは、このウェブサービスが日本語に対応し切れてないから、と思うべきでしょうか？
まあともかくも、ひとつ大きな改善が終わって、
ついでにちょこちょこと細かいところのデザインも手直しして、
私としてはなんかけっこうよくなったんではないかと、
ひとりでニマニマしてます。
monjablancaさん、ナイス指摘ありがとうございました〜！
この方がずっと見やすいし、キレイです。
実際には、結構左寄りのサイトが多くて、
横長のモニターだとそれが目立つんですよね･･･。
別に使えないわけではないんですが、
多分、普段、きちんとセンタリングされているブログの画面を見慣れているせいかも（笑
テーブルタグはシンプルで、
どんなブラウザでもきちんと表示されるし、結構重宝ですよね。
面倒くさいのが欠点ですが･･･。
あのブラウザ比較サイト、おもしろいですよねぇ、
私も、これ、ドツボにはまるよな〜と思いながら、
ちょっといろいろ見比べてしまいました。
それにしても、こんなにブラウザあるものなんですね。
バージョン違いはともかく、聞いたこともないブラウザもあったりして。
文字化けは、う〜ん、何が原因なんでしょ。
画面のキャプチャに加えて、エンコードのチェックもできるようなサイト、
誰かつくってくれないかなぁ？
今もまだ試合の真っ最中だというのに、
さっきから私は、とうとうノートパソのほうにサファリをインストールして
原因究明に乗り出してしまいましたよ（笑。
グーグル解析で調べたら、サファリで見てる人が１８人もいたんですよね。
割合から言えばごくごく一部とはいえ、さすがに申し訳ないと思って……。
で、いろいろ見てみて、どうやらリストタグの解釈がサファリでは違うところに原因があるらしいと。
調べてみたらこんなページがあって
http://www.geocities.jp/suit_oyaji/stylesheet/browser.html
仔細に研究してある。いやああああ、すごいなあ。
というわけで、直りました、たぶん。
もっとも、私のサファリはWIN版なわけなので、マックではまだ不具合あるかもですが……。
そもそも表に組み込んだ区切り線がまったく表示されない現象もあったし。
でもメニューが見えないってのは深刻なので、これが直って一安心です。
ついでにここもフォントサイズ固定してしまいました。
メニュー部分はデザイン崩れると悲惨ってことで、ご了承ください。
標準フォントって１６なんですねえ。
私は大きくしたつもりだったんですが、それでも１２なんです。
以前は１０で見てたんですよね。
モニタがでかいわけではなかったのかも（笑。
というわけで、ちまちまちっこい字だな〜と思われるかたも多いでしょうけど……。
サファリ、さくさく動くし、デザインもおしゃれでいいですねえ。
ただ、画面がピンボケっぽくて……。
もしや、画素数を落としてスピード上げてる……ってなことはないか！？
ともかく、問題があるときは自分でも実地で確認できるのはやはり嬉しいです。
マックでの見栄えとなると、やっぱり上記サイトのスクリーンショットに頼るしかないですけどね。
以前のデザインでサイト作ってたときは、マージンとパディングで
IEとファイアフォックスだけでもずれてずれて、泣いてました。
今回はそれに比べて私もちっと賢くなったし（笑）、
ブラウザのほうもいろいろ対応してくれるようになったし、
割とどのブラウザでもまあまあに見えるように作れたような気がしてます。
中央寄せも、やってよかったと満足です〜。
もっと幅がほしくなったら、スタイルシートでがばっと広げられますしね（笑。
まあそうすると、試合結果のテーブルなんかがかなり間抜けになるでしょうけど……。
そうそう、色合いもちょっと目がちかちかしそうだったところとか
チョコチョコと手直ししました。
だいたい整ったら、今度は中身ですね（笑。
いろいろやりたいことはあるんですけど、まあぼちぼちやっていくことにします。