ぬログ

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

えーーーと、、、

昨日は「完成〜！！」で終わらせてしまったので、

とりあえず（今日の時点で）最終的に、
どうなったのか！だけ、報告しておきますね。


こんな感じどぉぉぉ〜〜〜す☆彡

 

ちょっと、キャプチャで適当につなぎ合わせているだけなので、
ガタガタしてますが、
（これをキレイに修正する手間はかけたくないので。。。）

まぁ、ざっとこんな感じです。



あとは直接、
『ぬ』のほうに遊びに来て下さいね。


白河荘物語のページは↓↓↓
http://shacho.nu/shirakawa/index.html



ホント言うと、
あれからまたJqueryに問題が出て、
ツールチップを入れたせいで、スライドが動かなくなったり（←修正済み）、

作品概要部分をキレイ書きなおしたり、
（これ、データベースに凡そのものは入っているので、
ほぼコピペしているだけなのですが）


と、まぁ、
やることは尽きないですね。


今日はこれから宇宙大進撃に取り掛かります★



それでは。

今日も昨日の続きから★


昨夜は眠さに負けて3：00でダウンしてしまいましたが、
シンジ氏との3回目の電話会議において、意見と指示を貰っているので、

あと、やるべきことは、

　【1】どういうわけか、Dreamweaverのテンプレを使うと、IE上で変な段差が生じてしまう←の修正

　【2】アイコンの説明をJqueryにする
　
　【3】各作品のトップページ上にあるコンテンツの並べ替え

　【4】細々とボタンの追加

　【5】漫画のページの本の背景と、ボタンの設置

の5つかなぁ〜。
（大きく分けるとね）

ぃゃぃゃぃゃ！
っぃにここまで来ましたね〜♪
ここに到達するまで、2週間もかかっちまったけど、
まぁ〜、思いの外　良いサイトが出来たと思うので、
それはそれ！！感無量でありますぬ！！！


と言うわけで、
早速、作業に入りましょう〜〜〜===3


まず、
【1】ですが、

昨日あれだけ時間を費やしたのに解決策の糸口すら見出せなかったのが、

シンジ氏との電話の中で、
話しているうち、どぉぉ〜〜〜も
「これぢゃないか・・・」というヒントがピンと来てしまって、

兎にも角にも
試してみることにしましょぅ！！！


（↑実装前の状態ね）


実は、テンプレ使わないで、
自分で作ったdivボックスは、普通に段差無く横並びになっているんですよね。

てことは、
これは『横に並べたら必ず段差が生じる』というわけではないようです。


そ・こ・で、


テンプレで出来たsidebar1の外側に、
全く同じdivを作成。
作成後、sidebar1を消去。
（このsidebar1が諸悪の根源なところは掴んだので）


すると・・・



見事に謎の段差は克服され、
IE上でのズレも無くなりましたね〜！！ｳﾝｳﾝ


昨日あんなに悩んだのがウソのように
ｻｸｯと片付いてしまったので、
嬉しい反面、「あ、こんなことなのか〜」と、ちょぃ呆気なくもありました。



でも、そんなことは言っていられない！！！


どんどん次へ進めなくちゃ★ね。



　【2】アイコンの説明をJqueryにする

これはですねぇ、
Jqueryが上手く乗らなかったので、
CSSを使った吹き出しを採用していたんですよね。

ところが、
吹き出しの位置が固定されているので、
それなら画像上でマウスのポインタを一緒に動いてくれるほうがいいのではないか？と、

結局、
ここでもJqueryを用いることにしました。

もぅ既に若干トラウマでもあるJquery。
シンジ氏が進めてくれた、tipsyはpluginがDL出来なかったので、

Create a Simple CSS + Javascript Tooltip with jQuery

という、黒背景のツールチップを採用。



すると、
これが見事に動作してくれて、イイ感じに！！



やはり専門の方が見てくれると、
いいところ指摘してくれますね！


