PhotoBox/テンプレート/top_img

最終更新時間:2010年09月10日 23時48分15秒


PhotoBoxテンプレートtop_img
[Mac][デジカメ][写真日和]



PhotoBox用テンプレート


元々は ::写真日和::用に作ったテンプレートです。気に入ったら使って下さい。デザインは サンプルページ、もしくは以下のサイトで使っていただいているので、見て下さい。

 Link

サンプルページ



使っていただいているサイト


 ダウンロード

  • ダウンロード(v4) --- 07/07/07 全く確証はないけどテーマが適用されない対策をしてみた物。
  • ダウンロード(v3) --- 06/05/23 TrackBack URLを表示する様に変更。bottom.jpgを変更。
  • ダウンロード(v2) --- 06/04/19 WinXPでの不具合対策(style.cssのみ変更)
  • ダウンロード(v1)

使用方法

 インストール


○○.pbtemplate を 以下の順番で入れれば OK なはず。

  1. 万に一つもデータを壊しちゃうと怖いので ユーザーホーム ---> ライブラリ ---> Application Support ---> PhotoBox を必ず最初にコピーし バックアップ。
  2. ユーザーホーム ---> ライブラリ ---> Application Support ---> PhotoBox ---> Template は空にしちゃって下さい。テンプレートが使われず HTML が再構築される事が有ります。(07/07/18追記)
  3. ユーザーホーム ---> ライブラリ ---> Application Support ---> PhotoBox ---> pbtemplates 内へ ○○.pbtemplate を入れる。
  4. PhotoBox を起動し 環境設定... ---> テンプレート で ○○.pbtemplate を選択。
  5. Web に反映をクリック。
  6. じっと我慢の子。Macのスペックや 通信環境によっては 2〜3 時間掛かる事が有るかもしてません。

 メイン画像の最大


環境設定... ---> 一般 のメイン画像の最大の 横は、 480pxで運用して下さい。縦は、いくつでも構いませんが 480px 以上推奨。


 ライセンスについて...


本当は真面目に書かにゃいかんのでしょうけどねぇ。「好きに使って下さい」としか言えません。権利とかそんなんは 一切、何も主張しません。改造・改変・再配布すら自由です。好きにして構いません。



 テンプレートが適用されない時

  • Link先を参考に...。

index.html

  • すでに改造して使用されている場合は、テンプレート(top_img.pbtemplate)内の物(index.html)を ベースに 再度改造してください。

以下に標準からの変更部位を示します <!--変更1〜6

<?xml version="1.0" encoding="<$encoding$>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
<!-- start of headder -->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=<$encoding$>" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta http-equiv="Expires" content="Mon, 1 Jan 1990 01:01:01 GMT" />
	<link rel="stylesheet" title="default" type="text/css" href="<$top$>/style.css" media="screen,tv,projection" />
	<link rel="alternate" type="application/rss+xml" title="<$blogTitle$>" href="<$top$>/rss.rdf">                 <!--変更1)RSSの取得時に<$blogTitle$> -->
	<script type="text/javascript" src="<$top$>/friends.js"></script>
	<title><$blogTitle$></title>
</head>
<!-- end of headder -->

<!--  start of body -->
<body>

<div id="top">
<h1><a href="<$top$>"><$blogTitle$></a></h1>
<$indexonly$><p class="information">Last Updated: <$lastupdate$></p></$indexonly$>
</div>

<div id="fixed_width">
<div id="top_img"></div>                 <!--変更2)画像用に空div追加 -->
<!-- start past link -->
	<div id="pastlink_column">
	<$pastlink$>
<!-- ここから追加 liで追加 -->
		<ul class="my_link">                 <!--変更3)my_link追加 左列の写真の下へ文字列、バナー追加用 -->
		</ul>
<!-- ここまで追加 liで追加 -->
	</div>

<!-- end past link -->

<!-- start main -->
<div id="main_column">
<$main$>
</div>
<!-- end main -->

