« [Cold CaseS6E6]コールドケース 迷宮事件簿の挿入歌【クラシックカー】 | トップページ | [QR]ACROBATのバーコード »

[BetterHTMLExport]書き出しテンプレート

BetterHTMLExportはUTF-8をサポートしていません。
iPhotoからのWEBページ書き出しならこちらの記事を先にどうぞ
[LINK]アイコン:新しいウィンドで開きます


 

BetterHTMLExport[LINK]OpenNewWindowを使って
iPhotoから書き出しします。

 

jquery.prettyPhoto[LINK]OpenNewWindowを使ったテンプレート作成して
lightbox風なHTML書き出しをします。

テンプレートはこちら「prettyPhoto.zip」[LINK]OpenNewWindow

ライセンスはjquery.prettyPhotoを利用していますので[Attribution 2.5]OpenNewWindowになります。


書き出しサンプルはこちら[LINK]OpenNewWindow

 

BetterHTMLExportのテンプレートは
UTF8がダメなようなので
SJISで書き出されたデータをJEDITX等でUTF8に変換して
日本語を通します。

jquery.prettyPhotoやJQUERYがUTF8なので
まぁ
UTF8にしないとダメですね。


 

◆BetterHTMLExportをインストール
◆テンプレートをインストール
◆iPhotoアルバムデータを用意
◆書き出し
◆書き出し後htmlファイルをUTF8に変換
◆出来上がり

の手順になります。

 

◆BetterHTMLExportをインストール
geeksrus[LINK]OpenNewWindowから
対象のバージョンのプラグインをダウンロードします。

798x390_betterhtmlexport_10

インストールはそのまま簡単です。

 
◆テンプレートをインストール

こちら「prettyPhoto.zip」をダウンロード[LINK]OpenNewWindowのテンプレートをダウンロードしてください。

解凍後
自分のホームディレクトリ→ライブラリに
『BetterHTMLExport』フォルダを作成

Screencapture00220823_32536jst

『templates』フォルダ内に
解凍したprettyPhotoフォルダを移動します。

 
◆iPhotoアルバムデータを用意

BetterHTMLExportは
『アルバム』または『選択写真』単位での書き出しですので
基本的には書き出し用『アルバム』を作成して
写真やコメントを準備します。


Screencapture00220823_33429jst

 

◆書き出し

408x324_betterhtmlexport_02

自分か設定した設定値を参考にしてください。

『Page』
564x645_betterhtmlexport_03

1PAGEに収まるようにします。
背景は白にして
テンプレートをprettyPhotoに設定します。

『Thumbnails』
564x645_betterhtmlexport_04

サムネイルのサイズが
出来上がりの
↓この幅になります
Screencapture00220823_33857jst


『images』
564x645_betterhtmlexport_05
↑ここで設定した幅は
↓表示サイズになります
Screencapture00220823_34040jst


『Option』
564x645_betterhtmlexport_06_2
ここはこんな感じで

『Custom』

Screencapture00220823_34222jst

広告差し込みようのエクストラタグを用意していますが
10.6+iPhoto09の組み合わせでは
ちゃんと動作しません

設定出来たら書き出します。

 

◆書き出し後htmlファイルをUTF8に変換

書き出されたhtmlファイルを
UTF8に変換して
上書き保存します。

805x176_betterhtmlexport_09

 

◆出来上がり

出来上がりサンプルはこちら[LINK]OpenNewWindow

この方法なら簡単に
ライトボックス風な
フォトアルバムが簡単にできますね。

参考にしてください。

テンプレートの中には
使われないイメージファイルも含まれていますが
prettyPhotoのオプション用の画像ですので
ご容赦くださいまし。


 
jquery.prettyPhotoのオプション設定等は
こちらに解説を書きました。
[prettyPhoto3]ステップbyステップ【prettyPhoto3の導入】: [FORCE][LINK]新しいウィンドで開きます
参考にしてください

|

« [Cold CaseS6E6]コールドケース 迷宮事件簿の挿入歌【クラシックカー】 | トップページ | [QR]ACROBATのバーコード »

BetterHTMLExport」カテゴリの記事

コメント

この記事へのコメントは終了しました。