↑こんな感じに。

 

動くようになったのを由として、
『白河荘物語』のトップページにあるアイコンにも実装しちゃいましょう！！


ね！！
これで、
　【2】アイコンの説明をJqueryにする　←は終了〜！！



お次は、
　
　【3】各作品のトップページ上にあるコンテンツの並べ替え


ですです。



当初、話数が物凄く多いお話もあるので、
表が下にだぁぁーーーーーーーっと長くならないよう、

縮小可能パネルの中に隠していたんですね。


ところが、シンジ氏が言うには、

「インデックス、隠れてないほうがいいと思うよ。　むしろこれがメインみたいものだしさ」


そー言われると確かに。


しかも右側のレイアウトにいちばん上がいい！と言うんですね。

でも、
200話を超えるような作品の場合、
1画面の右全部、この表で埋まってしまいますよ。

どうなんだろぅ・・・？と思慮しているとすかさず、


「スクロールバー付ければいいんじゃない？」



あ！な〜〜〜〜るほどぉ〜〜〜〜〜！！！


そーいうのがポンポン出てくるところが、
流石です。



あ・・・ボックスの大きさが・・・

これを上手く修正して、はぃ！！




それと、
「前回までのあらすじ」は、右の見える位置に置いてはダメとも指摘。


初見さんにはあまり重要でない項目ゆえ、
これは扉絵の下が良いとの提案。


これも
な〜〜〜〜るほどぉ〜〜〜〜〜！！！だよね★



あとは、
「下のほうは見たい人がスクロールして見ればいいんだし（既に隠れている的意味で）、
　別にわざわざ隠す必要はないよね？
　下は賑やかなくらいでいいと思うよ！」

おおおおおお！！


そー言われてみれば、そうだよね！！

ということで、

「登場キャラクター」を縮小可能パネルの外に出します！！



はぃ。静止画像なので、
見た目に判り難いけど、パネルの外に出しました！！



　【4】細々とボタンの追加


これ、↑の画像を見ても変わるように、
ちょぃちょぃやりながら作業していたんですね。



↑「ぬ」に戻るボタンの中に、

　　「トップへ戻る」　の表記を入れたり、

 

↑扉絵の下に、

　　「最新話を読む」ボタンを組み込んだり。


これも
「無いと、判りづらい」という指摘から。

実際、私自身も、
「ちょっと判りづらいかなぁ・・・と思いながらも、スルーしていた個所だったので、
言われて納得。やっぱり・・・ね。



さてさて、
あとは、　【5】漫画のページの本の背景と、ボタンの設置　←コレですね。



今、漫画のページはデフォルトの背景（木目）になっておりますが、
やっぱりカッコよすぎるので、

ここはオリジナルにアレンジしちゃいましょう〜



　　　　　　　　　　　　　　　　　　　　　　　　↓



とりあえず、次に作るであろう、

　『宇宙大進撃』のページを意識して作りました。

あんまりごちゃごちゃしないほうがいいかなぁ〜・・・

ってのと、

暗めの色がいいかなぁ〜・・・


とが相俟って、宇宙に。


本当は、オリジナル木目とかも作ってみたので、
『宇宙大進撃』のページ作成以降、変えるかもしれません。



さ〜〜〜〜〜て、
これで大方の骨組みはほぼ完成です！！


あとはこれまで作って来たものをテンプレートにして、
作品ページをじゃんじゃん作っていきましょう〜♪


早く作品アップしたいし、
早く充実させたいもんね。


まだまだ『ぬ作り』は続くよ〜〜〜。


でも、サイト作成の記事はここまで★


二週間の長きに亘り、
どうもありがとうございました。

昨日のIEズレは後回しにして、

今日はシンジ氏と電話会議をする日なので、

その前に
漫画のページを作ってしまいましょう〜。


実は昨日寝る前に、
このJqueryを使おう！！！

