私のメモ書きとしてのホームページ改造やパソコンに関する日記です

[新着] [ワード検索]
*--- Contents ---*
1.■パソコンの組み立て 　■ ビデオ編集用パソコン 　■ プルダウンメニューの改良 　■ 写真サムネイルの変更 　■ Intel HD Graphics 530のドライバー 　■ さくらネットのレンタルサーバーの変更 　■ Windows 10 Anniversary Update 　■ Windows10　インストール 　■ windows10　インストール 　■ ページの自動更新
2.■EDIUS Pro8のQSV効果 　■ キャッシュの件 　■ ビデオ作品のメニュー変更 　■ 再生リスト　追加 　■ EDIUSで一部のフォントが表示されない 　■ QSVのトラブル　原因究明 　■ ビデオ編集用パソコンの組み立て 　■ 項目ごとの掲載件数を表示 　■ ビデオ編集ソフト　EDIUS Pro 7 　■ 再びQSVについて
3.■Youtubeへのアップでトラブル 　■ プロジェクトの設定 　■ EDIUS Neo3.5 とQSV 　■ EDIUS Neo3.5に更新 　■ QSVについて 　■ USB3.0 Ports 　■ 常用PCのSSD化 　■ ビデオ用PCグレードアップ 　■ ビデオ編集用PCのHDD増設 　■ YouTubeの再生リスト
4.■再びEDIUS Neo 3.05に 　■ カレンダーの祝日修正 　■ 1080/60p　での撮影 　■ EDIUS Neo 3.53 　■ Internet Explorer 10への対応 　■ バックグラウンドプログラムの終了 　■ YouTubeの画面を最背面に表示 　■ Google Toolbarの漢字入力 　■ 親ウインドウからIFRAMEの関数を使う 　■ 画面の拡大・縮小
5.■Windows 7 再インストール 　■ ページ検索　リニューアル 　■ カラオケ文字の作成 　■ EDIUS プリセットの違い 　■ YouTubeお気に入り作品集 　■ YouTubeでの再生 　■ バグ修正 　■ YouTubeの再生 　■ iPad用に修正 　■ iPad用に修正したが・・・
6.■ｉＰａｄとホームページ 　■ ディスクの書き込み速度 　■ 拡大写真の表示サイズ 　■ EDIUS Neo3 タイトラー 　■ ビデオ編集ソフトの変更 　■ EDIUSでjpgの読み込み 　■ おもしろいマウス 　■ メニュー名変更 　■ 「ページ検索」の重複登録 　■ 再度「ページ検索」の改良
7.■ページ検索の検索精度 　■ ページ検索　再修正 　■ フォントについて 　■ ページ検索　修正 　■ 修正１　新着項目の文字数 　■ USB3.0のドライバー 　■ プルダウンメニュー 　■ 画像が移動するアニメーション 　■ ビデオと写真のリンク 　■ 「裸族の集合住宅」って何？
8.■YouTube埋め込み表示 　■ YourTubeへの投稿 　■ 文字サイズの切り替え 　■ ウインドウ７の再インストール 　■ マザーボードの交換 　■ pdfファイルのオープン 　■ パソコンのグレードアップ 　■ パソコン上でcgi、phpの実行 　■ Windows 7 インストール 　■ ノートパソコン
9.■キーボード・マウス新調 　■ Opera のエラー 　■ 画像の上に画像・文字を表示 　■ マーキーを用いて画像の反転・移動 　■ 選択中のサムネイルの枠 　■ サムネイルを影付きに 　■ スライドショウにおける背景色の変更 　■ ホームページ　リニューアル 　■ 新着・更新情報の改良　その他 　■ ＨＤＤの高温対策
10.■photo_slide.jsの修正 　■ photo_slide.js の修正 　■ ページ検索のバグ 　■ スタイルシートの整理と書き換え 　■ 音声で挨拶 　■ 蝶のスライドショウ　並び替え 　■ 写真集の表示修正 　■ 掲載ページ一覧について 　■ ページ検索　改良 　■ プルダウンメニューの改良（２）
11.■パソコンへのビデオの取り込み 　■ 「鉄道写真集」新設 　■ 「○○写真集」の中の検索について 　■ プルダウンメニューの改良 　■ 写真集に「我が町の風景」を新設 　■ ページタイトル変更 　■ パソコン製作奮戦記外 　■ ビデオ編集・ＢＧＭ etc 　■ ビデオ編集用パソコンの製作 　■ 「私の雑記帳」を白系に
12.■スタイルシートの切り替え 　■ joyfullyyの修正 　■ プルダウンメニューの項目 　■ トップページのデザイン変更 　■ スライドショウ　改良 　■ デフラグ 　■ 写真・スライドショウ　公開 　■ トップメニューの表示位置 　■ スライドショウ改良(Firefox対応) 　■ スライドショウ改良
13.■ビデオのこと 　■ 蝶のページの修正 　■ 複数頁の合体作業 　■ スライドショウ　完成 　■ EDIUS Neo2　によるビデオ編集 　■ スライドショウのマスキング完成 　■ スライドショウ 　■ ビデオ編集・その後 　■ ビデオの編集（１） 　■ ビデオ編集用のＰＣ
14.■スライドショウへの適用 　■ 擬似フレームのスクロール 　■ ジャンプメニューの改良 　■ ページの印刷 　■ TerapadでFirefoxを起動 　■ メニュー固定方式　２ 　■ メニュー固定方式 　■ タイトル・メニュー位置の固定表示 　■ Joyfulyyのスクロール 　■ Joyfulyyの改造
15.■URLの珍現象 　■ アナログ時計と時報 　■ タイトル・メニューの位置にアナログ時計を表示 　■ joyfulyyの改造 　■ メニュー固定表示解除 　■ メニューの固定表示 　■ 謹賀新年 　■ script type='text/javascript'に修正 　■ 年末年始の挨拶を自動で・・・ 　■ 今年のクリスマス
16.■Ads by Googleを設置 　■ 文字のプログレッシブ表示 　■ サーバーの大移動 　■ スライドショウ改良 　■ レンタルサーバーの速度 　■ ３５ミリ　フィルムサイズ 　■ リンクについて 　■ 独自ドメインの取得 　■ 掲載写真一覧の表示 　■ SDメモリカードのトラブル対策
17.■スライドショウ画面の変更 　■ サムネイルの半透明化 　■ 写真説明文の表示 　■ スライドショウ Ver3　完成 　■ スライドショウ Ver3　その４ 　■ スライドショウ Ver3　その３ 　■ スライドショウ Ver3　その２ 　■ スライドショウ Ver3 　■ data.js の作成 　■ 「写真日記」掲載写真一覧　その７
18.■「写真日記」掲載写真一覧　その６ 　■ 「写真日記」掲載写真一覧　その５ 　■ 「写真日記」掲載写真一覧　その４ 　■ 「写真日記」掲載写真一覧　その３ 　■ 「写真日記」掲載写真一覧 　■ 撮影地などの地図表示 　■ ＢＢＳを新設 　■ 写真ページの表示 　■ ＩＰアドレス 　■ リンク情報の整理
19.■スライドショウ修正 　■ 掲載ページ一覧を改良 　■ スライドショウの操作修正 　■ 「私の雑記帳」のデザイン変更 　■ プルダウンメニュー固定の問題点 　■ 雑記帳のプルダウンメニューを固定 　■ 「私の雑記帳」のデザイン変更 　■ 写真を静止してみたい・・・ 　■ 海外旅行の写真集にも適用 　■ バグ対策
20.■写真の表示方法(Ver2) 　■ 写真集の表示方法を変更 　■ 新方式による写真表示 　■ カウント２７万件 　■ CATV(LCV-Net)解約 　■ Ｂフレッツ開通 　■ お気に入りアイコンの設定 　■ WindowsXP再インストール 　■ トップページのカレンダー 　■ ビデオ作品のページ変更
21.■ホームページのアドレス変更 　■ Ｂフレッツ開通に備えて 　■ NHK時計 　■ トップページ及びプルダウンメニューの追加 　■ 写真表示のページ改造 　■ スライドショウにおけるツールメニューの非表示 　■ アドレスを変更した場合 　■ エラー対策(2) 　■ カウンターが２５万件に・・・ 　■ エラー対策
22.■画像の拡大表示 　■ サーバーの容量 　■ 「現在の訪問者数」を削除 　■ カウンターの表示２ 　■ 新規開設 　■ Exif情報 　■ 著作権の表示 　■ カウンター 　■ プルダウンメニュー　改良 　■ 写真集の表示
23.■写真の保存とBig Drive 　■ 今年初めての書込み 　■ プルダウンメニュー　Ver2 　■ トップページの修正 　■ 「ご感想」のページ 　■ 記事の行間設定 　■ ホームページのバグとり 　■ Windows XPとメモリー 　■ 2006年のクリスマス 　■ ホームページの細かな修正
24.■ホームページ　リニューアル 　■ 日本語入力の切替 　■ プルダウンメニュー 　■ Windows Vista 　■ トラブル解決 　■ ホームページの改造　その２ 　■ ホームページの改造 　■ スイス掲載写真一覧 　■ バージョンアップ 　■ 表示方法改造
25.■写真日記リニューアル
 新着の期間 日 　[3ページまでの表示] [新着一覧] 