<!-- start friends link -->
	<div id="friendslink_column">
		<$friends$>
		
		<li><a href="<$photoboxScheme$>?name=<$nickname$>" title="PhoBoxのFriendsに加えてもらえますか?">PB LinkUp</a></li>                 <!--変更4) -->
		</ul>

		<ul class="out_link">                 <!--変更5)out_link追加 右列の写真の下へ文字列、バナー追加用 -->
		<li> <A href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss"  alt="Valid CSS!"></A></li>
		<li><a href="http://itools.jp/pb/"><img src="<$top$>/pbimg/banner.png" width="88" height="31"></a></li>
		</ul>
		

	</div>
<!-- end friends link -->
<div id="fixed_width2"></div>                 <!--変更6)fixed_width伸張用に空div追加 -->
</div>

<div id="bottom">
<p class="information">Powered by <a href="http://itools.jp/pb/">PhotoBox</a></p>
</div>

</body>
<!-- end of body -->
</html>

 ページ上部の画像を差替えたい時...

たんぽぽじゃいや! って言う人は以下の作業で 好きな画像を表示出来ます

top_img.pbtemplate を control+クリック -> パッケージの内容を表示 とし

top_img.pbtemplate/Contents/template/pbimg/top_img.jpg

の top_img.jpg を 差替えれば好きな画像を表示出来ます。

 bottom.jpg

別の画像も用意しました。style.css 366行目の height:49px; を height:65px; へ修正しpbimgの画像を入れ替え。
(06/04/24 15:20 画像差替えました。) 06/05/23 --- v3に採用しました。

 注意

  • Mac OS X の Firefox Safari Opera で、表示の確認はしました。
  • WinXPのIEだと一部(上部の画像の位置)表示がずれちゃいます。 06/04/19 v2で対策済み。


  • MacのIEでは、まるで表示されません。

とりあえず IEは気にしない事にしてますが、どうしても 気になりだしたら 直す事もある 鴨。

 感想とか...

有ったら以下へお願いします。

  • top_img.jpgだけはチマチマ作り終えました。あとは謎の言語と格闘するのみです。詳細までありがとうございます。 - Masato (2006年04月21日 01時11分51秒)
  • インストールに関する記述 一部追記しました。 - kitta (2006年04月22日 14時05分55秒)

コメントページを参照

お名前: コメント:

DOM

body
├top
│├h1
││├a (::写真日和::)
│├p information(Last Updated: hoge)
│
│
├fixed_width(全幅固定用div)
│├top_img <--- 追加(空div)
││
││
│├pastlink_column
││├h2(Recent Photos)
│││pastlink_item(X6)
│││├p photo
││││├a
││││ ├img
││││
│││├p information
│││
││├ul anchor(Latest Album・RSS)
││├my_link <--- 追加
││
││
│├main_column
││├prev
││├next
││├h2(日時 タイトル)
││├mainPhoto
││├text
││├text_footer(コメント・トラックバック欄)
││ │
││ ├tt(1コメント毎 複数の場合あり)
││ ├form
││ │├form_group
││ │ ├div
││ │ │├input(名前入力欄)
││ │ │
││ │ ├div
││ │ │├textarea(コメント本文入力欄)
││ │ │
││ │ ├add_field_disp(TB)
││ │ ├add_field_hide
││ │ │├input
││ │ │
││ │ ├input(Commentボタン)
││ │
││ ├comment_rss
││ ├trackback
││ ├pb_counter
││
││
│├friendslink_column
││├h2
││├friends_item_(0〜4)
│││├friends_item
│││├p photo
││││├a
││││ ├img
││││
│││├p information
│││
││├ul anchor(Latest Album・RSS)
││├out_link <--- 追加
││
││
│├fixed_width2 <---追加(空div fixed_widthを伸張)
│
├bottom
   ├p information


ヘルプ 検索 ソース Farm 一覧 差分 トップ ログイン