4つの方法を試行錯誤
【CSSとGoogle Chromeﾃﾞﾍﾞﾛｯﾊﾟﾂｰﾙ（検証ﾓｰﾄﾞ）】
QRZ.com JA2PTQ pageの作成にあたって、飛騨市観光ｻｲﾄのimage利用承認を得ました。
取りあえず利用したのはtop画面のimageだけですが、実に446点の写真が「観光写真ﾀﾞｳﾝﾛｰﾄﾞ（ｳｪﾌﾞｱﾙﾊﾞﾑ）」にuploadされています。
QRZ.com pageは1ﾍﾟｰｼﾞしか使えないので、だらだらと写真を貼っていく訳にはいきません。
何か良い方法がないか考えましたが、ﾎｰﾑﾍﾟｰｼﾞのﾄｯﾌﾟでよく使われているｽﾗｲﾄﾞｼｮｰ的な手法を試してみることにしました。
以前やったことがあるのは「Flash」ですが、個人のｱﾌﾟﾘｹｰｼｮﾝを持っていないので無理。
画像を動かすだけなら「ｱﾆﾒｰｼｮﾝGIF」が簡単ですが、任意に写真を選択できるようにしたいのでボツ。
ｲﾒｰｼﾞ的には"ｻﾑﾈｲﾙを並べておいて一つを選択すると拡大写真を表示"という感じです。
その条件でﾈｯﾄ検索するとたくさん出てくるので、自分にも理解できそうなものを選びます。
見本となるsourceをｺﾋﾟｰしPCのlocal環境で動かしてみるとちゃんと動作します。
気を良くしてQRZ.comにﾛｸﾞｲﾝし、利用したい写真をupload。
続いてEditをSourceﾓｰﾄﾞにし、PC内で試行したsourceを貼り付けsave。
するとｴﾗｰﾒｯｾｰｼﾞ。（またしても一時停止）
試したのが「Script」を使ったものだったので、そもそもQRZ.comではscript禁止のようでｶﾞｯｸﾘ。
これが試行錯誤の始まり・・・。
気を取り直してﾈｯﾄ検索すると、「css」の記述で同じような表示をさせるものをいくつか発見。
世の中には賢い方がみえるもので、年老いた田舎のﾗｼﾞｵ少年はありがたく真似させていただきます。
2つ目はcssをいじるのですが、下手をするとQRZ.com JA2PTQ pageのﾚｲｱｳﾄ自体が崩れる恐れが大。
"Custom CSS styles"で見本のcssを貼り付けsave。
そしてEditにsourceを貼り付けsave。
ｴﾗｰﾒｯｾｰｼﾞは出ないので期待してJA2PTQ pageを見ると、恐れていたﾚｲｱｳﾄ崩れはあるしｽﾗｲﾄﾞｼｮｰはどこにもありません。
Editはﾘｯﾁﾃｷｽﾄｴﾃﾞｨﾀなのでsaveするときに許されていないsourceが書き換えられてしまいます。
ということでこれも断念・・・。
3つ目はｽﾗｲﾄﾞｼｮｰでなく、ｻﾑﾈｲﾙを並べておきｸﾘｯｸすると拡大写真を表示させるというものです。
見せ方としては良い感じだし、PCのlocal環境でもFBに動作します。
今度こそとCSSとsourceを貼り付けsaveし、pageを見ますがﾚｲｱｳﾄは崩れｻﾑﾈｲﾙｸﾘｯｸも動作しません。
2つ目と同様sourceが書き換えられています。
どうやら両方に使われている「radio」を利用した手法はだめなようです。
かなり疲れたので日を改めてﾄﾗｲ。
4つ目は、"ｼﾝﾌﾟﾙなCSSだけで、ｻﾑﾈｲﾙのﾏｳｽｵｰﾊﾞｰで指定場所に画像を拡大表示する方法"というかなり優れものです。
PCのlocal環境で動作確認。
続いてCSSとsourceをsaveしpageを見ると、ﾚｲｱｳﾄは崩れているもののｵﾝﾏｳｽ動作はします。
かなり期待できそうですがCSS修正が自分でできるだろうか。
CSSの修正はかなり難問ですが、"Google Chromeﾃﾞﾍﾞﾛｯﾊﾟﾂｰﾙ（検証ﾓｰﾄﾞ）"という強い味方があります。
page上の各要素を選択することで、ｶｰｿﾙを合わさった箇所は色が変わり、一つ一つの要素がどのようなｿｰｽｺｰﾄﾞで構成されているのかが分かります。
ｽﾏｰﾄﾌｫﾝの形をしているｱｲｺﾝをｸﾘｯｸすると表示が切り替わり、ﾀﾌﾞﾚｯﾄのｴﾐｭﾚｰｼｮﾝ表示が行えますので、ﾃﾞﾊﾞｲｽﾁｪｯｸを擬似的に行うことができます。
Elementsﾊﾟﾈﾙは、ﾍﾟｰｼﾞのｿｰｽｺｰﾄﾞを表示することができ、各要素を詳細に調べたい場合は、表示されている箇所をｸﾘｯｸすると構成するｿｰｽｺｰﾄﾞと「Styles」に対応するCSSが表示されます。
Stylesに記載されているCSSにｺｰﾄﾞを書き加えると擬似的に表示が変更されます。
このﾂｰﾙ機能で一時的に変更しながら、どうにかﾚｲｱｳﾄ崩れを修正することができました。
【DEMO ｻﾑﾈｲﾙ画像をﾏｳｽｵｰﾊﾞｰで拡大表示＆絶対中央配置】
【CSSとGoogle Chromeﾃﾞﾍﾞﾛｯﾊﾟﾂｰﾙ（検証ﾓｰﾄﾞ）】
QRZ.com JA2PTQ pageの作成にあたって、飛騨市観光ｻｲﾄのimage利用承認を得ました。
取りあえず利用したのはtop画面のimageだけですが、実に446点の写真が「観光写真ﾀﾞｳﾝﾛｰﾄﾞ（ｳｪﾌﾞｱﾙﾊﾞﾑ）」にuploadされています。
QRZ.com pageは1ﾍﾟｰｼﾞしか使えないので、だらだらと写真を貼っていく訳にはいきません。
何か良い方法がないか考えましたが、ﾎｰﾑﾍﾟｰｼﾞのﾄｯﾌﾟでよく使われているｽﾗｲﾄﾞｼｮｰ的な手法を試してみることにしました。
以前やったことがあるのは「Flash」ですが、個人のｱﾌﾟﾘｹｰｼｮﾝを持っていないので無理。
画像を動かすだけなら「ｱﾆﾒｰｼｮﾝGIF」が簡単ですが、任意に写真を選択できるようにしたいのでボツ。
ｲﾒｰｼﾞ的には"ｻﾑﾈｲﾙを並べておいて一つを選択すると拡大写真を表示"という感じです。
その条件でﾈｯﾄ検索するとたくさん出てくるので、自分にも理解できそうなものを選びます。
見本となるsourceをｺﾋﾟｰしPCのlocal環境で動かしてみるとちゃんと動作します。
気を良くしてQRZ.comにﾛｸﾞｲﾝし、利用したい写真をupload。
続いてEditをSourceﾓｰﾄﾞにし、PC内で試行したsourceを貼り付けsave。
するとｴﾗｰﾒｯｾｰｼﾞ。（またしても一時停止）
試したのが「Script」を使ったものだったので、そもそもQRZ.comではscript禁止のようでｶﾞｯｸﾘ。
これが試行錯誤の始まり・・・。
気を取り直してﾈｯﾄ検索すると、「css」の記述で同じような表示をさせるものをいくつか発見。
世の中には賢い方がみえるもので、年老いた田舎のﾗｼﾞｵ少年はありがたく真似させていただきます。
2つ目はcssをいじるのですが、下手をするとQRZ.com JA2PTQ pageのﾚｲｱｳﾄ自体が崩れる恐れが大。
"Custom CSS styles"で見本のcssを貼り付けsave。
そしてEditにsourceを貼り付けsave。
ｴﾗｰﾒｯｾｰｼﾞは出ないので期待してJA2PTQ pageを見ると、恐れていたﾚｲｱｳﾄ崩れはあるしｽﾗｲﾄﾞｼｮｰはどこにもありません。
Editはﾘｯﾁﾃｷｽﾄｴﾃﾞｨﾀなのでsaveするときに許されていないsourceが書き換えられてしまいます。
ということでこれも断念・・・。
3つ目はｽﾗｲﾄﾞｼｮｰでなく、ｻﾑﾈｲﾙを並べておきｸﾘｯｸすると拡大写真を表示させるというものです。
見せ方としては良い感じだし、PCのlocal環境でもFBに動作します。
今度こそとCSSとsourceを貼り付けsaveし、pageを見ますがﾚｲｱｳﾄは崩れｻﾑﾈｲﾙｸﾘｯｸも動作しません。
2つ目と同様sourceが書き換えられています。
どうやら両方に使われている「radio」を利用した手法はだめなようです。
かなり疲れたので日を改めてﾄﾗｲ。
4つ目は、"ｼﾝﾌﾟﾙなCSSだけで、ｻﾑﾈｲﾙのﾏｳｽｵｰﾊﾞｰで指定場所に画像を拡大表示する方法"というかなり優れものです。
PCのlocal環境で動作確認。
続いてCSSとsourceをsaveしpageを見ると、ﾚｲｱｳﾄは崩れているもののｵﾝﾏｳｽ動作はします。
かなり期待できそうですがCSS修正が自分でできるだろうか。
CSSの修正はかなり難問ですが、"Google Chromeﾃﾞﾍﾞﾛｯﾊﾟﾂｰﾙ（検証ﾓｰﾄﾞ）"という強い味方があります。
page上の各要素を選択することで、ｶｰｿﾙを合わさった箇所は色が変わり、一つ一つの要素がどのようなｿｰｽｺｰﾄﾞで構成されているのかが分かります。
ｽﾏｰﾄﾌｫﾝの形をしているｱｲｺﾝをｸﾘｯｸすると表示が切り替わり、ﾀﾌﾞﾚｯﾄのｴﾐｭﾚｰｼｮﾝ表示が行えますので、ﾃﾞﾊﾞｲｽﾁｪｯｸを擬似的に行うことができます。
Elementsﾊﾟﾈﾙは、ﾍﾟｰｼﾞのｿｰｽｺｰﾄﾞを表示することができ、各要素を詳細に調べたい場合は、表示されている箇所をｸﾘｯｸすると構成するｿｰｽｺｰﾄﾞと「Styles」に対応するCSSが表示されます。
Stylesに記載されているCSSにｺｰﾄﾞを書き加えると擬似的に表示が変更されます。
このﾂｰﾙ機能で一時的に変更しながら、どうにかﾚｲｱｳﾄ崩れを修正することができました。
【DEMO ｻﾑﾈｲﾙ画像をﾏｳｽｵｰﾊﾞｰで拡大表示＆絶対中央配置】
These are part of Hida-city's photo library.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Please place the mouse cursor over the thumbnail.
最後の仕上げは拡大表示の配置です。
別ﾀﾌﾞや別ｳｲﾝﾄﾞｳでは、いちいち閉じる操作をしなければならずとっても不便でｵﾝﾏｳｽで表示させる意味がありません。
またまたﾈｯﾄ検索。
"画像を画面の中央に配置したいし、どんなｻｲｽﾞの画像が来ても真ん中にしたいし、どんなｻｲｽﾞの画面で見ても画像をはみ出させずに表示させたい。"という優れものの「絶対中央配置」を見つけました。
早速、CSSに追加記述。
ちなみに画像表示の背景写真は、"高田神社の火縄銃"を採用しました。
今回も悪戦苦闘の末、QRZ.com JA2PTQ page ver2が完成しました。（あ～うれしや！！）
別ﾀﾌﾞや別ｳｲﾝﾄﾞｳでは、いちいち閉じる操作をしなければならずとっても不便でｵﾝﾏｳｽで表示させる意味がありません。
またまたﾈｯﾄ検索。
"画像を画面の中央に配置したいし、どんなｻｲｽﾞの画像が来ても真ん中にしたいし、どんなｻｲｽﾞの画面で見ても画像をはみ出させずに表示させたい。"という優れものの「絶対中央配置」を見つけました。
早速、CSSに追加記述。
ちなみに画像表示の背景写真は、"高田神社の火縄銃"を採用しました。
今回も悪戦苦闘の末、QRZ.com JA2PTQ page ver2が完成しました。（あ～うれしや！！）
コメントする