▼
スライドショウ画面の変更2008/07/14(月曜)

左は今までの画面　[Scroll Off]が情報の左側に表示されている
右は変更した画面　[Scroll Off]を下側に配置した

この方が見やすい
この部分もマウスを１０秒間動かさないと半透明になる


▲ 　▼

サムネイルの半透明化2008/07/02(水曜)

以前にも少し述べたが、右側のサムネイルが目障りな時もある
そこでサムネイルを半透明化、つまり
　filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;
で５０％の半透明フィルターを掛ければいい
幸いなことに ;-moz-opacity: 0.5;opacity: 0.5 でＩＥ以外でも半透明化出来る

半透明化は
１．サムネイルの表示位置にマウスがある時は半透明にしない
２．マウスを５秒以上動かさなかった場合はトップ・サムネイルの写真リストの部分を半透明化する
と言う条件を設定した
これでスライドショウの写真鑑賞に「ある程度」集中することが出来るだろう

Ver3.1として各ページに今日適用した
中々面白いアイディアだ
半透明化、その後2008/07/07(月曜)

５日間ほどこの方法でスライドショウを見ている
タイトル、サムネイルを半透明化すると写真がぐっとひきたってくる。
この方法で取り敢えずは満足している

半透明化の方法は透明化したい部分に透明画像を貼り付ける
この部分に
style='" + css_mask_black + "'
css_mask_black　は
var css_mask_black = "background-color:#000000 ; filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;"
と設定しておく
背景色を「黒」(#000000)、alpha=50% としている
この透明画像を「表示」(style.visibility = "visible")にすれば半透明化され、
「非表示」(style.visibility = "hidden")にすれば通常の表示となる

このことはいずれ「私の雑記帳」に掲載しよう

▲ 　▼

写真説明文の表示2008/06/25(水曜)

6/21に「完成」と書いたが・・・
いろいろのページで閲覧していると、右のサムネイルに写真の説明文が欲しくなった
しかし複数行の説明文では折角のスクロールが思わしくなくなる
何とか１行で表示できないか・・・と。

文字表示には 11pt と 11px という書き方がある。通常は <font style="font-size:11pt"> と使う
ここを　:11px でもちゃんと表示される
そこで下記のようにソースを書き換えた
----------------------------------------------------------------
　//-- 写真説明文
　var m_len = Math.floor(list_img_width/list_moji_size) - 1
　op +="<FONT style='font-size:" + list_moji_size + "px ; color:#00ff00'>"
　op += f_alt[i].substring(0 , m_len)
　if(f_alt[i].length > m_len){
　　op +="..."
　}
　op +="</FONT>"
----------------------------------------------------------------
つまりサムネイルの幅　これは120〜80まで変化する
この幅を文字サイズ(ここでは13px)で除すると幅の中に何文字表示できるかが計算される
仮に６文字とする。これより長い説明文は「...」で表示する

これでサムネイルの下側に１行で表示できた
「これで完璧・・・」、いえいえまだまだ改良点が出てくるでしょうね

▲ 　▼

スライドショウ Ver3　完成2008/06/21(土曜)

長い時間かかったが、スライドショウ Ver3 をすべての写真表示に適用した

▲ 　▼

スライドショウ Ver3　その４2008/06/19(木曜)

今日はだいぶ改良した

「ページ情報」が表示されている時、何の気なしにサムネイルをクリックしたくなる。
サムネイルをクリックしたらページ情報を非表示にしてスライドショウを開始できないか

Scroll On/Off のコメントをサムネイルの上に表示できないか・・・

と言うことで検討した
結論としては「リスト一覧」の考え方を取り入れて、それぞれを固定表示にすればよい

これは「ページ情報」の場合で setumei_pos_x 、setumei_pos_y を設定してしまえばいい
これを最初に実行する。そしてウィンドウサイズを変更した場合は setumei_pos_x をサイズに応じて変更すればよい
ということで予想どおりのページが出来上がった

　
　"<DIV id='SetumeiPage' style='position : absolute ; z-index : 2 ; left : " + setumei_pos_x + "px ; top : " + setumei_pos_y + "px ;'>"　　
　"</DIV>"

■　サンプルページ
http://ono.sakura.ne.jp/sonota/zatuki/photo_disp/slideshow_ver3/sample.html
「私の雑記帳」に掲載2008/06/19(木曜)

一応納得のゆくところまで完成したので、「私の雑記帳」に掲載した

http://ono.sakura.ne.jp/sonota/zatuki/photo_disp/slideshow_ver3/index.html

▲ 　▼

スライドショウ Ver3　その３2008/06/12(木曜)

右側のサムネイルについての改造
今までは 120x80ピクセルであった。ウインドウを縮小してもこのサイズで表示していた
これをウインドウサイズに応じて変更するようにした
ウインドウサイズの１０％を基準にして、最大は120x80、最小は 80x54ピクセルとした
あまり小さいと撮影日の文字がはみ出してしまうので、80x54は妥当なサイズだろう

実際に data.js に写真の説明文を記入する時にどうしてもファイル名が知りたくなる
そこでこれを支援するために「リスト一覧」を表示するようにした
一旦ページが完成してしまうと必要ないので普通は表示しない

▲ 　▼

スライドショウ Ver3　その２2008/06/10(火曜)

現在の方式では「蝶の写真集」の場合、 index#bottom で最終行が表示される
Ver3 の方式では今まで New から表示していた
この New は３ヶ月以内の写真が該当するようになっている

今日撮影してきた写真を追加して表示させてみると、３ヶ月以内だから６月１０日の所からは当然表示されない
Ｎｏ３、2008/06/07 09:31 が表示される

これでは不都合だ。そこで New には関係なく最新の撮影日から表示するようにした

サンプルではＮｏ８、2008/06/10 11:59 つまり６月１０日分から表示される
なお、撮影日が１日限り(同一日)の場合は先頭から表示される

http://ono.sakura.ne.jp/sonota/zatuki/photo_disp/slideshow_ver3/sample.html

だいぶ使いやすくなってきた

▲ 　▼

スライドショウ Ver32008/06/07(土曜)

「写真日記」の掲載写真一覧表示が完成して、しばらく使ってみたら大変都合がいい
それではこの方法を「蝶の写真集、花の写真集・・・」等のスライドショウに活用できないかと検討してみた
その表示サンプルは下記の通り

http://ono.sakura.ne.jp/sonota/zatuki/photo_disp/slideshow_ver3/sample.html

この方法の基本的な考え方は
１．データ形式(data.js)は今までのスタイルを使用する
２．サムネイルを右側に表示する
３．任意のサムネイルをクリックすると、拡大表示をする
４．サムネイルからマウスを離すと、スライドショウが開始される
５．スライドショウの進行とともにサムネイルは「スムース」にスクロールする
６．但し、マウスがリストの画面上にあるときはスクロールしない
　　これはサムネイルの選択を容易にするため
７．閲覧者はウインドウサイズを変更して、自由なサイズで写真を見ることが出来ます
８．ただし写真は縮小のみです

ということだ。
細かな操作方法でまだ不備な点があるが、とりあえずは何とか完成した
修正2008/06/08(日曜)

ＰＣ上で早速この方式で表示させてみた
ところがサンプルでは問題なかったが、「ギンイチモンジセセリ」「アサギマダラ(５月)」のページでは右側のリストが途中で止まるべきなのに、最後の所までスクロールされてしまう

単独で表示させると正常。「どうしてだろう・・・」と考えること半日。

夕方やっとその原因が判った
つまり現在の方法では、特に蝶のページでは追加していくので「蝶の写真集」やその他のリンクから呼び出すとき
index#bottom
と最終行を呼び出すようにしている。このようにすると最新の写真がスクロールすることなく見ることが出来るわけである

Ver3では <A name="top"> <A name="bottom"> を使っていた
このために途中から追加した「イチモンジ・・・」のページでは最終行までスクロールしてしまうことになる

<A name="list_top"> <A name="list_bottom">
と変更することによって、半日悩んだ問題が一瞬にして解決した
問題が解決したときは嬉しい（＾ｏ＾）

数日間ＰＣ上で動作させてみよう
ただ現在の方法では、写真表示の画面がすっきりする。
Ver3 では右側にサムネイルがあるので少しごたごたしている感じだが写真選択では大変都合がいい

さて、どちらがいいか・・・
左は現在の方式、右が Ver3 の新方式


▲ 　▼

data.js の作成2008/06/01(日曜)

「写真日記」掲載写真一覧　が完成して、しばらく考えていたら
「そうだ、この方法を活用すれば写真・スライドショウに使う data.js も簡単に作れるかも・・・」
と思い、早速取りかかった

今までよりも短時間で作成できることが判った
これらをまとめて「私の雑記帳」に掲載した

■　data.js 作成
http://ono.sakura.ne.jp/sonota/zatuki/php/make_data/index.html

■　掲載写真一覧の作成
http://ono.sakura.ne.jp/sonota/zatuki/php/make_joyfulyy/index.html

ＰＨＰは、はじめ「雲を掴むようだった」が何とか勉強できて大変よかった

▲ 　▼

「写真日記」掲載写真一覧　その７2008/05/23(金曜)

その６でキーワードによる設定、自動的にデータの更新等を取り入れて完成したが、「自動的にデータの更新」はどうも好ましくない
つまり複数の閲覧者が同時に更新をしたら、 data.js が壊れてしまうだろう
この件については管理者のみが更新できるように改良した

さてさて、その７での改良は右側のリストの表示に元画像を縮小して表示していた
これでは１００枚の画像を表示するのに時間がかかる
本来はサイズを縮小したサムネイルを使うべきである

ＰＨＰについて調べたら「サイズ縮小」が可能であると記されている
つまりサムネイルを作成できると言うことである
参考にしたページ
http://noongoro.main.jp/note/note0052.html


この技術を早速取り入れて改良した
http://ono.sakura.ne.jp/cgi/joyfulyy_diary/photo_list/index.html

リストの表示が当然のことだが早くなった
これらのＰＨＰのソースは後日「私の雑記帳」にまとめておこう

いずれにしても「掲載写真一覧表示」はこれで完成である
▲
[直接移動] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25]
投稿画像の表示サイズを変更できます
管理者用

- Joyful Note -
- JOYFULYY v2.50y24m45 ：Edit by Yamamoto -
< Edit by michi >