と決めていたものがあって、
ソイツを動く状態にまではして置いたんですね。




それがコレ。

実は作成中、
何度も何度も、firefoxがクラッシュを繰り返してしまぃ、

途中画像のキャプチャが無いのですが、

まぁ〜〜、
あれやこれや弄り倒して、

やっとお望みのものを作り上げましたよ。



さて、ここからは、
シンジ氏との電話中のお話。

本当は、
各ストーリー毎のページと、『ぬトップ』についても
聞きたいことが山ほどあったのですが、

またまた直前に作っていたページがココだったので、
電話にて、
このページのレイアウトから弄ることに。


まずは、上部の「KOKONI TITLE GA HAIRIMASU」の部分。


ここって、
タイトルスペースとして確保しておいたのですが、

シンジ氏曰く、
「漫画が下にはみ出る（スクロール）は避けたいよね。ここは要らないんじゃない？」


おおおおお！！！！
確かに☆


「タイトルとかは下に置けばいいでしょ」


というわけで、
上に詰めます。



いちいちズレが生じるので、
CSSを弄りながらの作業。

ここでもシンジ氏とがテキパキを指示を出してくれるので、
とってもスム〜ズに作業が進んできます。


あぁ、、、シンジ、
やっぱりプロって凄いんだね！！



さてさて、
シンジ氏がもう一つ気にしてくれたのが、横幅。

何せ何せ、
原稿の大きさに合わせて設置しているので、
これで横幅もいっぱいいっぱい使っちゃってるんですよ。

ちなみに、
今の段階では、ibookでページをめくるボタンが若干はみ出ます。

それを修正すべく、
ボタンを内側に移動。


「別に重なってても問題ないんじゃない？」

との提案により、内側へ内側へ移動していきます。




　　　　　　　　　　　　　↓




　　　　　　　　　　　　　↓






はぃ。
CSS上の操作になるので、
段階を踏みながらTryした結果、

本の上に重なるレイアウトで落ち着きました。



あとは、
下の「NEXT STORY」「PREVIOUS STORY」の部分に、
ボタンの画像を組み込めば、

ここもほぼ完成です！！



シンジ、
本当ーーーーーに本当ーーーーーーにありがとう！！！！！


あなたがいなかったら、
この『新サイト』はこんなにキレイに出来あがっていなかったでしょう。


と言うか、
シンジと出会っていなかったら、
生まれていない作品も多々あるはず。


あなたとの出会いが私の人生を素晴らしいものにしたことは
間違いないんです！！！


そんなシンジと出会わせてくれた神様、
どうもありがとうございます。



あ、
今更だけど、

「シンジって誰？」


って思っている人、

ぅぅぅ、このブログでは全然紹介していなかったですよね。



幼馴染であり、親友であり、
子供時代に大きな影響を受けた人物で、
現在はアーティストとして活躍されている人物です。

詳しくは↓を見てくださいね。

vwv11.com

日付を跨いで、後半に続く。

さてさて、どぅもどぅも。藍鈴です。


だんだん、
各ストーリー毎のページも出来あがってきて、
よーーーーやく完成の兆しが見えてきました★


今日の作業では、
ページ内にあるコンテンツ毎のラベル的な画像を作っていきますよん♪



これにより、
色身が出てくるはずなので、
どしどし作って来ましょう！！！


今日はどちらかと言うと、
Photoshopでの作業のほうが多そうです。


ではまず、昨日までの『白河荘物語』のページ。


実は一か所変わっているのに気付きましたか？？

そーーーなんです。
左上部に、トップページにも配置している「ジャンル・アイコン」を付けてみました。

ちなみに白河荘物語は、
「アパート」「ほのぼの」「日常」の3つになります。


そしてその横の、空いているスペース。
実はこっちのほうが大事で、

ここ、ずっと仮で　「Nwe arrival」　という、テキストを入れていたのですが、

