ジョンコの楽しい部屋

ジョンコさんのホームページのトップページを少し改編してみました。 はて？お気に召すますでしょうか？ ご友人からご指摘が有ったとお聞きしていましたので、 お許しを頂かないで、独断と偏見で改編しましたので、 お気に召さない場合は、お許しください。 私もCSSの勉強に良い経験をさせていただきました。

1	ジョンコさんの原本です。	ただし、カマキリのお写真とJTrimの画像は次の改編ページと同調させるため、 次の場所に移動しました。 �@カマキリのお写真はフォルダ「top/photo/」に移動しました。 �AJTrimの画像はフォルダ「top/img/」に移動しました。
2	原本のレイアウトを 維持して改編しました。	主な改編部分 �@左のメニュー欄の背景をグラーデ―ションに変更しまし、 　同左のメニュー欄をマウスオーバーで背景と文字色を変えました。 �Aメニュー欄にボタン「メニュー」を追加しました。 　このボタンをクリックすると下のメニュー明細が非表示になります。 　再びボタン「メニュー」をクリックすると明細が再表示します。 　この機能はスマホで閲覧されるとき有効かな？と思い追加しましたが、 　はて？効果のほどは分かりません？ �B上段のお写真はCSSでスライド表示にし、 　お写真をクリックすると該当のページを表示するようにリンクしました。 　ただし、私は各ページを持っていませんので、 　直接リンクしていますので、相対リンクに変更してください。 　＊カマキリは「写真で遊ぼう」にリンク 　＊蝶は「蝶の乱舞」にリンク 　＊紅葉は「旧林家の紅葉（尾西歴史民俗資料館）にリンク 　＊イチョウは「稲沢銀杏No.２」にリンク �C「ご訪問ありがとうございました・・・・」の挨拶分は、 　下段の画像が画面に表示するように一部非表示にしました。 　そこで、ボタン「続きを見る」をクリックで、 　非表示の部分「やる気を起こさせて・・・・」が表示します。 　非表示部分が表示しますと、ボタンが「閉じる」に変わりますので、 　「閉じる」ボタンをクリックすると、 　「やる気を起こさせて・・・・」が非表示になります。 �D下段の画像は「JTrimで遊ぼう」、「PCで水彩画」、「木の実会」、 　「オートシェイプ」の画像を配し、 　クリックで各ページを表示するようにリンクしました。 　ただし、直接にリンクしていますので、相対リンクに変更してください。 　さらに、マウスオーバーで画像の効果をCSSで付加しました。 �Eその他背景色等を少し変更しました。 �FCssファイル「jyonko.css」
3	メニュー欄を、 タイトル「ジョンコの楽しい部屋」の 下段に移動しました。	主な改編部分 上の2「原本のレイアウトを維持して改編しました。」に、 次の部分を追加、変更しました。 �@メニュー欄を、タイトル「ジョンコの楽しい部屋」の下段に移動しました。 �Aスマホで閲覧したとき、メニューの詳細が非表示となり、 　ボタン「メニュー」をクリックするとメニューの詳細が表示します。 　メニュー詳細が表示の状態でボタン「メニュー」をクリックすると、 　メニュー詳細が非表示になります。 �B上段の写真の下にタイトルを表示するようにしました。 �C下段の画像の下にタイトルを表示するようにしました。 　スマホで閲覧した場合は画像が縦１列で表示します。 �DCssファイル「jyonko.css」
4	ファイルなどを一括ダウンロード Zip圧縮ッファイル「test_127.zip」	手順 　�@圧縮ファイルを適宜の場所にダウンロード 　�Aセキュリティーを解除 　�B圧縮ファイルを「すべて展開」で解凍してください。