画像の部分重ね合わせアプリをHPにUpしました
複数(最大4枚)の写真を互いが少し重なるようにして合成するアプリです。
重なる部分は一方の画像から徐々に隣りの画像に変化します。
また周辺を徐々にぼかし、4隅には丸みを付けることもできます。
画像の部分重ね合わせアプリは -> こちら
(例) オリジナル写真(4枚) と 重ね合わせ写真
複数(最大4枚)の写真を互いが少し重なるようにして合成するアプリです。
重なる部分は一方の画像から徐々に隣りの画像に変化します。
また周辺を徐々にぼかし、4隅には丸みを付けることもできます。
画像の部分重ね合わせアプリは -> こちら
(例) オリジナル写真(4枚) と 重ね合わせ写真
エディオングループのISPであるエディオンネットの「エンジョイ!ブログ」を使用していますが、Blog記事内の縦長画像をクリックして拡大画像を表示したときに画像の下部が一部切れてしまうことがあります。
この問題を解決するには 「エンジョイ!ブログ」で自動生成される拡大画面表示用のHTML内のJavascript で、画面上部のタイトルバー、アドレスバー や下部のタスクバーの高さ等を考慮してwindowのサイズを決定するように改良して頂くのが最善ですが、ここでは Blog記事をHTML編集モードにして一部変更する方法を紹介します。
Blog記事をHTML編集モードで表示すると、次のようになります(画像の部分)。
<a onclick="window.open(this.href, '_blank', 'width=600,height=800,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"
href="http://k-ichikawa.blog.enjoy.jp/.shared/image.html?/photos/uncategorized/2013/05/30/119_2.jpg"><img width="200" height="266" title="119_2" alt="119_2"
src="http://k-ichikawa.blog.enjoy.jp/blog/images/2013/05/30/119_2.jpg" border="0" /></a>
ここで、scrollbars=no を scrollbars=yes に変更して保存すると、拡大表示画面でスクロールバーが表示され、これをドラッグすると切れた(隠れた)部分を表示できます。
従来の画像 (scrollbars=no)

編集した画像 (scrollbars=yes)

(参考) window.open() の主なパラメータの意味は下記のとおり。
this.href : href 属性で指定されたURLを表示
_blank : 新規ウィンドウ
width : ウィンドウの幅
height : ウィンドウの高さ
scrollbars : スクロールバーの有無
resizable : ウィンドウサイズのリサイズ可否
toolbar : ツールバーの有無
location : アドレスバーの有無
menubar : メニューバーの有無
status : ステイタスバーの有無
エディオングループのISPであるエディオンネットの「エンジョイ!ブログ」を使用していますが、Blog記事内の縦長画像をクリックして拡大画像を表示したときに画像の下部が一部切れてしまうことがあります。

「エンジョイ!ブログ」で自動生成される拡大画面表示用のHTML内のJavascript に問題があるように思います。
<script type="text/javascript">
YAHOO.util.Event.onDOMReady( function() {
var vw = YAHOO.util.Dom.getViewportWidth(),
vh = YAHOO.util.Dom.getViewportHeight();
var img = new Image();
img.src = "/./photos/uncategorized/2013/05/30/119_3.jpg";
if ((img.width > 0 ) && (img.height > 0)) {
window.resizeBy( img.width - vw, img.height - vh );
}
} );
</script>
画面上部のタイトルバー や アドレスバー、下部のタスクバーの高さ等が考慮されていないように思われます。 これらを加味してwindowのサイズを決定するようにすれば、画像サイズや画面サイズ(解像度)に関係なく画像全体が表示できるようになるはずです。
エディオングループのISPであるエディオンネットの「エンジョイ!ブログ」を使用していますが、Blog記事内の画像をクリックして拡大画像を表示したときに全体が表示されないことがあります。
横長の画像は問題ないのですが、縦長の画像を拡大表示したときに画像の下部が一部切れてしまうのです。
エディオンネットの事務局さんに色々とお聞きしたところ、14型程度のPC画面で大きな画像を表示しようとすると発生するとのこと (因みに当方は 15.4型ワイド)。 画像を縮小してUPするか、大型画面のPCを使えば縦長でも問題なく表示できるとのことでした。
先日記した特定のフォトアルバムのパスワード保護の方法には若干不具合があることが判明したため、再度エンジョイネット事務局さんに教えてもらいました。 今度は完璧でした。
1.事前にサイドバーに表示するサムネイル画像を用意する。
2.[コントロールパネル]を開き、[ファイル]をクリック。
3.「ファイルをアップロード」の[参照]をクリックし、1で用意したサムネイル画像を選択。
4.[アップロード]をクリック。
5.アップロードしたファイル名をクリックし、URLを控える。
6.[タイプリスト]をクリック。
7.リストから該当の設定をクリック。
8.[ラベルなし]をクリック。
9.下記の「表示したいサムネイル画像のURL」を5で控えたURLに変更。
<img
src="表示したいサムネイル画像のURL" alt="フォトアルバム">
10.[保存]をクリック。
11. [公開]
をクリックし、公開するブログにチェックを入れて[変更を保存]をクリック。
本ブログの「フォトアルバム 2」がパスワード保護されたアルバムです。
特定のフォトアルバムのパスワード保護の方法について、エンジョイネット事務局さんに教えてもらいました。
(注)下記方法には若干問題があることが判明、他の方法を別途取りまとめ予定。
単純に設定しようとすると保護対象アルバムの名称がブログ画面に表示されなくなり、困ってしまいましたが、教えて頂いた下記の方法を試したところ、うまくいきました。
0.事前に該当のフォトアルバムのURLとサイドバーに表示されているサムネイル画像のURLを控える。
1.
管理画面の[タイプリスト]をクリックし、[新しいタイプリストを作る] をクリック。
2.[タイプリストの種類]を[メモ]
にする。
3.[タイプリストの名前:] に 今回サイドバーに表示するフォトアルバム名を入れ [リストの作成]
をクリック。
4.ラベルは空欄にし、以下のタグをコピーして [備考] 欄に貼り付ける。
<a
href="フォトアルバムのURL" title="フォトアルバム">
<img src="表示したいサムネイル画像のURL"
alt="フォトアルバム"></a>
事前に控えたフォトアルバムのURLとサムネイル画像のURLに修正し、[保存]
をクリック。
5.作成したタイプリストをブログに表示するため [公開] をクリックし、公開するブログにチェックを入れて
[変更を保存] をクリック。
本ブログの「フォトアルバム 2」がパスワード保護されたアルバムです。
これにより、特定の仲間(家族など)に限定したアルバムの公開が可能となります。
ただし、教えて頂いた方法は 必ずしも簡単とは言えず、また エンジョイ!ブログの「ヘルプ・使い方」にも説明がないように思います。 今後、エンジョイ!ブログの機能アップ または 「ヘルプ・使い方」の充実を期待したいところです。
フォトアルバムの表示順序の変更方法について、エンジョイネット事務局さんに教えてもらいました。
[並べ方を変更]を選択し、表示項目をドラッグ・アンド・ドロップを してお好みの場所に移動し、変更を保存します。
早速試したところ、うまく行きました。
ただし、「フォトアルバム(一括表示)」のときは表示順の変更はできない とのことでした。