そうなんですよ！
ここに、最新話から、その前、その前、その前くらいまでの直リンクを置きたい場所なんですよね。

何せ、目立つ場所なので。



で、どん！！




全部2/22upになっていますが、
ちゃんと作った際には、ここのアイコンも弄りますね。



こんな感じに。


ここに出ていないストーリーが見たい場合は、
インデックスからのリンクになります。



じゃあ、次は
今日のメイン。カテゴリ毎のラベルを設置して見ます。

これはトップページに置いてあるものを、アレンジすることで、
アトリゑ斜長室色をアピールしてみました。




「白河荘物語の」ラベルは、
主人公の２人（アレクサンダーとマリア）にしてみました。


こんな感じで、
各キャラを配置するものいいですね。

（今は使いまわしなので、扉絵やヘッダーの絵と全く同じで少々くどい気もしますが）


こんな具合に、「あらすじ」、「インデックス」、「作品概要」、「登場キャラクター」と、
それぞれ色違い＆キャラ違いのラベルを配置してみます。

一気にどん！！




　　　　　　　　　　　　　　　　　　↓




　　　　　　　　　　　　　　　　　　↓





こんな具合ですね〜。

だいぶ色身を帯びてきたと思いませんか！？





さらに、「相関図」のコンテンツを加え、
フッターの色を、当サイト色（ダークレッド）に変えて、


全体的に、こうなりました！！




と、



ここで問題発生！！！




各ブラウザでチェックしていたら、


IEの場合のみ、
何故か、右側に変な段差が生じてしまうんですよね！！

↓参照



な・・・何これは・・・？？



その上の「Nwe arrival」の部分がはみ出しているせい？？

と思って、
divボックスの大きさに余裕を持たせても何も変わらず。






ネガティブマージンを組んで上にあげても、
ちゃんと見えているブラウザでは、

右側が上にめり込んでいくだけ。



なんだこれはーーーーーーーーーーーーーーーーーー！！！




結局この後、
３時間程、この問題と格闘することになりますが、

解決出来ないまま、
睡魔に襲われ、本日はダウンです。


さて、
明日は、シンジ氏と3回目の電話打ち合わせを行います。

多分、サイトの段組み段階の打ち合わせは
これが最後となるでしょう。


シンジよ、いつもありがとう！！！
心より感謝しているので、今度東京に行った際は、
是非、ゴハンを奢らせてくださいな。



ほぃではさｯｯｯ！！！

こんばんは。


今宵はまたJqueryとの戦いになりそうな夜です。


それもそのはず、
あれだけJquery三昧だったこの一週間なのに、

ここ数日は、
Jqueryから離脱しているのですよ！！！

おぉぉ！！！


しかし、あれだけ弄ってしまうと、
やはりセンテンスとして、中ページにも実装したいのが本音。


そこで、
今日は登場キャラクターの部分に用いることにしました！！



えーーーー・・・

料理の写真が並んでいて、
なんのこっちゃよくわからない状態ですが、

実はこれ、サンプルとして設置してあったものなのです。

もぅね、
まずは動かす前提で行かないといけないことは学習したので、

一旦、動作する状態のものをそのままコピってきた訳なんですよぉ。


これ、

Creating a “Filterable” Portfolio with jQuery

っていうJqueryなんですが、

↓こちらのサイトにサンプルがあるので、
是非試してみてくださいな。

phpjavascriptroomさんのサイトです、



で、で、で、

本題に戻って、

このJquery、何がイイって、
カテゴリ毎に画像を分類出来るんですよ！！

このサイトにぴったりぢゃないですか！？


んで、
早速コピった結果がこちら。

ちょっと上の段だけ、画像の大きさに合わせて
弄りましたが、大方こんな感じです。

 

ところがですね！！！


この登場キャラクターのコンテンツを、
丸々縮小可能パネルの中にぶっ込んだ途端！！




背景が白くなり、
↑画像のマウスでドラッグしている部分のリンクが効かなくなってしまったのでげす！！



ひゃぁ〜〜〜〜


そこのリンク効かなきゃ、
このJqueryの意味ないぢゃんかーーーー！！！


一応、
　「白河荘の住人たち」
　「アレクサンダーの会社の面々」
　「マリアのスーパーの仲間たち」
　「その他」

と、登場人物の括り毎に、
4つのカテゴリを用意したのですが、
（このJqueryはアルファベット表記しか受け付けないので、英語にしてありますが）

ダメです。
全く効いてくれませんでした。


（後々、縮小可能パネルから出すことになるので、
　　　　今思うと、、、何もこの時こんなにパネルに拘らなくても…というところなのですがね）


で、
またちょっと苦戦の歴史を並べてみましょう！！



↑ボックスの枠が画像の大きさに合わせて伸縮しちゃってますね。
横並びの数を指定していないので、ぐちゃぐちゃです。



↑画像の大きさは一定に出来たものの、
文字数によっても枠の大きさが変わり、それによって2段目がズレ込んでしまっています。




↑背景色を変えられない（変えても変わらない）どころか、
透明なまま、フッターにめり込んできました。
コピーライトが仕方なく、右に退かされている状態です。



そんな紆余曲折を経て、



「もぅ、このJqueryはダメだ！！！」



と判断。



まずは、
Jqueryを使わずに、
上記4つのカテゴリを、CSSにて
キャラクターの枠から作ってみました。


はぃ。


まぁ、これはこれで、
テーブルなのでキレイには並んでますよね。

まだ作ってみなと何とも言えないのですが、
ちょっとピンクが濃い気がします。

薄くしましょう！！



ほぃ。
更に、２段目はカテゴリが変わるので、
背景色もとりあえず水色にしてみました。



外側にも枠線を入れ、
次は、内側のdivを弄ります。




いきなり背景に濃ゆい色を入れて、
なんじゃらほぃ！？


実は、このdivボックス、縦横110pxで作ってあっるのですが、
そこに100pxの絵が入る為、パディングによって、
divボックスの外枠の線と、この背景色で二重線のように見せたい！！

ってのが狙いの構造なんですよね。





同じように、全4つのカテゴリ毎に着色したボックスを作ってみました。


そして、100×100の画像をぶっ込むとこうなります。




あ、ちょっと線が太かったかな？？




外枠の大きさとパディングを弄って、いい大きさに調整。



さ、サンプル画像を入れますよ〜〜〜。


お！！

なんかキレイぢゃないｯｯｯすか！？


じゃあ、そのままキャラクター達を入れてみましょう！！



うん！！

不思議な効果は得られないけど、
全然イイじゃないですかねぇ〜！！


一応、マウスのポインタを合わせた時に、
色が変わるように設定して、




さ、ここで、
Jqueryの登場です☆



TOPページの
「今月のイメージキャラクター」で、ケーボンゲゲーに使用している、

あの、
マウスのポインタを合わせるとデカくなるヤツ！！！

あれ、zoomiっていうんですがね、
あれを使って、

マウスのポインタを各キャラクターの絵に乗せたら、

どどんと大きく飛び出した上に、
さらにそこにカードのように名前とか最低限の情報を載せてみよう〜！というもの。



これは先に実装した経験があるし、
とっても簡単＆便利なJqueryなので、

いざ搭載！！





はぃ、ばびょーーーーーーーん！！！


あ、
全然こっちのほうがイイ感じぢゃないですか！！！！


もぅ、これ！！！



これに決定ーーーー！！！



各キャラのカード調画像を作るのが一手間あるけれど、
そこは頑張りますよーーーーー☆



ってな訳で、
今夜はここまで。




明日は、
各ストーリー毎のページ内に、ラベル画像を埋めて、
色身のあるページにしていきます〜。



ではでは。