Web Amusement Hyper Activity Land

しらなみフォント / Gts.shiranami / ひらがな入力バージョン

カナやかなのみのフォントは、英数字で入力するものが多いのですが、それでは実際問題使いにくいので、ひらがな入力で選択できるようにしています

※ こちらは PDF サンプルです



フォント名は、日本語名、英語名ともに Gts.shiranami です。




フリーフォントではんこ画像作成でも使えるようにしました
( 他のカナ系はんこも使えるようにしました )




▼ こちらは typeface.js で部分埋め込み用のコードジェネレータです



 
せをはやみ
いわにせかるる
たきがはの。 
※ こちらから

<style type="text/css"> 
.typeface-js-shiranami_1342965013247 { 
	font-family: shiranami_1342965013247;
	font-size: 40px; 
	color: #000000; 
	line-height: 100px; 
} 
</style> 
<span class="typeface-js typeface-js-shiranami_1342965013247" style="font-family:shiranami_1342965013247;">せをはやみ<br />いわにせかるる<br />たきがはの。</span>

ライセンス

非営利目的の使用・転載は自由
配布には事前連絡が必要

【更新履歴 / フリーフォントで簡単ロゴ作成の最新記事】

posted by at 2012-07-22 22:03 | 更新履歴 / フリーフォントで簡単ロゴ作成 |

DAZ3D : DAZ Studio 4 Pro は『今もタダ』です

2012年03月09日 19時32分44秒
無料の期間限定で3D人物CG作成ソフト「DAZ Studio 4 Pro」が入手可能

4ヵ月経ちましたが、DAZ3D はパーツで利益上げてるはずですし、情報は殆ど日本語ベースで存在しない上に結構クセがあったりするので、本体タダは当然とは思います。まだ、やってないのですが、アニメーションもできるので時間かけてでも使えるようになっておくと、将来きっといい事があるかもしれません。







GIGAZINE の記事ではインストール方法の説明が掲載されていますが、この記事は結構貴重ですよ。


この子は『Hitomi』と言って、最新フィギュアの Genesis 用キャラクタなんですが、結構気合いの入った展開をしています。いままで、アニメ系のキャラクタは Aiko と言って、中途半端な部分があったのですが、Genesis に変化するに至って根本的にデザインし直された感じです。これは、日本人から見てもかなり納得のいく出来だと思うのです。ただ、DAZ3D 自身、まだ Genesis 対応のパーツがそれほど豊富でも無いようなので、気長に付き合うつもりです。

posted by at 2012-07-13 01:49 | DAZ Studio |

背景を透過させた画像に、CSS の transition を使って、カーソルを乗せると暗～くなる効果

各ブラウザ対応。( IE9 でも動く )

<style type="text/css">
.box_transition {
  -webkit-transition: all 1.3s ease-out;
     -moz-transition: all 1.3s ease-out;
       -o-transition: all 1.3s ease-out;
          transition: all 1.3s ease-out;
   filter:progid:DXImageTransform.Microsoft.Fade(duration=0);
}
.set_image {
	width: 526px;
	height: 640px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>

<script type="text/javascript">
</script>
<div id="target" class="box_transition set_image"
onmouseover='try{this.filters[0].Apply();this.style.backgroundColor="#000";this.filters[0].Play();}catch(e){}'
onmouseout='try{this.filters[0].Apply();this.style.backgroundColor="#fff";this.filters[0].Play();}catch(e){}'
></div>

<script type="text/javascript">
(function() {
if(window.navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
	str="";
	str+="<style type=\"text/css\"> \n";
	str+=".set_image:hover {   \n";
	str+="	background-color: #000; \n";
	str+="} \n";
	str+="</style> \n";
	document.write(str);
}
else {
	target.filters[0].Apply();
	target.style.backgroundColor="#fff";
	target.filters[0].Play();
	target.filters[0].duration = 2;
}
})();

</script>

DAZ Studio 4 Pro は、ずっとタダのような気がしてきた・・・





インストール方法は ▼ これで OK ですが、使うとなるとヒマな時間がたくさん必要です。

無料の期間限定で3D人物CG作成ソフト「DAZ Studio 4 Pro」が入手可能 - GIGAZINE


ところで。

CSS の transition ですが・・・IE が無ければ ▼ これだけで動きます

<style type="text/css">
.box_transition {
  -webkit-transition: all 1.3s ease-out;
     -moz-transition: all 1.3s ease-out;
       -o-transition: all 1.3s ease-out;
          transition: all 1.3s ease-out;
}
.set_image {
	width: 526px;
	height: 640px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>

<div id="target" class="box_transition set_image"
onmouseover='this.style.backgroundColor="#000";'
onmouseout='this.style.backgroundColor="#fff";'></div>

こういう世の中はまだずっううううっと続くのです

posted by at 2012-07-13 00:30 | ウェブ |

DAZ3D の Hitomi に初音ミクのツインテールでコスプレさせたくて、いろいろやった事の記録



まず、MikuMikuDance のデータからどうにかできないかと思って調べてみると、『MikuMikuDance（DirectX9 Ver）』の中『初音ミク.pmd』というモデルデータがあった。



そのままだと初音ミク全体なので、これをどうにか髪の毛だけにできないかと調べてみると、『PMDエディタ』というのがあって、『PMDエディタ 0.1.0.0b（2011/3/8）』をダウンロードして動かそうとしてみた、が、Directx9 がインストールされていないせいで起動できない。Windows7 なので、最新バージョンが入っているのに、Directx9 をインストールしても大丈夫が調べてみると、たぶん問題無いという事が解った。

Windows7にDirectX9.0cをインストールする方法について

まさに、思い通りの質問を Microsoft の内部の方が返答していてくれました。よって、DirectX9 のインストール。

そして無事起動して、readme より削除方法を知る、

------------------------------------------------------------
●パーツの削除
材質単位で関連する、頂点／面／材質／表情／表情枠を削除します。

1. [編集] - [面関連] - [パーツ削除]
2. 削除対象のパーツ(材質)をチェックして実行

適用後、関連頂点が全てなくなった表情／表情枠も対象になります。

※モデル表示の頂点表示／材質編集からも任意のパーツを削除可能です。
------------------------------------------------------------



少しだけ残る部分があるので、『円形範囲』で選択して頂点削除で少しづつ消します。ボーンはどうせなくなるので無視します。



その後、名前を付けて保存するのですが、Blender の 2.63 でロードするので、miku.pmd に名前変更しておきます。Import/export スクリプトは、mqo 用も含めてインストールしておきます。

Blender で pmd を読み込んだら mqo にエクスポートして、メタセコイアのシェアウェア版を使って適当に『曲げる』を使って、テールを後ろのほうに動かします( そのままでは本体と重なりやすいので )。





出来上がったら、保存して再び Blender で読み込んで、今度は obj でエクスポートします( この形式が一番うまく行くようなので )

で、DAZ Studio 4 でインポートするですが、相当スケールが大きいので Scene で選択してスケールを下げて下さい。後は、head の下に移動して微調整です。

posted by at 2012-07-01 20:51 | DAZ Studio |

カスタムパレットツールの手動インストール

1) 以下のファイルをダウンロードして解凍して下さい
http://winofsql.jp/download/tegaki_color.zip

中に、カスタムパレットツールの画面および処理コードが書かれた
『tegaki_color.htm』が入っています。その後、このファイルの
フルパスを用意しておいて下さい。

(例)
C:\Documents and Settings\lightbox\My Documents\tegaki_color.htm

▼ 実行時の表示はこうなる予定です


2) レジストリエディタを起動します

以下の位置へ移動して下さい。
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt

同梱 install.reg ファイルをエクスプローラからダブルクリックして
インポートします。すると、MenuExt の下に以下のエントリが登録さ
れます。

－★手書きブログ用カスタムカラー保存・復帰

既にある場合でも問題ありませんが、新しく作成された場合は、色デ
ータが無いので、同梱の color.reg をインポートします。既に色デー
タがある場合は必要ありません

3) レジストリエディタで、html の場所を登録

－★手書きブログ用カスタムカラー保存・復帰を選択して、右側の
先頭部分の(規定)と表示されている部分をダブルクリックします。

すると、ダイアログが表示されるので、ご自分の tegaki_color.htm
のフルパスを登録して下さい




処理が終わったら、IE を全ていったん終了してから動作確認して下さい

posted by at 2012-03-03 17:48 | 手書きブログ |

DAZ3D : Night Hawk Vampire #6

posted by at 2012-01-21 02:26 | DAZ3D DAZStudio イラスト : Night Hawk Vampire |

DAZ3D : Night Hawk Vampire #5

posted by at 2012-01-21 02:23 | DAZ3D DAZStudio イラスト : Night Hawk Vampire |

カスタムパレットツール(お誕生日バージョン)で非公式機能を使いやすくしました

12/2 17:30 にエディタ(MzEditor)が追加されたのでこちらも追加しました
Twitter / @pipajp: レイヤーを使えるエディターをリリースしました。賛否両 ...

http://winofsql.jp/wsf/tegaki_color_111120.wsf

※ 非公式機能については、NAVER を参照して下さい



今日確認したら、2009/05/23 以前に書いた絵は、現在の公式エディタでは更新
できません。そのまま更新したい場合は、リニューアル前のエディタでないと
エラーが出ます。

現在のエディタで更新できるようにするには、QD=番号 で引用する必要があるの
で、いろいろ面倒が重なったのでカスタムパレットツールで簡単に実行できるよ
うにしました。

公式の機能では無いのでいつ使え無くなるか解りませんが、少なくとも自分にと
っては、「バグ」の対応機能です。

この非公式機能では自分の絵ならば、どれでも何度でも引用できます
( 絵を表示して、「この絵で新規」ボタン )

posted by at 2011-12-02 02:01 | カスタムパレットツール |

カスタムパレットツール(お誕生日バージョン)をハイパーエディタに対応しました

http://winofsql.jp/wsf/tegaki_color_111120.wsf

まだまだ、変更が予定されていそうなので「お誕生日バージョン」でお試しです。
( IE のみです )

まず、いままでの転送だと、一番上の二列に転送します。

ただ、今回新しいボタンを追加して、全ての色( 16 x 16 )を転送できるようにし
ました。この転送は一時的なもので保存はしません。



※ 手ブロで保存が必要な場合は、どれでもいいので右横の小さなボタンをクリックして決定です



ちなみに、既に保存済みの絵をハイパーで編集しなおすには、URL を
VEditBlogS4.jsp から VEditBlogS4_Hyper.jsp に変更します

自分の任意の絵を、引用したい場合は URL の最後に &QD=記事番号 を追加します。
あるいは、VEditBlogS4_Hyper.jsp?TD=0&QD=0&MD=0 となっている場合は、QD=0 の
0 の部分を記事番号に変更します

※ 但し、この二つの URL 指定は、pipa の仕様変更で動かなくなる可能性はあります

posted by at 2011-11-20 19:03 | カスタムパレットツール |

IE用カスタムパレットツール「お誕生日バージョン」

※ 2011/10/29 新しい編集ページに対応しました

http://winofsql.jp/wsf/tegaki_color_111120.wsf



とりあえずお試しです。
特に問題出無かったら、今回追加した場所はキャンバスの下なので、
こにいろいろ機能ボタンを追加できるという事なので。

調子がおかしかったら、右サイドから通常バージョンをダウンロード
して実行すると元に戻ります

この「お誕生日バージョン」では、キャンバスの下に透過度が 1から17 までが並びます。

実際自分が絵を描いていて、もっとも重要になる透過度の範囲なんです。
良かったら試してみて下さい。


ちなみに、通常エディタで保存されているのをハイパーで編集するには、
URL の VEditBlogS4.jsp を VEditBlogS4_Hyper.jsp に変更します。

これは、変更されるかもしれませんが、今は使えます。

あと、自分の任意絵を引用して書き始め体場合は、QD=記事番号に変更するといいです
( URLの最後に、&QD=記事番号 を追加します

これも、変更されるかもしれませんが、今は使えます。

posted by at 2011-10-29 23:37 | カスタムパレットツール |

DAZ3D : Night Hawk Vampire #4

posted by at 2011-10-10 02:21 | DAZ3D DAZStudio イラスト : Night Hawk Vampire |

手ブロ新デザイン : 簡単な個別コンテンツの追加

まず、絵が表示される詳細ページの「個別番号」を取得します。



この番号を使って、以下の内容になるようにして、詳細のテンプレートの
<div class="BlogDetail"> と書かれている真上に書きます

#if($tegaki.tegakiId == "20478550")
<div class="BlogDetail" style='margin-top:8px;'>
ここに好きな HTML を書く( 画像やリンク )
</div>
#end





これはいくつ作っても問題ありません。ですが、あまり多くなると見にくくなる
ので、適当に期間限定にすればいいと思います。

存在しない番号を指定すれば何も表示されなくなるので、一つだけ作っておいて
番号だけを変えて行くという運用が最も簡単です。

posted by at 2011-09-24 10:23 | 手書きブログ |

手ブロ新デザイン : あとからカテゴリタブを追加する方法

新しいテーマが追加されて、カテゴリタブが使えるようになったのですが、
元々のデフォルト新デザインにはそのようなものはありません。

そこで、以下のタグを <div class="ContentsList"> の下に入れます

<!-- ブログカテゴリ -->
<div id="CategoryTab">
	$categoryList
</div>
<!-- ブログカテゴリ -->

次に CSS の最後でいいですが、以下の CSS 記述を追加します

		#CategoryTab {
			float: left;
			width: 100%;
			height: 40px;
			border: 0px solid #000;
		}
		#CategoryTab .Category {
			float: left;
			text-align: center;
			margin: 0 6px 0 0;
			overflow: hidden;
			white-space: nowrap;
		}
		#CategoryTab .Category a {
			display: block;
			width: 100px;
			height: 32px;
			text-decoration: none;
			font-size: 11px;
			color: #fff;
			padding: 8px 0 0 0;
			background-image:url('$user.image010');
		}
		#CategoryTab .Category a:hover {
			text-decoration: underline;
			color: #567;
			font-weight: bold;
			background-image:url('$user.image006');
		}
		#CategoryTab .Category #Category$categoryId {
			background-image:url('$user.image006');
			font-weight: bold;
			color: #47301C;
		}

あとは、6番の画像を明るく塗って 10 番の画像を暗く塗ってできあがりです。

$user.image006 と $user.image010 を使っていて、中身を変えれない場合は
他の空いている所を使って、その番号を CSS に書くか、外部画像を使って、
その URL を CSS に書くかどちらかです。


関連する記事

手ブロ新デザイン : あたらしいテーマをカスタマイズしました

posted by at 2011-09-23 14:29 | 手書きブログ |

手ブロ新デザイン : あたらしいテーマをカスタマイズしました(詳細部分)



オリジナルのタイトルはいまだに SEO に対応していないので変更してあります

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

#if($tegaki.title == "")
		<title>手書きブログ - $user.nickname さんのブログ</title>
#else
		<title>$tegaki.title : 手書きブログ - $user.nickname さんのブログ</title>
#end		
		
		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

		【遵守事項】
		・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
		・広告の一部及び全てを隠蔽するような加工をすることはできません。
		・広告の一部及び全てが不鮮明になるような加工をすることはできません。
		・広告のクリックを誘導することはできません。
		・株式会社pipa.jpが掲載する広告以外の広告を直接的及び間接的に掲載することはできません。
		・Java Scriptやobjectタグを用いたブログパーツ等を利用することはできません。
		　(手書きブログのブログパーツを除く)
		・その他HTMLソース内部に記載された指示に従って下さい。

		【免責事項】
		・β版のため任意のタイミングでデザインに関するデータをすべて消去する可能性があります。
		　運営側でバックアップを取ることはできませんので各自バックアップ必ずお取り下さい。
		・利用方法に関する個別のお問い合わせには対応いたしません。
		-->
		<!-- HTML編集規定 -->

		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #47301C;
			background-color: #E3DBDB;
		}
		
		a {
			color: #47301C;
		}

		#Wrapper {
			width: 988px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px 16px 0px 16px;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 100px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 327px;
                        background-color: #E3DBDB;
		}
		
		#SideBarTitle {
			float: left;
			width: 327px;
			height: 34px;
			padding: 6px 0 0 0;
			background-image: url('$user.image004');
			background-position: left top;
			background-repeat: no-repeat;
		}

		#SideBarTitle .MyNickname a {
			float: left;
			width: 100%;
			font-size: 18px;
			font-weight: none;
                        text-align: center;
                        text-decoration: none;
			margin: 0 0 0 0;
                        color: #ffffff;
		}
	
		#SideBarTitle .MyNickname a:hover {
                        text-decoration: underline;
                }

		#SideBarBody {
			float: left;
			width: 327px;
			height: auto;
			border: 0px;
			padding: 10px 0 0 0;
			/*background-image: url('$user.image005');
			background-position: left top;
			background-repeat: repeat;*/
                        background-color: #ffffff;
                        border-left: 0px solid #47301C;
                        border-right: 0px solid #47301C;
                        border-bottom: 0px solid #47301C;
			margin-left: auto;
			margin-right: auto;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
			/*background-image: url('$user.image004');
			background-position: left bottom;
			background-repeat: no-repeat;*/
                        background-color: #ffffff;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 13px 10px 13px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}
	
		.SideBarItem .MyNickname {
			float: left;
			width: 100%;
			font-size: 14px;
			font-weight: bold;
			margin: 0;
		}
	
		.SideBarItem .MyImg {
			float: left;
			width: 300px;
                        margin: 5px 0px 5px;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			padding: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #47301C;
			text-decoration: none;
			background-color: #ffffff;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #47301C;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}

		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 250px;
			height: 40px;
			padding: 0px 25px 0px 25px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 246px;
			height: auto;
			margin: 5px 27px 20px 27px;
			background-color: #FFFFFF;
			color: #555555;
		}

		.WidgetPane .WidgetTitle {
			width: 246px;
                        height: 16px;
                        padding: 4px 0 0 0;
                        color: #ffffff;
                        background-image: url('$user.image002');
			/*background-color: #dddddd;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;*/
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 244px;
			height: auto;
			color: #47301C;
			border-left: 1px solid #47301C;
			border-right: 1px solid #47301C;
			border-bottom: 1px solid #47301C;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #47301C;
                        text-decoration: none;
		}

		.WidgetPane .WidgetItemList a:hover {
                        text-decoration: underline;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #47301C;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}

		.WidgetPane .WidgetItemList .Link{
                        display: block;
                        width: 100%;
			text-align: left;
                        padding: 5px 0 0 5px;
                }

		.WidgetPane .WidgetItemList .MyBlogParts{
                        padding: 0 0 15px 0;
                }
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 651px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 651px;
			padding: 0px;
			margin-bottom: 20px;
                        border: 1px solid #ffffff;
		}

		.ContentsListTitle {
			float: left;
			width: 633px;
			height: 40px;
			padding: 0 10px 0 10px;
                        text-align: left;
                        color: #ffffff;                       
			background-image: url('$user.image004');
			background-position: left top;
			background-repeat: repeat;
		}

		.BlogInfoBar{
			float: left;
			width: 641px;
			height: 62px;
			/*padding: 10px 10px 5px 240px;*/
			padding: 5px 0px 5px 10px;
                        text-align: left;
                        color: #ffffff;
                        background-color: #47301C;
		}

		.BlogInfoBar a{
                        color: #ffffff;
                }

		.BlogInfoBar .Link{
			float: left;
                        margin: 0 5px 0 0;
                        border: 1px solid #E3DBDB;
			background-position: 50% 50%;
			background-repeat: no-repeat;
                }

		.BlogInfoBar .Link img {
                        width: auto;
                        height: 60px;
                }

		.BlogInfoBar .SocialButtons {
			float: left;
                        margin: 0 5px 0 20px;
                        width: 280px;
                        height: 60px;
                }

		/*.BlogInfoBar .SocialButtons .Button2 {
                        background-color: #ffff00;
                }

		.BlogInfoBar .SocialButtons .Button3 {
                        background-color: #ff00ff;
                }

		.BlogInfoBar .SocialButtons .Button1 {
                        background-color: #00ffff;
                }

		.BlogInfoBar .SocialButtons .Button4 {
                        background-color: #00ff00;
                }*/

		.BlogInfoBar .SocialButtons a {
                        color: #ffffff;
			float: left;
                        display: block;
                        margin: 0 5px 0 0;
                        width: 56px;
                        height: 54px;
                        font-size: 12px;
                        text-align: center;
                        text-decoration: none;
                        padding: 4px 2px 2px 2px;
                        background-image:url('$user.image005');
                }

		.BlogInfoBar .SocialButtons a:hover {
                        color: #47301C;
                        background-color: #ffffff;
                }

		.BlogInfoBar .Feedbacks {
                        float: right;
                        width: 126px;
                        height: 50px;
			background-image:url('$user.image008');
			background-position: left top;
			background-repeat: no-repeat;
                        border: 0px solid #E3DBDB;
                        padding: 9px 4px 0 4px;
                        margin: 3px 10px 0 0;
                        color: #47301C;
                }

		.BlogInfoBar .Feedbacks .Comment {
                        font-size: 12px;
                        font-weight: bold;
                        text-align: center;
                }

		.BlogInfoBar .Feedbacks .Comment a {
                        color: #47301C;
                        font-weight: bold;
                }

                .ContentsListTitle .Date {
                        font-size: 10px;
                }

                .ContentsListTitle .Title {
                        float: left;
                        width: 483px;
                        height: 38px;
                        padding: 2px 0 0 0;
			font-size: 16px;
                        font-weight: bold;
                        background-color: #47301C;
			overflow: hidden;
			white-space: nowrap;
                }
		
		.ContentsListTitle .Category {
                        float: right;
                        text-align: right;
                        width: 150px;
                        height: 35px;
                        padding: 5px 0 0 0;
			font-size: 12px;
			font-weight: normal;
                        padding: 5px 0 0 0;
		}

		.BlogThumbFull {
			float: left;
			width: 100%;
			text-align: center;
		}
		
		.BlogThumbFull .BlogThumbFullTitle {
			float: left;
			width: 624px;
			height: 10px;
			padding: 0px 20px 0px 7px;
			/*background-image:url('$user.image007');
			background-position: left top;
			background-repeat: no-repeat;*/
                        background-color: #ffffff;
		}

		.BlogThumbFull .BlogThumbFullBody {
			float: left;
			width: 600px;
			padding: 0px 30px 0px 21px;
			/*background-image:url('$user.image008');
			background-position: left bottom;
			background-repeat: repeat;*/
                        background-color: #ffffff;
		}

		.BlogThumbFull .BlogThumbFullEnd {
			float: left;
			width: 624px;
			height: 20px;
			padding: 0px 20px 0px 7px;
			/*background-image:url('$user.image007');
			background-position: left bottom;
			background-repeat: no-repeat;*/
                        background-color: #ffffff;
		}
		
		.BlogThumbFull .NaviBar {
			width: 100%;
			margin: 5px 0px 5px 0px;
		}
		
		.BlogThumbFull .NaviBar .Navi_P,
		.BlogThumbFull .NaviBar .Navi_C,
		.BlogThumbFull .NaviBar .Navi_N {
			width: 33%;
		}

		.BlogThumbFull .BlogInfoFull {
			width: 100%;
			margin: 5px 0px 0px 0px;
			text-align: left;
		}

		.BlogThumbFull .BlogInfoFull img {
		}
				
		.BlogThumbFull .BlogInfoFull .BlogCmd {
			text-align: right;
			font-size: 0px;
			font-size: 0em;
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .BlogCmdHeartIcon {
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .EditHeartIcon {
			margin-left: 5px;
		}

		.BlogThumbFull .BlogInfoFull .BlogDate {
			font-size: 11px;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle {
			font-size: 26px;
			font-weight: bold;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag img {
			border: solid 1px #dddddd;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate img {
			height: 60px;
			border: solid 1px #dddddd;
		}

		.BlogThumbFull .BlogDetail img{
			border: 1px solid #E3DBDB;
                }

		/*** コメント ***/
		.CommentDetail {
			text-align: center;
		}
		
		.CommentDetail .CmtImg {
			text-align: center;
			border: solid 1px #dddddd;
			width: 480px;
			height: 160px;
			margin: 0px auto 0px auto;
		}

		.CommentDetail .CommentName {
			height: 15px;
		}
		
		#PalletPaneH {
			text-align: center;
			width: 484px;
			background-color:#ffffff;
			margin: 0px auto 0px auto;
		} 
				
		#PalletPaneH .PalletButtonTitle {
			font-size: x-small;
			text-align: center;
			background-color: #dddddd;
		}

		#PalletPaneH #ColorButton,
		#PalletPaneH #PenButton {
			border-collapse:collapse;
			border:0px;
		}

		#PalletPaneH #ColorButton td,
		#PalletPaneH #PenButton td
			{
			border:none;
			padding:0px;
			text-align:center;
			background-color:#ffffff;
			cursor: pointer;
		}

		#PalletPaneH #PenButton td {
			width: 15px;
		}

		#PalletPaneH #ColorButton td:hover,
		#PalletPaneH #PenButton td:hover {
			background-color: #bbccff;
		}

		#PalletPaneH .PalleteCommand {
			text-align: center;
		}

		#PalletPaneH .PalleteCommand select {
			font-size: x-small;
		}

		#PalletPaneH #ColorButton .Color {
			width:14px;
			height:28px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow {
			width:14px;
			height:15px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow .ColorRainbowPart {
			border: none;
			width:14px;
			height:3px;
			font-size: 0em;
		}

		#PalletPaneH #PenButton .PenWidth
		{
			font-size: 1px;
			border: solid 1px #eeeeee;
			background-color:#000000;
			margin:3px 1px 3px 1px;
			margin-left: auto;
			margin-right: auto;
			height: 28px;
		}

		#PalletPaneH #UndoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/UndoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #UndoButton:hover {
			background-color: #bbccff;
		}

		#UploadCmd {
			width: 100%;
			border-collapse:collapse;
			text-align: center;
			border: 0px;
			margin: 2px 0px 15px 0px;
		}

		#UploadCmd .UploadButton {
			width: 56px;
			height: 23px;
			border: none;
			background: url(http://img01.pipa.jp/tegaki/img/UploadButton3.png) no-repeat 0 0;
			font-size: 0em;
			color: #ffffff;
			cursor: pointer;
			vertical-align: top;
		}
		#PalletPaneH #RedoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/RedoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #RedoButton:hover {
			background-color: #bbccff;
		}

                #Comments {
                        display: none;
                }
		/*** コメント ***/
		</style>
	</head>
 
	<body>
		$VBlogHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle">
					<div class="MyNickname">
						<a href="../$user.userId/">$user.nickname</a>
					</div>
                                </div>
				<div id="SideBarBody">
				
					<!-- 広告は削除できません -->
					<!--
					・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
					・広告の一部及び全てを隠蔽するような加工をすることはできません。
					・広告の一部及び全てが不鮮明になるような加工をすることはできません。
					-->
					<div class="SideBarItem">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 広告は削除できません -->
					
					<div class="SideBarItem">
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
						<!--<img src="$user.image009" />-->
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
						<!-- ブログカテゴリ -->

						<!-- タグごとの投稿数 -->
						<div class="WidgetPane">
							<div class="WidgetTitle">よく使うタグ</div>
							<div class="WidgetItemList">$blogNumByTag</div>
						</div>
						<!-- タグごとの投稿数 -->

						<!-- お気に入りタグ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
						</div>
						<!-- お気に入りタグ -->

						<!-- リンク -->
						<div class="WidgetPane">
							<div class="WidgetTitle">リンク</div>
							<div class="WidgetItemList">
                                                            <a class="Link" href="#" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')">リンク1</a>
                                                            <a class="Link" href="#" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')">リンク2</a>
                                                            <a class="Link" href="#" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')">リンク3</a>
                                                        </div>
						</div>
						<!-- リンク -->

						<!-- ブログパーツ -->
                                                <!--
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログパーツ</div>
							<div class="WidgetItemList">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="MyBlogParts">$blogParts</div>
                                                        </div>
						</div>
                                                -->
						<!-- ブログパーツ -->

						<!-- ウィジェット -->
					</div><!-- SideBarItem -->

				</div><!-- SideBarBody -->
				<!--<div id="SideBarEnd"></div>-->
			</div><!-- SideBar -->
			<!-- メニューペイン -->

			<!-- コンテンツペイン -->
			<div id="Contents">
                                <div class="ContentsListTitle">
                                        <div class="Title">
                                            <div class="Date">
                                                $tegaki.uploadDateText
                                            </div>
                                            $tegaki.title
                                        </div>
                                        <div class="Category">
                                            カテゴリ：$categoryName
                                        </div>
                                 </div>
				<div class="ContentsList">
					<div class="BlogThumbFull">
						<div class="BlogThumbFullBody">		
							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; 次へ</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">ブログ一覧</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">前へ &gt;</a>
#end
									</td>
								</tr>
							</table>

					
							<div class="BlogDetail">
								<img src="${tegaki.getImg(0).fileName}" class="BlogImgFull" alt="$tegaki.title" />
							</div>
					
							<!-- 削除できません -->
                                                        <a href="comments"></a>
                                                        $comments
                                                        <!-- 削除できません -->

							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; 次へ</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">ブログ一覧</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">前へ &gt;</a>
#end
									</td>
								</tr>
							</table>

						</div>
					</div>


                                        <div class="BlogInfoBar">
                                            <div class="Link">
#if($tegaki.tagId > 1)
						 <a href="../VSearchBlogByTagS.jsp?GD=${tegaki.tagId}">
						 <img src="${tegaki.tagFileName}" title="タグ" alt="タグ" /></a>
#else
						 <img src="${tegaki.tagFileName}" title="タグ" alt="タグ" />
#end
                                            </div>
                                            <div class="Link">
#if($tegaki.getImg(0).template.fileName != "")
  #if(${tegaki.getImg(0).template.templateId} > 0)
						<a href="../VSearchBlogByTemplateS2.jsp?PD=${tegaki.getImg(0).template.templateId}" >
  #end
						<img src="${tegaki.getImg(0).template.fileName}_60.jpg" title="テンプレ" alt="テンプレ" />
  #if(${tegaki.getImg(0).template.templateId} > 0)
						</a>
  #end
#end
                                            </div>

                                            <div class="SocialButtons">
                                                 <a href="$tweetURL" target="_blank">この記事をツイートする</a>

                                                 <a href="$bookmarkURL">お気に入りに追加する</a>

                                                 <a href="javascript:OpenDot('../VCreateDotS.jsp?ID=$user.userId&TD=$tegaki.tegakiId');">
                                                 ハートを送る</a>

                                                 <a href="#comments" onclick="var c = document.getElementById('Comments'); if(c.style.display=='block'){c.style.display='none';}else{c.style.display='block';}">
                                                 コメントをかく</a>
                                            </div>
                                            <div class="Feedbacks">
#foreach($heart in $heartList)
					         <a href="javascript:OpenDotList('../VBlogDotListS.jsp?PG=0&ID=$user.userId&TD=$tegaki.tegakiId');">
					         <img class="BlogCmdHeartIcon" src="$heart" /></a>
#end

                                                 <div class="Comment">
                                                      <a class="Button4" href="#comments" onclick="var c = document.getElementById('Comments'); if(c.style.display=='block'){c.style.display='none';}else{c.style.display='block';}">
                                                      コメント$tegaki.commentNum件</a>
                                                 </div>
                                            </div>
                                        </div>
				</div>
			</div>

			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!--Wrapper-->
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>

一覧用

手ブロ新デザイン : あたらしいテーマをカスタマイズしました

posted by at 2011-09-23 13:30 | 手書きブログ |

手ブロ新デザイン : あたらしいテーマをカスタマイズしました



新しいテーマが追加されたのですが、サイドとコンテンツの位置が逆に
なっていたので、いままでの馴染みのある位置に変更しました。

さらに、サムネイルが正方形で小さくなっていたのを元の大きさに戻し
て、プロフィール画像は最大幅300までうまく表示できるはずです。

このテーマでは、カテゴリが5つまでタブになるのでおすすめです。

※ いったんこのテーマを適用した後、以下の内容と変更して下さい。
( テーマ画像の都合です )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

		<title>手書きブログ - $user.nickname さんのブログ一覧</title>

		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

		【遵守事項】
		・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
		・広告の一部及び全てを隠蔽するような加工をすることはできません。
		・広告の一部及び全てが不鮮明になるような加工をすることはできません。
		・広告のクリックを誘導することはできません。
		・株式会社pipa.jpが掲載する広告以外の広告を直接的及び間接的に掲載することはできません。
		・Java Scriptやobjectタグを用いたブログパーツ等を利用することはできません。
		　(手書きブログのブログパーツを除く)
		・その他HTMLソース内部に記載された指示に従って下さい。

		【免責事項】
		・β版のため任意のタイミングでデザインに関するデータをすべて消去する可能性があります。
		　運営側でバックアップを取ることはできませんので各自バックアップ必ずお取り下さい。
		・利用方法に関する個別のお問い合わせには対応いたしません。
		-->
		<!-- HTML編集規定 -->

		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #47301C;
			background-color: #E3DBDB;
		}
		
		a {
			color: #47301C;
		}

		#Wrapper {
			width: 988px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px 16px 0px 16px;
		}

		.PageBar{
			text-align: center;
			float: left;
			width: 600px;
			font-size: 10px;
			padding: 0px 0px 10px 30px;
                        background-color: #ffffff;
		}

		.PageBar span{
			float: left;
			display: block;
			width: 20px;
			height: 20px;
			text-align:center;
			white-space: nowrap;
			overflow: hidden;
			line-height: 20px;
			padding: 5px;
                        margin: 0 5px 0 5px;
                        color: #ffffff;
                        background-color: #ffffff;
			background-image: url('$user.image003');
		}

		.PageBar span:hover {
			background-color:#eeeeee;
			cursor: pointer;
		}

		.PageBar .Selected {
			font-weight: bold;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 100px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 327px;
                        background-color: #E3DBDB;
		}
		
		#SideBarTitle {
			float: left;
			width: 327px;
			height: 34px;
			padding: 6px 0 0 0;
			background-image: url('$user.image004');
			background-position: left top;
			background-repeat: no-repeat;
		}

		#SideBarTitle .MyNickname a {
			float: left;
			width: 100%;
			font-size: 18px;
			font-weight: none;
                        text-align: center;
                        text-decoration: none;
			margin: 0 0 0 0;
                        color: #ffffff;
		}
	
		#SideBarTitle .MyNickname a:hover {
                        text-decoration: underline;
                }

		#SideBarBody {
			float: left;
			width: 327px;
			height: auto;
			border: 0px;
			padding: 10px 0 0 0;
			/*background-image: url('$user.image005');
			background-position: left top;
			background-repeat: repeat;*/
                        background-color: #ffffff;
                        border-left: 0px solid #47301C;
                        border-right: 0px solid #47301C;
                        border-bottom: 0px solid #47301C;
			margin-left: auto;
			margin-right: auto;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
			/*background-image: url('$user.image004');
			background-position: left bottom;
			background-repeat: no-repeat;*/
                        background-color: #ffffff;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 13px 10px 13px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}

		.SideBarItem .MyImg {
			float: left;
			width: 300px;
                        margin: 5px 0px 5px;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			padding: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #47301C;
			text-decoration: none;
			background-color: #ffffff;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #47301C;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}
	
		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 250px;
			height: 40px;
			padding: 0px 25px 0px 25px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 246px;
			height: auto;
			margin: 5px 27px 20px 27px;
		}

		.WidgetPane .WidgetTitle {
			width: 246px;
                        height: 16px;
                        padding: 4px 0 0 0;
                        color: #ffffff;
			/*background-color: #47301C;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;*/
                        background-image: url('$user.image002');
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 244px;
			height: auto;
                        color: #47301C;
			border-left: 1px solid #47301C;
			border-right: 1px solid #47301C;
			border-bottom: 1px solid #47301C;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #47301C;
                        text-decoration: none;
		}

		.WidgetPane .WidgetItemList a:hover {
                        text-decoration: underline;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #47301C;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}

		.WidgetPane .WidgetItemList .Link{
                        display: block;
                        width: 100%;
			text-align: left;
                        padding: 5px 0 0 5px;
                }

		.WidgetPane .WidgetItemList .MyBlogParts{
                        padding: 0 0 5px 0;
                }

                #CategoryTab {
                        float: left;
                        width: 100%;
                        height: 40px;
                        border: 0px solid #000;
                }

		#CategoryTab .Category {
                        float: left;
			text-align: center;
                        margin: 0 6px 0 0;
			overflow: hidden;
			white-space: nowrap;
		}
		#CategoryTab .Category a {
                        display: block;
			width: 100px;
                        height: 32px;
                        text-decoration: none;
                        font-size: 11px;
                        color: #fff;
                        padding: 8px 0 0 0;
                        background-image:url('$user.image010');
                }
		#CategoryTab .Category a:hover {
                        text-decoration: underline;
                        color: #47301C;
                        font-weight: bold;
                        background-image:url('$user.image006');
                }

		#CategoryTab .Category #Category$categoryId {
                        background-image:url('$user.image006');
                        font-weight: bold;
                        color: #47301C;
                }
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 651px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 651px;
			padding: 0px;
			margin-bottom: 20px;
                        background-color: #ffffff;
                        border: 0px solid #47301C;
		}

		.BlogThumb {
			font-size: x-small;
			text-align: center;
			float: left;
			width: 120px;
			height: 160px;
			padding: 5px;
                        margin: 0 15px 30px 0;
                        background-color: #FFFFFF;
                        border: 0px solid #47301C;
		/*	background-image:url('$user.image007'); */
			background-position: left top;
			background-repeat: no-repeat;
		}

		.BlogThumb .BlogImg {
			display: block;
			float: left;
			width: 120px;
			height: 160px;
                        border: 1px solid #E3DBDB;
			background-position: 50% 50%;
			background-repeat: no-repeat;
                        margin: 0 0 8px 0;
		}

		.BlogThumb .BlogInfo{
			float: left;
			width: 100%;
		}

		.BlogThumb .BlogInfo .BlogTitle {
			float: left;
			width: 100%;
			height: 15px;
			line-height: 15px;
			font-size: 11px;
			overflow: hidden;
			white-space: nowrap;
		}

		.BlogThumb .BlogInfo .BlogDate {
			float: left;
			width: 100%;
			height: 15px;
			line-height: 15px;
			font-size: 9px;
			overflow: hidden;
			white-space: nowrap;
		}
		</style>
	</head>
 
	<body>
		$VBlogListHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle">
                                    <div class="MyNickname">
                                        <a href="../$user.userId/">$user.nickname</a>
                                    </div>
                                </div>
				<div id="SideBarBody">
					
					<!-- 広告は削除できません -->
					<!--
					・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
					・広告の一部及び全てを隠蔽するような加工をすることはできません。
					・広告の一部及び全てが不鮮明になるような加工をすることはできません。
					-->
					<div class="SideBarItem">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 広告は削除できません -->
					
					<div class="SideBarItem">
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
						<!--<img src="$user.image009" />-->
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
                                                <!--
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
                                                -->
						<!-- ブログカテゴリ -->

						<!-- タグごとの投稿数 -->
						<div class="WidgetPane">
							<div class="WidgetTitle">よく使うタグ</div>
							<div class="WidgetItemList">$blogNumByTag</div>
						</div>
						<!-- タグごとの投稿数 -->

						<!-- お気に入りタグ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
						</div>
						<!-- お気に入りタグ -->


						<!-- リンク -->
						<div class="WidgetPane">
							<div class="WidgetTitle">リンク</div>
							<div class="WidgetItemList">
                                                            <a class="Link" href="#" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')">リンク1</a>
                                                            <a class="Link" href="#" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')">リンク2</a>
                                                            <a class="Link" href="#" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')">リンク3</a>
                                                        </div>
						</div>
						<!-- リンク -->

						<!-- ブログパーツ -->
                                                <!--
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログパーツ</div>
							<div class="WidgetItemList">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="MyBlogParts">$blogParts</div>
                                                        </div>
						</div>
                                                -->
						<!-- ブログパーツ -->

						<!-- ウィジェット -->
					</div><!-- SideBarItem -->

				</div><!-- SideBarBody -->
				<!--<div id="SideBarEnd"></div>-->
			</div><!-- SideBar -->
			<!-- メニューペイン -->


			<!-- コンテンツペイン -->
			<div id="Contents">
				<!-- ブログカテゴリ -->
				<div id="CategoryTab">
					$categoryList
				</div>
				<!-- ブログカテゴリ -->

				<div class="ContentsList">
					<div style="width: 100%; margin: 40px 0 0 40px;">
#foreach($tegaki in $tegakiList)
						<div class="BlogThumb">
#if($tegaki.tegakiId!=-1)
							<a href="../$user.userId/${tegaki.tegakiId}.html" class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');" title="${tegaki.title}(コメント${tegaki.commentNum}件)">
							</a>
#else
							<div class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');" title="$tegaki.title">
							</div>
#end
							<!--<div class="BlogInfo">
								<div class="BlogTitle">$tegaki.title</div>
								<div class="BlogDate">
									<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" title="コメント$tegaki.commentNum件" alt="コメント$tegaki.commentNum件" />x$tegaki.commentNum
									&nbsp;
									$tegaki.uploadDateText
								</div>
							</div>-->
						</div><!-- BlogThumb -->
#end
					</div>

					<div class="PageBar">$pageMenu</div>
				</div><!-- ContentsList -->
			</div><!-- Contents -->
			<!-- コンテンツペイン -->


			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!-- Wrapper -->
		
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>

詳細用

手ブロ新デザイン : あたらしいテーマをカスタマイズしました(詳細部分)

posted by at 2011-09-23 13:24 | 手書きブログ |

手ブロ新デザイン : シンプルテンプレート : 一覧部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

		<title>手書きブログ - $user.nickname さんのブログ一覧</title>

		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

		【遵守事項】
		・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
		・広告の一部及び全てを隠蔽するような加工をすることはできません。
		・広告の一部及び全てが不鮮明になるような加工をすることはできません。
		・広告のクリックを誘導することはできません。
		・株式会社pipa.jpが掲載する広告以外の広告を直接的及び間接的に掲載することはできません。
		・Java Scriptやobjectタグを用いたブログパーツ等を利用することはできません。
		　(手書きブログのブログパーツを除く)
		・その他HTMLソース内部に記載された指示に従って下さい。

		【免責事項】
		・β版のため任意のタイミングでデザインに関するデータをすべて消去する可能性があります。
		　運営側でバックアップを取ることはできませんので各自バックアップ必ずお取り下さい。
		・利用方法に関する個別のお問い合わせには対応いたしません。
		-->
		<!-- HTML編集規定 -->

		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #777777;
			background-color:#000000;
		}
		
		a {
			color: #777777;
		}

		#Wrapper {
			width: 1200px;
			margin-left: 10px;
			margin-right: 10px;
			padding: 0px 16px 0px 16px;
		}

		.PageBar{
			text-align: center;
			float: left;
			width: 100%;
			font-size: 12px;
			margin: 10px 0px 10px 0px;
		}

		.PageBar span{
			float: left;
			display: block;
			padding: 0;
			width: 35px;
			height: 35px;
			text-align:center;
			white-space: nowrap;
			overflow: hidden;
			line-height: 35px;
			padding: 10px;
			background-image: url('$user.image003');
		}

		.PageBar span:hover {
			background-color:#eeeeee;
			cursor: pointer;
		}

		.PageBar .Selected {
			font-weight: bold;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 200px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 540px;
		}
		
		#SideBarTitle {
			float: left;
			width: 300px;
			height: 10px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#SideBarBody {
			float: left;
			width: 300px;
			height: auto;
			border: 0px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image005'); */
			background-position: left top;
			background-repeat: repeat;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 0px 10px 0px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}

		.SideBarItem .MyNickname {
			float: left;
			width: 100%;
			font-size: 20px;
			font-weight: bold;
			margin: 0;
		}
	
		.SideBarItem .MyImg {
			float: left;
			width: 100%;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			padding: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #cccccc;
			text-decoration: none;
			background-color: #ffffff;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #cccccc;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}
	
		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 300px;
			height: 40px;
			padding: 0px 0px 0px 0px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 246px;
			height: auto;
			margin: 5px 0px 20px 0px;
			background-color: #FFFFFF;
			color: #555555;
		}

		.WidgetPane .WidgetTitle {
			width: 300px;
			background-color: #dddddd;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 300px;
			height: auto;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
			border-bottom: 1px solid #dddddd;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #555555;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #888888;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 651px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 651px;
			padding: 0px;
			margin-top: 12px;
			margin-bottom: 20px;
			border: 0;
		}

		.BlogThumb {
			font-size: x-small;
			text-align: center;
			float: left;
			width: 190px;
			height: 190px;
			padding: 10px 20px 20px 7px;
			background-image:url('$user.image002');
			background-position: left top;
			background-repeat: no-repeat;
		}

		.BlogThumb .BlogImg {
			display: block;
			float: left;
			width: 190px;
			height: 160px;
			background-position: 50% 50%;
			background-repeat: no-repeat;
		}

		.BlogThumb .BlogInfo{
			float: left;
			width: 100%;
		}

		.BlogThumb .BlogInfo .BlogTitle {
			float: left;
			width: 100%;
			height: 15px;
			line-height: 15px;
			font-size: 11px;
			overflow: hidden;
			white-space: nowrap;
		}

		.BlogThumb .BlogInfo .BlogDate {
			float: left;
			width: 100%;
			height: 15px;
			line-height: 15px;
			font-size: 9px;
			overflow: hidden;
			white-space: nowrap;
		}
		</style>
	</head>
 
	<body>
		$VBlogListHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- コンテンツペイン -->
			<div id="Contents">
				<div class="ContentsList">
					<div style="width: 100%;">
#foreach($tegaki in $tegakiList)
						<div class="BlogThumb">
#if($tegaki.tegakiId!=-1)
							<a href="../$user.userId/${tegaki.tegakiId}.html" class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');">
							</a>
#else
							<div class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');">
							</div>
#end
							<div class="BlogInfo">
								<div class="BlogTitle">$tegaki.title</div>
								<div class="BlogDate">
									<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" title="コメント$tegaki.commentNum件" alt="コメント$tegaki.commentNum件" />x$tegaki.commentNum
									&nbsp;
									$tegaki.uploadDateText
								</div>
							</div>
						</div><!-- BlogThumb -->
#end
					</div>

					<div class="PageBar">$pageMenu</div>
				</div><!-- ContentsList -->
			</div><!-- Contents -->
			<!-- コンテンツペイン -->

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle"></div>
				<div id="SideBarBody">
					
					<!-- 広告は削除できません -->
					<!--
					・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
					・広告の一部及び全てを隠蔽するような加工をすることはできません。
					・広告の一部及び全てが不鮮明になるような加工をすることはできません。
					-->
					<div class="SideBarItem" style="padding: 0;">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 広告は削除できません -->
					
					<div class="SideBarItem">
						<div class="SideBarItemTitleProfile"></div>
						<div class="MyNickname">
							<!-- $user.nickname -->
						</div>
	
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
							<img src="$user.image009" />
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
						<!-- ブログカテゴリ -->

						<!-- タグごとの投稿数 -->
						<div class="WidgetPane">
							<div class="WidgetTitle">よく使うタグ</div>
							<div class="WidgetItemList">$blogNumByTag</div>
						</div>
						<!-- タグごとの投稿数 -->

						<!-- お気に入りタグ -->
						<!--
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
						</div>
						-->
						<!-- お気に入りタグ -->
						<!-- ウィジェット -->
					</div><!-- SideBarItem -->
	
					<!-- リンク -->
					<div class="SideBarItem">
						<div class="SideBarItemTitleLink"></div>
						<div class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center 0px;"></div>
						<div class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -40px;"></div>
						<div class="MyLinkBanner" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -80px;"></div>
					</div>
					<!-- リンク -->
	
					<!-- ブログパーツ-->
					<div class="SideBarItem">
						<div class="MyBlogParts">$blogParts</div>
					</div>
					<!-- ブログパーツ-->
				</div><!-- SideBarBody -->
				<div id="SideBarEnd"></div>
			</div><!-- SideBar -->
			<!-- メニューペイン -->

			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!-- Wrapper -->
		
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>

posted by at 2011-09-17 12:49 | 手書きブログ |

手ブロ新デザイン : シンプルテンプレート

いろいろ拡張性も考慮して配置しました。



※ 手ブロ新デザイン : シンプルテンプレート : 一覧部分

以下は、詳細部分です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

#if($tegaki.title == "")
		<title>手書きブログ - $user.nickname さんのブログ</title>
#else
		<title>$tegaki.title : 手書きブログ - $user.nickname さんのブログ</title>
#end		
		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

		【遵守事項】
		・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
		・広告の一部及び全てを隠蔽するような加工をすることはできません。
		・広告の一部及び全てが不鮮明になるような加工をすることはできません。
		・広告のクリックを誘導することはできません。
		・株式会社pipa.jpが掲載する広告以外の広告を直接的及び間接的に掲載することはできません。
		・Java Scriptやobjectタグを用いたブログパーツ等を利用することはできません。
		　(手書きブログのブログパーツを除く)
		・その他HTMLソース内部に記載された指示に従って下さい。

		【免責事項】
		・β版のため任意のタイミングでデザインに関するデータをすべて消去する可能性があります。
		　運営側でバックアップを取ることはできませんので各自バックアップ必ずお取り下さい。
		・利用方法に関する個別のお問い合わせには対応いたしません。
		-->
		<!-- HTML編集規定 -->

		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #777777;
			background-color:#000000;
		}
		
		a {
			color: #777777;
		}

		#Wrapper {
			width: 1200px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px 16px 0px 16px;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 200px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 580px;
		}
		
		#SideBarTitle {
			float: left;
			width: 300px;
			height: 10px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#SideBarBody {
			float: left;
			width: 300px;
			height: auto;
			border: 0px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image005'); */
			background-position: left top;
			background-repeat: repeat;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 0px 10px 0px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}
	
		.SideBarItem .MyNickname {
			float: left;
			width: 100%;
			font-size: 20px;
			font-weight: bold;
			margin: 0;
		}
	
		.SideBarItem .MyImg {
			float: left;
			width: 100%;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			padding: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #cccccc;
			text-decoration: none;
			background-color: #ffffff;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #cccccc;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}

		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 300px;
			height: 40px;
			padding: 0px 0px 0px 0px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 246px;
			height: auto;
			margin: 5px 0px 20px 0px;
			background-color: #FFFFFF;
			color: #555555;
		}

		.WidgetPane .WidgetTitle {
			width: 300px;
			background-color: #dddddd;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 300px;
			height: auto;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
			border-bottom: 1px solid #dddddd;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #555555;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #888888;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 581px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 581px;
			padding: 0px;
			margin-bottom: 20px;
			border: 0;
		}

		.BlogThumbFull {
			float: left;
			width: 100%;
			text-align: center;
		}
		
		.BlogThumbFull .BlogThumbFullTitle {
			float: left;
			width: 624px;
			height: 10px;
			padding: 0px 20px 0px 7px;
		/*	background-image:url('$user.image007'); */
			background-position: left top;
			background-repeat: no-repeat;
		}

		.BlogThumbFull .BlogThumbFullBody {
			float: left;
			width: 550px;
			padding: 0px 30px 0px 21px;
		/*	background-image:url('$user.image008'); */
			background-position: left bottom;
			background-repeat: repeat;
		}

		.BlogThumbFull .BlogThumbFullEnd {
			float: left;
			width: 624px;
			height: 20px;
			padding: 0px 20px 0px 7px;
		/*	background-image:url('$user.image007'); */
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		.BlogThumbFull .NaviBar {
			width: 100%;
			margin: 5px 0px 5px 0px;
		}
		
		.BlogThumbFull .NaviBar .Navi_P,
		.BlogThumbFull .NaviBar .Navi_C,
		.BlogThumbFull .NaviBar .Navi_N {
			width: 33%;
		}

		.BlogThumbFull .BlogInfoFull {
			width: 100%;
			margin: 5px 0px 0px 0px;
			text-align: left;
		}

		.BlogThumbFull .BlogInfoFull img {
			border: none;
		}
				
		.BlogThumbFull .BlogInfoFull .BlogCmd {
			text-align: right;
			font-size: 0px;
			font-size: 0em;
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .BlogCmdHeartIcon {
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .EditHeartIcon {
			margin-left: 5px;
		}

		.BlogThumbFull .BlogInfoFull .BlogDate {
			font-size: 11px;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle {
			font-size: 26px;
			font-weight: bold;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle .BlogTitleComment {
			font-size: 11px;
			font-weight: normal;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag img {
			border: solid 1px #dddddd;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate img {
			height: 60px;
			border: solid 1px #dddddd;
		}
		
		/*** コメント ***/
		.CommentDetail {
			text-align: center;
		}
		
		.CommentDetail .CmtImg {
			text-align: center;
			border: solid 1px #dddddd;
			width: 480px;
			height: 160px;
			margin: 0px auto 0px auto;
		}

		.CommentDetail .CommentName {
			height: 15px;
		}
		
		#PalletPaneH {
			text-align: center;
			width: 484px;
			background-color:#ffffff;
			margin: 0px auto 0px auto;
		} 
				
		#PalletPaneH .PalletButtonTitle {
			font-size: x-small;
			text-align: center;
			background-color: #dddddd;
		}

		#PalletPaneH #ColorButton,
		#PalletPaneH #PenButton {
			border-collapse:collapse;
			border:0px;
		}

		#PalletPaneH #ColorButton td,
		#PalletPaneH #PenButton td
			{
			border:none;
			padding:0px;
			text-align:center;
			background-color:#ffffff;
			cursor: pointer;
		}

		#PalletPaneH #PenButton td {
			width: 15px;
		}

		#PalletPaneH #ColorButton td:hover,
		#PalletPaneH #PenButton td:hover {
			background-color: #bbccff;
		}

		#PalletPaneH .PalleteCommand {
			text-align: center;
		}

		#PalletPaneH .PalleteCommand select {
			font-size: x-small;
		}

		#PalletPaneH #ColorButton .Color {
			width:14px;
			height:28px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow {
			width:14px;
			height:15px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow .ColorRainbowPart {
			border: none;
			width:14px;
			height:3px;
			font-size: 0em;
		}

		#PalletPaneH #PenButton .PenWidth
		{
			font-size: 1px;
			border: solid 1px #eeeeee;
			background-color:#000000;
			margin:3px 1px 3px 1px;
			margin-left: auto;
			margin-right: auto;
			height: 28px;
		}

		#PalletPaneH #UndoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/UndoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #UndoButton:hover {
			background-color: #bbccff;
		}

		#UploadCmd {
			width: 100%;
			border-collapse:collapse;
			text-align: center;
			border: 0px;
			margin: 2px 0px 15px 0px;
		}

		#UploadCmd .UploadButton {
			width: 56px;
			height: 23px;
			border: none;
			background: url(http://img01.pipa.jp/tegaki/img/UploadButton3.png) no-repeat 0 0;
			font-size: 0em;
			color: #ffffff;
			cursor: pointer;
			vertical-align: top;
		}
		#PalletPaneH #RedoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/RedoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #RedoButton:hover {
			background-color: #bbccff;
		}
		/*** コメント ***/
		</style>
	</head>
 
	<body>
		$VBlogHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- コンテンツペイン -->
			<div id="Contents">
				<div class="ContentsList">
					<div class="BlogThumbFull">
						<div class="BlogThumbFullTitle"></div>
						<div class="BlogThumbFullBody">
							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; New</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">Blog list</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">Old &gt;</a>
#end
									</td>
								</tr>
							</table>

		
							<table class="BlogInfoFull">
								<tr>
									<td class="BlogDate">$tegaki.uploadDateText</td>
									<td class="BlogCmd">
										<a href="$tweetURL" target="_blank">
										<img src="http://img01.pipa.jp/tegaki/img/tweet_icon.png" border="0" alt="このブログをツイートする" style="vertical-align:middle;"/>
										</a>
									</td>
								</tr>
								<tr>
									<td class="BlogTitle">
										$tegaki.title
										<span class="BlogTitleComment">
											<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" alt="コメント" /> x $tegaki.commentNum
										</span>
									</td>
									<td class="BlogCmd">
										$bookmarkButton
									</td>
								</tr>
							</table>

		
							<table class="BlogInfoFull">
								<tr>
									<td class="BlogTag">Tag</td>
									<td class="BlogTemplate">Template</td>
									<td class="BlogCmd"></td>
								</tr>
								<tr>
									<td class="BlogTag">
#if($tegaki.tagId > 1)
										<a href="../VSearchBlogByTagS.jsp?GD=${tegaki.tagId}">
											<img src="${tegaki.tagFileName}"/>
										</a>
#else
										<img src="${tegaki.tagFileName}" />
#end
									</td>
									<td class="BlogTemplate">
#if($tegaki.getImg(0).template.fileName != "")
  #if(${tegaki.getImg(0).template.templateId} > 0)
										<a href="../VSearchBlogByTemplateS2.jsp?PD=${tegaki.getImg(0).template.templateId}" >
  #end
											<img src="${tegaki.getImg(0).template.fileName}" />
  #if(${tegaki.getImg(0).template.templateId} > 0)
										</a>
  #end
#end
									</td>
									<td class="BlogCmd">
										<a href="javascript:OpenDotList('../VBlogDotListS.jsp?PG=0&ID=$user.userId&TD=$tegaki.tegakiId');">
#foreach($heart in $heartList)
											<img class="BlogCmdHeartIcon" src="$heart" />
#end
										</a>
										&nbsp;
										<a href="javascript:OpenDot('../VCreateDotS.jsp?ID=$user.userId&TD=$tegaki.tegakiId');"><img class="EditHeartIcon" src="http://img01.pipa.jp/tegaki/img/EditHeartIcon.gif" /></a>
									</td>
								</tr>
							</table>

							
							<div class="BlogDetail">
								<img src="${tegaki.getImg(0).fileName}" class="BlogImgFull" alt="$tegaki.title" />
							</div>
		
							<div class="BlogCommentTop">
								comment
							</div>
							<div class="CommentNameCmd"></div>

					
							<!-- 削除できません -->$comments<!-- 削除できません -->

							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; New</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">Blog list</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">Old &gt;</a>
#end
									</td>
								</tr>
							</table>
						</div>
						<div class="BlogThumbFullEnd"></div>
					</div>
				</div>
			</div>

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle"></div>
				<div id="SideBarBody">
				
					<!-- 広告は削除できません -->
					<!--
					・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
					・広告の一部及び全てを隠蔽するような加工をすることはできません。
					・広告の一部及び全てが不鮮明になるような加工をすることはできません。
					-->
					<div class="SideBarItem" style="padding: 0;">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 広告は削除できません -->
					
					<div class="SideBarItem">
						<div class="SideBarItemTitleProfile"></div>
						<div class="MyNickname">
							$user.nickname
						</div>
	
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
							<img src="$user.image009" />
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
						<!-- ブログカテゴリ -->

						<!-- タグごとの投稿数 -->
						<div class="WidgetPane">
							<div class="WidgetTitle">よく使うタグ</div>
							<div class="WidgetItemList">$blogNumByTag</div>
						</div>
						<!-- タグごとの投稿数 -->

						<!-- お気に入りタグ -->
						<!--
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
						</div>
						-->
						<!-- お気に入りタグ -->
						<!-- ウィジェット -->
					</div><!-- SideBarItem -->
	
					<!-- リンク -->
					<div class="SideBarItem">
						<div class="SideBarItemTitleLink"></div>
						<div class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center 0px;"></div>
						<div class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -40px;"></div>
						<div class="MyLinkBanner" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -80px;"></div>
					</div>
					<!-- リンク -->
	
					<!-- ブログパーツ-->
					<div class="SideBarItem">
						<div class="MyBlogParts">$blogParts</div>
					</div>
					<!-- ブログパーツ-->
				</div><!-- SideBarBody -->
				<div id="SideBarEnd"></div>
			</div><!-- SideBar -->
			<!-- メニューペイン -->
			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!--Wrapper-->
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>

posted by at 2011-09-17 12:45 | 手書きブログ |

手ブロ新デザイン : 右サイドをもう少し広く使える詳細画面のテンプレート

詳細画面なので、タイトルに文字列がある場合はブラウザのタイトルバーにも
表示するようにしています

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

#if($tegaki.title == "")
		<title>手書きブログ - $user.nickname さんのブログ</title>
#else
		<title>$tegaki.title : 手書きブログ - $user.nickname さんのブログ</title>
#end		
		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

		【遵守事項】
		・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
		・広告の一部及び全てを隠蔽するような加工をすることはできません。
		・広告の一部及び全てが不鮮明になるような加工をすることはできません。
		・広告のクリックを誘導することはできません。
		・株式会社pipa.jpが掲載する広告以外の広告を直接的及び間接的に掲載することはできません。
		・Java Scriptやobjectタグを用いたブログパーツ等を利用することはできません。
		　(手書きブログのブログパーツを除く)
		・その他HTMLソース内部に記載された指示に従って下さい。

		【免責事項】
		・β版のため任意のタイミングでデザインに関するデータをすべて消去する可能性があります。
		　運営側でバックアップを取ることはできませんので各自バックアップ必ずお取り下さい。
		・利用方法に関する個別のお問い合わせには対応いたしません。
		-->
		<!-- HTML編集規定 -->

		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #777777;
			background-color:#ffffff;
		}
		
		a {
			color: #777777;
		}

		#Wrapper {
			width: 1200px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px 16px 0px 16px;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 200px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 540px;
		}
		
		#SideBarTitle {
			float: left;
			width: 300px;
			height: 10px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#SideBarBody {
			float: left;
			width: 350px;
			height: auto;
			border: 0px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image005'); */
			background-position: left top;
			background-repeat: repeat;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 0px 10px 0px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}
	
		.SideBarItem .MyNickname {
			float: left;
			width: 100%;
			font-size: 20px;
			font-weight: bold;
			margin: 0;
		}
	
		.SideBarItem .MyImg {
			float: left;
			width: 100%;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			padding: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #cccccc;
			text-decoration: none;
			background-color: #ffffff;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #cccccc;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}

		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 300px;
			height: 40px;
			padding: 0px 25px 0px 25px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 246px;
			height: auto;
			margin: 5px 27px 20px 27px;
			background-color: #FFFFFF;
			color: #555555;
		}

		.WidgetPane .WidgetTitle {
			width: 300px;
			background-color: #dddddd;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 300px;
			height: auto;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
			border-bottom: 1px solid #dddddd;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #555555;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #888888;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 651px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 651px;
			padding: 0px;
			margin-bottom: 20px;
			border: 0;
		}

		.BlogThumbFull {
			float: left;
			width: 100%;
			text-align: center;
		}
		
		.BlogThumbFull .BlogThumbFullTitle {
			float: left;
			width: 624px;
			height: 10px;
			padding: 0px 20px 0px 7px;
			background-image:url('$user.image007');
			background-position: left top;
			background-repeat: no-repeat;
		}

		.BlogThumbFull .BlogThumbFullBody {
			float: left;
			width: 600px;
			padding: 0px 30px 0px 21px;
			background-image:url('$user.image008');
			background-position: left bottom;
			background-repeat: repeat;
		}

		.BlogThumbFull .BlogThumbFullEnd {
			float: left;
			width: 624px;
			height: 20px;
			padding: 0px 20px 0px 7px;
			background-image:url('$user.image007');
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		.BlogThumbFull .NaviBar {
			width: 100%;
			margin: 5px 0px 5px 0px;
		}
		
		.BlogThumbFull .NaviBar .Navi_P,
		.BlogThumbFull .NaviBar .Navi_C,
		.BlogThumbFull .NaviBar .Navi_N {
			width: 33%;
		}

		.BlogThumbFull .BlogInfoFull {
			width: 100%;
			margin: 5px 0px 0px 0px;
			text-align: left;
		}

		.BlogThumbFull .BlogInfoFull img {
			border: none;
		}
				
		.BlogThumbFull .BlogInfoFull .BlogCmd {
			text-align: right;
			font-size: 0px;
			font-size: 0em;
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .BlogCmdHeartIcon {
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .EditHeartIcon {
			margin-left: 5px;
		}

		.BlogThumbFull .BlogInfoFull .BlogDate {
			font-size: 11px;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle {
			font-size: 26px;
			font-weight: bold;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle .BlogTitleComment {
			font-size: 11px;
			font-weight: normal;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag img {
			border: solid 1px #dddddd;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate img {
			height: 60px;
			border: solid 1px #dddddd;
		}
		
		/*** コメント ***/
		.CommentDetail {
			text-align: center;
		}
		
		.CommentDetail .CmtImg {
			text-align: center;
			border: solid 1px #dddddd;
			width: 480px;
			height: 160px;
			margin: 0px auto 0px auto;
		}

		.CommentDetail .CommentName {
			height: 15px;
		}
		
		#PalletPaneH {
			text-align: center;
			width: 484px;
			background-color:#ffffff;
			margin: 0px auto 0px auto;
		} 
				
		#PalletPaneH .PalletButtonTitle {
			font-size: x-small;
			text-align: center;
			background-color: #dddddd;
		}

		#PalletPaneH #ColorButton,
		#PalletPaneH #PenButton {
			border-collapse:collapse;
			border:0px;
		}

		#PalletPaneH #ColorButton td,
		#PalletPaneH #PenButton td
			{
			border:none;
			padding:0px;
			text-align:center;
			background-color:#ffffff;
			cursor: pointer;
		}

		#PalletPaneH #PenButton td {
			width: 15px;
		}

		#PalletPaneH #ColorButton td:hover,
		#PalletPaneH #PenButton td:hover {
			background-color: #bbccff;
		}

		#PalletPaneH .PalleteCommand {
			text-align: center;
		}

		#PalletPaneH .PalleteCommand select {
			font-size: x-small;
		}

		#PalletPaneH #ColorButton .Color {
			width:14px;
			height:28px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow {
			width:14px;
			height:15px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow .ColorRainbowPart {
			border: none;
			width:14px;
			height:3px;
			font-size: 0em;
		}

		#PalletPaneH #PenButton .PenWidth
		{
			font-size: 1px;
			border: solid 1px #eeeeee;
			background-color:#000000;
			margin:3px 1px 3px 1px;
			margin-left: auto;
			margin-right: auto;
			height: 28px;
		}

		#PalletPaneH #UndoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/UndoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #UndoButton:hover {
			background-color: #bbccff;
		}

		#UploadCmd {
			width: 100%;
			border-collapse:collapse;
			text-align: center;
			border: 0px;
			margin: 2px 0px 15px 0px;
		}

		#UploadCmd .UploadButton {
			width: 56px;
			height: 23px;
			border: none;
			background: url(http://img01.pipa.jp/tegaki/img/UploadButton3.png) no-repeat 0 0;
			font-size: 0em;
			color: #ffffff;
			cursor: pointer;
			vertical-align: top;
		}
		#PalletPaneH #RedoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/RedoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #RedoButton:hover {
			background-color: #bbccff;
		}
		/*** コメント ***/
		</style>
	</head>
 
	<body>
		$VBlogHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- コンテンツペイン -->
			<div id="Contents">
				<div class="ContentsList">
					<div class="BlogThumbFull">
						<div class="BlogThumbFullTitle"></div>
						<div class="BlogThumbFullBody">
							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; New</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">Blog list</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">Old &gt;</a>
#end
									</td>
								</tr>
							</table>

		
							<table class="BlogInfoFull">
								<tr>
									<td class="BlogDate">$tegaki.uploadDateText</td>
									<td class="BlogCmd">
										<a href="$tweetURL" target="_blank">
										<img src="http://img01.pipa.jp/tegaki/img/tweet_icon.png" border="0" alt="このブログをツイートする" style="vertical-align:middle;"/>
										</a>
									</td>
								</tr>
								<tr>
									<td class="BlogTitle">
										$tegaki.title
										<span class="BlogTitleComment">
											<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" alt="コメント" /> x $tegaki.commentNum
										</span>
									</td>
									<td class="BlogCmd">
										$bookmarkButton
									</td>
								</tr>
							</table>

		
							<table class="BlogInfoFull">
								<tr>
									<td class="BlogTag">Tag</td>
									<td class="BlogTemplate">Template</td>
									<td class="BlogCmd"></td>
								</tr>
								<tr>
									<td class="BlogTag">
#if($tegaki.tagId > 1)
										<a href="../VSearchBlogByTagS.jsp?GD=${tegaki.tagId}">
											<img src="${tegaki.tagFileName}"/>
										</a>
#else
										<img src="${tegaki.tagFileName}" />
#end
									</td>
									<td class="BlogTemplate">
#if($tegaki.getImg(0).template.fileName != "")
  #if(${tegaki.getImg(0).template.templateId} > 0)
										<a href="../VSearchBlogByTemplateS2.jsp?PD=${tegaki.getImg(0).template.templateId}" >
  #end
											<img src="${tegaki.getImg(0).template.fileName}" />
  #if(${tegaki.getImg(0).template.templateId} > 0)
										</a>
  #end
#end
									</td>
									<td class="BlogCmd">
										<a href="javascript:OpenDotList('../VBlogDotListS.jsp?PG=0&ID=$user.userId&TD=$tegaki.tegakiId');">
#foreach($heart in $heartList)
											<img class="BlogCmdHeartIcon" src="$heart" />
#end
										</a>
										&nbsp;
										<a href="javascript:OpenDot('../VCreateDotS.jsp?ID=$user.userId&TD=$tegaki.tegakiId');"><img class="EditHeartIcon" src="http://img01.pipa.jp/tegaki/img/EditHeartIcon.gif" /></a>
									</td>
								</tr>
							</table>

							
							<div class="BlogDetail">
								<img src="${tegaki.getImg(0).fileName}" class="BlogImgFull" alt="$tegaki.title" />
							</div>
		
							<div class="BlogCommentTop">
								comment
							</div>
							<div class="CommentNameCmd"></div>

					
							<!-- 削除できません -->$comments<!-- 削除できません -->

							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; New</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">Blog list</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">Old &gt;</a>
#end
									</td>
								</tr>
							</table>
						</div>
						<div class="BlogThumbFullEnd"></div>
					</div>
				</div>
			</div>

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle"></div>
				<div id="SideBarBody">
				
					<!-- 広告は削除できません -->
					<!--
					・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
					・広告の一部及び全てを隠蔽するような加工をすることはできません。
					・広告の一部及び全てが不鮮明になるような加工をすることはできません。
					-->
					<div class="SideBarItem" style="padding: 0;">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 広告は削除できません -->
					
					<div class="SideBarItem">
						<div class="SideBarItemTitleProfile"></div>
						<div class="MyNickname">
							$user.nickname
						</div>
	
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
							<img src="$user.image009" />
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
						<!-- ブログカテゴリ -->

						<!-- タグごとの投稿数 -->
						<div class="WidgetPane">
							<div class="WidgetTitle">よく使うタグ</div>
							<div class="WidgetItemList">$blogNumByTag</div>
						</div>
						<!-- タグごとの投稿数 -->

						<!-- お気に入りタグ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
						</div>
						<!-- お気に入りタグ -->
						<!-- ウィジェット -->
					</div><!-- SideBarItem -->
	
					<!-- リンク -->
					<div class="SideBarItem">
						<div class="SideBarItemTitleLink"></div>
						<div class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center 0px;"></div>
						<div class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -40px;"></div>
						<div class="MyLinkBanner" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -80px;"></div>
					</div>
					<!-- リンク -->
	
					<!-- ブログパーツ-->
					<div class="SideBarItem">
						<div class="MyBlogParts">$blogParts</div>
					</div>
					<!-- ブログパーツ-->
				</div><!-- SideBarBody -->
				<div id="SideBarEnd"></div>
			</div><!-- SideBar -->
			<!-- メニューペイン -->
			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!--Wrapper-->
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>

posted by at 2011-09-16 23:01 | 手書きブログ |

手ブロ新デザイン : 右サイドをもう少し大きく使える一覧画面のテンプレート

貼り付けるだけで使えるはずです。
失敗したら、旧画面に一度戻ってやりなおせばいいと思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

		<title>手書きブログ - $user.nickname さんのブログ一覧</title>

		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

		【遵守事項】
		・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
		・広告の一部及び全てを隠蔽するような加工をすることはできません。
		・広告の一部及び全てが不鮮明になるような加工をすることはできません。
		・広告のクリックを誘導することはできません。
		・株式会社pipa.jpが掲載する広告以外の広告を直接的及び間接的に掲載することはできません。
		・Java Scriptやobjectタグを用いたブログパーツ等を利用することはできません。
		　(手書きブログのブログパーツを除く)
		・その他HTMLソース内部に記載された指示に従って下さい。

		【免責事項】
		・β版のため任意のタイミングでデザインに関するデータをすべて消去する可能性があります。
		　運営側でバックアップを取ることはできませんので各自バックアップ必ずお取り下さい。
		・利用方法に関する個別のお問い合わせには対応いたしません。
		-->
		<!-- HTML編集規定 -->

		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #777777;
			background-color:#ffffff;
		}
		
		a {
			color: #777777;
		}

		#Wrapper {
			width: 1200px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px 16px 0px 16px;
		}

		.PageBar{
			text-align: center;
			float: left;
			width: 100%;
			font-size: 12px;
			margin: 10px 0px 10px 0px;
		}

		.PageBar span{
			float: left;
			display: block;
			padding: 0;
			width: 35px;
			height: 35px;
			text-align:center;
			white-space: nowrap;
			overflow: hidden;
			line-height: 35px;
			padding: 10px;
			background-image: url('$user.image003');
		}

		.PageBar span:hover {
			background-color:#eeeeee;
			cursor: pointer;
		}

		.PageBar .Selected {
			font-weight: bold;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 200px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 540px;
		}
		
		#SideBarTitle {
			float: left;
			width: 300px;
			height: 10px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#SideBarBody {
			float: left;
			width: 350px;
			height: auto;
			border: 0px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image005'); */
			background-position: left top;
			background-repeat: repeat;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 0px 10px 0px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}

		.SideBarItem .MyNickname {
			float: left;
			width: 100%;
			font-size: 20px;
			font-weight: bold;
			margin: 0;
		}
	
		.SideBarItem .MyImg {
			float: left;
			width: 100%;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			padding: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #cccccc;
			text-decoration: none;
			background-color: #ffffff;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #cccccc;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}
	
		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 300px;
			height: 40px;
			padding: 0px 25px 0px 25px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 246px;
			height: auto;
			margin: 5px 27px 20px 27px;
			background-color: #FFFFFF;
			color: #555555;
		}

		.WidgetPane .WidgetTitle {
			width: 300px;
			background-color: #dddddd;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 300px;
			height: auto;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
			border-bottom: 1px solid #dddddd;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #555555;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #888888;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 651px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 651px;
			padding: 0px;
			margin-bottom: 20px;
			border: 0;
		}

		.BlogThumb {
			font-size: x-small;
			text-align: center;
			float: left;
			width: 190px;
			height: 190px;
			padding: 10px 20px 20px 7px;
			background-image:url('$user.image002');
			background-position: left top;
			background-repeat: no-repeat;
		}

		.BlogThumb .BlogImg {
			display: block;
			float: left;
			width: 190px;
			height: 160px;
			background-position: 50% 50%;
			background-repeat: no-repeat;
		}

		.BlogThumb .BlogInfo{
			float: left;
			width: 100%;
		}

		.BlogThumb .BlogInfo .BlogTitle {
			float: left;
			width: 100%;
			height: 15px;
			line-height: 15px;
			font-size: 11px;
			overflow: hidden;
			white-space: nowrap;
		}

		.BlogThumb .BlogInfo .BlogDate {
			float: left;
			width: 100%;
			height: 15px;
			line-height: 15px;
			font-size: 9px;
			overflow: hidden;
			white-space: nowrap;
		}
		</style>
	</head>
 
	<body>
		$VBlogListHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- コンテンツペイン -->
			<div id="Contents">
				<div class="ContentsList">
					<div style="width: 100%;">
#foreach($tegaki in $tegakiList)
						<div class="BlogThumb">
#if($tegaki.tegakiId!=-1)
							<a href="../$user.userId/${tegaki.tegakiId}.html" class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');">
							</a>
#else
							<div class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');">
							</div>
#end
							<div class="BlogInfo">
								<div class="BlogTitle">$tegaki.title</div>
								<div class="BlogDate">
									<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" title="コメント$tegaki.commentNum件" alt="コメント$tegaki.commentNum件" />x$tegaki.commentNum
									&nbsp;
									$tegaki.uploadDateText
								</div>
							</div>
						</div><!-- BlogThumb -->
#end
					</div>

					<div class="PageBar">$pageMenu</div>
				</div><!-- ContentsList -->
			</div><!-- Contents -->
			<!-- コンテンツペイン -->

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle"></div>
				<div id="SideBarBody">
					
					<!-- 広告は削除できません -->
					<!--
					・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
					・広告の一部及び全てを隠蔽するような加工をすることはできません。
					・広告の一部及び全てが不鮮明になるような加工をすることはできません。
					-->
					<div class="SideBarItem" style="padding: 0;">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 広告は削除できません -->
					
					<div class="SideBarItem">
						<div class="SideBarItemTitleProfile"></div>
						<div class="MyNickname">
							<!-- $user.nickname -->
						</div>
	
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
							<img src="$user.image009" />
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
						<!-- ブログカテゴリ -->

						<!-- タグごとの投稿数 -->
						<div class="WidgetPane">
							<div class="WidgetTitle">よく使うタグ</div>
							<div class="WidgetItemList">$blogNumByTag</div>
						</div>
						<!-- タグごとの投稿数 -->

						<!-- お気に入りタグ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
						</div>
						<!-- お気に入りタグ -->
						<!-- ウィジェット -->
					</div><!-- SideBarItem -->
	
					<!-- リンク -->
					<div class="SideBarItem">
						<div class="SideBarItemTitleLink"></div>
						<div class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center 0px;"></div>
						<div class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -40px;"></div>
						<div class="MyLinkBanner" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -80px;"></div>
					</div>
					<!-- リンク -->
	
					<!-- ブログパーツ-->
					<div class="SideBarItem">
						<div class="MyBlogParts">$blogParts</div>
					</div>
					<!-- ブログパーツ-->
				</div><!-- SideBarBody -->
				<div id="SideBarEnd"></div>
			</div><!-- SideBar -->
			<!-- メニューペイン -->

			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!-- Wrapper -->
		
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>

posted by at 2011-09-16 22:59 | 手書きブログ |

手ブロ新デザイン : 詳細部分のデフォルトテンプレート

一般の人には、デザインの変更は敷居が高すぎるので、今後は「書ける人」
がテンプレートを提供するのが普通の流れだと思います。

スクリプトやIFRAME は使えませんが、今のところ外部へのリンクや外部に
ある画像を使うのが問題になるとも思えないので、画像を外部に置きたい
場合は、Google アカウントで使える Picasa がおすすめです。

※ Picasa は、URL の指定で元の画像を縮小して利用する事ができます

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

		<title>手書きブログ - $user.nickname さんのブログ</title>
		
		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

		【遵守事項】
		・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
		・広告の一部及び全てを隠蔽するような加工をすることはできません。
		・広告の一部及び全てが不鮮明になるような加工をすることはできません。
		・広告のクリックを誘導することはできません。
		・株式会社pipa.jpが掲載する広告以外の広告を直接的及び間接的に掲載することはできません。
		・Java Scriptやobjectタグを用いたブログパーツ等を利用することはできません。
		　(手書きブログのブログパーツを除く)
		・その他HTMLソース内部に記載された指示に従って下さい。

		【免責事項】
		・β版のため任意のタイミングでデザインに関するデータをすべて消去する可能性があります。
		　運営側でバックアップを取ることはできませんので各自バックアップ必ずお取り下さい。
		・利用方法に関する個別のお問い合わせには対応いたしません。
		-->
		<!-- HTML編集規定 -->

		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #777777;
			background-color:#ffffff;
		}
		
		a {
			color: #777777;
		}

		#Wrapper {
			width: 988px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px 16px 0px 16px;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 200px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 327px;
		}
		
		#SideBarTitle {
			float: left;
			width: 300px;
			height: 10px;
			padding: 0px 20px 0px 7px;
			background-image: url('$user.image004');
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#SideBarBody {
			float: left;
			width: 300px;
			height: auto;
			border: 0px;
			padding: 0px 20px 0px 7px;
			background-image: url('$user.image005');
			background-position: left top;
			background-repeat: repeat;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
			background-image: url('$user.image004');
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 0px 10px 0px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}
	
		.SideBarItem .MyNickname {
			float: left;
			width: 100%;
			font-size: 20px;
			font-weight: bold;
			margin: 0;
		}
	
		.SideBarItem .MyImg {
			float: left;
			width: 100%;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			padding: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #cccccc;
			text-decoration: none;
			background-color: #ffffff;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #cccccc;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}

		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 250px;
			height: 40px;
			padding: 0px 25px 0px 25px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 246px;
			height: auto;
			margin: 5px 27px 20px 27px;
			background-color: #FFFFFF;
			color: #555555;
		}

		.WidgetPane .WidgetTitle {
			width: 244px;
			background-color: #dddddd;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 244px;
			height: auto;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
			border-bottom: 1px solid #dddddd;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #555555;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #888888;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 651px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 651px;
			padding: 0px;
			margin-bottom: 20px;
			border: 0;
		}

		.BlogThumbFull {
			float: left;
			width: 100%;
			text-align: center;
		}
		
		.BlogThumbFull .BlogThumbFullTitle {
			float: left;
			width: 624px;
			height: 10px;
			padding: 0px 20px 0px 7px;
			background-image:url('$user.image007');
			background-position: left top;
			background-repeat: no-repeat;
		}

		.BlogThumbFull .BlogThumbFullBody {
			float: left;
			width: 600px;
			padding: 0px 30px 0px 21px;
			background-image:url('$user.image008');
			background-position: left bottom;
			background-repeat: repeat;
		}

		.BlogThumbFull .BlogThumbFullEnd {
			float: left;
			width: 624px;
			height: 20px;
			padding: 0px 20px 0px 7px;
			background-image:url('$user.image007');
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		.BlogThumbFull .NaviBar {
			width: 100%;
			margin: 5px 0px 5px 0px;
		}
		
		.BlogThumbFull .NaviBar .Navi_P,
		.BlogThumbFull .NaviBar .Navi_C,
		.BlogThumbFull .NaviBar .Navi_N {
			width: 33%;
		}

		.BlogThumbFull .BlogInfoFull {
			width: 100%;
			margin: 5px 0px 0px 0px;
			text-align: left;
		}

		.BlogThumbFull .BlogInfoFull img {
			border: none;
		}
				
		.BlogThumbFull .BlogInfoFull .BlogCmd {
			text-align: right;
			font-size: 0px;
			font-size: 0em;
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .BlogCmdHeartIcon {
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .EditHeartIcon {
			margin-left: 5px;
		}

		.BlogThumbFull .BlogInfoFull .BlogDate {
			font-size: 11px;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle {
			font-size: 26px;
			font-weight: bold;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle .BlogTitleComment {
			font-size: 11px;
			font-weight: normal;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag img {
			border: solid 1px #dddddd;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate img {
			height: 60px;
			border: solid 1px #dddddd;
		}
		
		/*** コメント ***/
		.CommentDetail {
			text-align: center;
		}
		
		.CommentDetail .CmtImg {
			text-align: center;
			border: solid 1px #dddddd;
			width: 480px;
			height: 160px;
			margin: 0px auto 0px auto;
		}

		.CommentDetail .CommentName {
			height: 15px;
		}
		
		#PalletPaneH {
			text-align: center;
			width: 484px;
			background-color:#ffffff;
			margin: 0px auto 0px auto;
		} 
				
		#PalletPaneH .PalletButtonTitle {
			font-size: x-small;
			text-align: center;
			background-color: #dddddd;
		}

		#PalletPaneH #ColorButton,
		#PalletPaneH #PenButton {
			border-collapse:collapse;
			border:0px;
		}

		#PalletPaneH #ColorButton td,
		#PalletPaneH #PenButton td
			{
			border:none;
			padding:0px;
			text-align:center;
			background-color:#ffffff;
			cursor: pointer;
		}

		#PalletPaneH #PenButton td {
			width: 15px;
		}

		#PalletPaneH #ColorButton td:hover,
		#PalletPaneH #PenButton td:hover {
			background-color: #bbccff;
		}

		#PalletPaneH .PalleteCommand {
			text-align: center;
		}

		#PalletPaneH .PalleteCommand select {
			font-size: x-small;
		}

		#PalletPaneH #ColorButton .Color {
			width:14px;
			height:28px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow {
			width:14px;
			height:15px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow .ColorRainbowPart {
			border: none;
			width:14px;
			height:3px;
			font-size: 0em;
		}

		#PalletPaneH #PenButton .PenWidth
		{
			font-size: 1px;
			border: solid 1px #eeeeee;
			background-color:#000000;
			margin:3px 1px 3px 1px;
			margin-left: auto;
			margin-right: auto;
			height: 28px;
		}

		#PalletPaneH #UndoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/UndoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #UndoButton:hover {
			background-color: #bbccff;
		}

		#UploadCmd {
			width: 100%;
			border-collapse:collapse;
			text-align: center;
			border: 0px;
			margin: 2px 0px 15px 0px;
		}

		#UploadCmd .UploadButton {
			width: 56px;
			height: 23px;
			border: none;
			background: url(http://img01.pipa.jp/tegaki/img/UploadButton3.png) no-repeat 0 0;
			font-size: 0em;
			color: #ffffff;
			cursor: pointer;
			vertical-align: top;
		}
		#PalletPaneH #RedoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/RedoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #RedoButton:hover {
			background-color: #bbccff;
		}
		/*** コメント ***/
		</style>
	</head>
 
	<body>
		$VBlogHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- コンテンツペイン -->
			<div id="Contents">
				<div class="ContentsList">
					<div class="BlogThumbFull">
						<div class="BlogThumbFullTitle"></div>
						<div class="BlogThumbFullBody">
							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; New</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">Blog list</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">Old &gt;</a>
#end
									</td>
								</tr>
							</table>

		
							<table class="BlogInfoFull">
								<tr>
									<td class="BlogDate">$tegaki.uploadDateText</td>
									<td class="BlogCmd">
										<a href="$tweetURL" target="_blank">
										<img src="http://img01.pipa.jp/tegaki/img/tweet_icon.png" border="0" alt="このブログをツイートする" style="vertical-align:middle;"/>
										</a>
									</td>
								</tr>
								<tr>
									<td class="BlogTitle">
										$tegaki.title
										<span class="BlogTitleComment">
											<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" alt="コメント" /> x $tegaki.commentNum
										</span>
									</td>
									<td class="BlogCmd">
										$bookmarkButton
									</td>
								</tr>
							</table>

		
							<table class="BlogInfoFull">
								<tr>
									<td class="BlogTag">Tag</td>
									<td class="BlogTemplate">Template</td>
									<td class="BlogCmd"></td>
								</tr>
								<tr>
									<td class="BlogTag">
#if($tegaki.tagId > 1)
										<a href="../VSearchBlogByTagS.jsp?GD=${tegaki.tagId}">
											<img src="${tegaki.tagFileName}"/>
										</a>
#else
										<img src="${tegaki.tagFileName}" />
#end
									</td>
									<td class="BlogTemplate">
#if($tegaki.getImg(0).template.fileName != "")
  #if(${tegaki.getImg(0).template.templateId} > 0)
										<a href="../VSearchBlogByTemplateS2.jsp?PD=${tegaki.getImg(0).template.templateId}" >
  #end
											<img src="${tegaki.getImg(0).template.fileName}" />
  #if(${tegaki.getImg(0).template.templateId} > 0)
										</a>
  #end
#end
									</td>
									<td class="BlogCmd">
										<a href="javascript:OpenDotList('../VBlogDotListS.jsp?PG=0&ID=$user.userId&TD=$tegaki.tegakiId');">
#foreach($heart in $heartList)
											<img class="BlogCmdHeartIcon" src="$heart" />
#end
										</a>
										&nbsp;
										<a href="javascript:OpenDot('../VCreateDotS.jsp?ID=$user.userId&TD=$tegaki.tegakiId');"><img class="EditHeartIcon" src="http://img01.pipa.jp/tegaki/img/EditHeartIcon.gif" /></a>
									</td>
								</tr>
							</table>

							
							<div class="BlogDetail">
								<img src="${tegaki.getImg(0).fileName}" class="BlogImgFull" alt="$tegaki.title" />
							</div>
		
							<div class="BlogCommentTop">
								comment
							</div>
							<div class="CommentNameCmd"></div>

					
							<!-- 削除できません -->$comments<!-- 削除できません -->

							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; New</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">Blog list</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">Old &gt;</a>
#end
									</td>
								</tr>
							</table>
						</div>
						<div class="BlogThumbFullEnd"></div>
					</div>
				</div>
			</div>

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle"></div>
				<div id="SideBarBody">
				
					<!-- 広告は削除できません -->
					<!--
					・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
					・広告の一部及び全てを隠蔽するような加工をすることはできません。
					・広告の一部及び全てが不鮮明になるような加工をすることはできません。
					-->
					<div class="SideBarItem" style="padding: 0;">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 広告は削除できません -->
					
					<div class="SideBarItem">
						<div class="SideBarItemTitleProfile"></div>
						<div class="MyNickname">
							$user.nickname
						</div>
	
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
							<img src="$user.image009" />
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
						<!-- ブログカテゴリ -->

						<!-- タグごとの投稿数 -->
						<div class="WidgetPane">
							<div class="WidgetTitle">よく使うタグ</div>
							<div class="WidgetItemList">$blogNumByTag</div>
						</div>
						<!-- タグごとの投稿数 -->

						<!-- お気に入りタグ -->
						<!--
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
						</div>
						-->
						<!-- お気に入りタグ -->
						<!-- ウィジェット -->
					</div><!-- SideBarItem -->
	
					<!-- リンク -->
					<!--
					<div class="SideBarItem">
						<div class="SideBarItemTitleLink"></div>
						<div class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center 0px;"></div>
						<div class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -40px;"></div>
						<div class="MyLinkBanner" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -80px;"></div>
					</div>
					 -->
					<!-- リンク -->
	
					<!-- ブログパーツ-->
					<!--
					<div class="SideBarItem">
						<div class="MyBlogParts">$blogParts</div>
					</div>
					 -->
					<!-- ブログパーツ-->
				</div><!-- SideBarBody -->
				<div id="SideBarEnd"></div>
			</div><!-- SideBar -->
			<!-- メニューペイン -->
			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!--Wrapper-->
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>

posted by at 2011-09-16 22:03 | 手書きブログ |

手ブロ新デザイン : 一覧画面のデフォルトテンプレート

今後変わるかもしれませんが、デザインを変更した後デフォルトに戻したい時に使います

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

		<title>手書きブログ - $user.nickname さんのブログ一覧</title>

		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

		【遵守事項】
		・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
		・広告の一部及び全てを隠蔽するような加工をすることはできません。
		・広告の一部及び全てが不鮮明になるような加工をすることはできません。
		・広告のクリックを誘導することはできません。
		・株式会社pipa.jpが掲載する広告以外の広告を直接的及び間接的に掲載することはできません。
		・Java Scriptやobjectタグを用いたブログパーツ等を利用することはできません。
		　(手書きブログのブログパーツを除く)
		・その他HTMLソース内部に記載された指示に従って下さい。

		【免責事項】
		・β版のため任意のタイミングでデザインに関するデータをすべて消去する可能性があります。
		　運営側でバックアップを取ることはできませんので各自バックアップ必ずお取り下さい。
		・利用方法に関する個別のお問い合わせには対応いたしません。
		-->
		<!-- HTML編集規定 -->

		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #777777;
			background-color:#ffffff;
		}
		
		a {
			color: #777777;
		}

		#Wrapper {
			width: 988px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px 16px 0px 16px;
		}

		.PageBar{
			text-align: center;
			float: left;
			width: 100%;
			font-size: 12px;
			margin: 10px 0px 10px 0px;
		}

		.PageBar span{
			float: left;
			display: block;
			padding: 0;
			width: 35px;
			height: 35px;
			text-align:center;
			white-space: nowrap;
			overflow: hidden;
			line-height: 35px;
			padding: 10px;
			background-image: url('$user.image003');
		}

		.PageBar span:hover {
			background-color:#eeeeee;
			cursor: pointer;
		}

		.PageBar .Selected {
			font-weight: bold;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 200px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 327px;
		}
		
		#SideBarTitle {
			float: left;
			width: 300px;
			height: 10px;
			padding: 0px 20px 0px 7px;
			background-image: url('$user.image004');
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#SideBarBody {
			float: left;
			width: 300px;
			height: auto;
			border: 0px;
			padding: 0px 20px 0px 7px;
			background-image: url('$user.image005');
			background-position: left top;
			background-repeat: repeat;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
			background-image: url('$user.image004');
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 0px 10px 0px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}

		.SideBarItem .MyNickname {
			float: left;
			width: 100%;
			font-size: 20px;
			font-weight: bold;
			margin: 0;
		}
	
		.SideBarItem .MyImg {
			float: left;
			width: 100%;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			padding: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #cccccc;
			text-decoration: none;
			background-color: #ffffff;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #cccccc;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}
	
		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 250px;
			height: 40px;
			padding: 0px 25px 0px 25px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 246px;
			height: auto;
			margin: 5px 27px 20px 27px;
			background-color: #FFFFFF;
			color: #555555;
		}

		.WidgetPane .WidgetTitle {
			width: 244px;
			background-color: #dddddd;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 244px;
			height: auto;
			border-left: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
			border-bottom: 1px solid #dddddd;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #555555;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #888888;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 651px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 651px;
			padding: 0px;
			margin-bottom: 20px;
			border: 0;
		}

		.BlogThumb {
			font-size: x-small;
			text-align: center;
			float: left;
			width: 190px;
			height: 190px;
			padding: 10px 20px 20px 7px;
			background-image:url('$user.image002');
			background-position: left top;
			background-repeat: no-repeat;
		}

		.BlogThumb .BlogImg {
			display: block;
			float: left;
			width: 190px;
			height: 160px;
			background-position: 50% 50%;
			background-repeat: no-repeat;
		}

		.BlogThumb .BlogInfo{
			float: left;
			width: 100%;
		}

		.BlogThumb .BlogInfo .BlogTitle {
			float: left;
			width: 100%;
			height: 15px;
			line-height: 15px;
			font-size: 11px;
			overflow: hidden;
			white-space: nowrap;
		}

		.BlogThumb .BlogInfo .BlogDate {
			float: left;
			width: 100%;
			height: 15px;
			line-height: 15px;
			font-size: 9px;
			overflow: hidden;
			white-space: nowrap;
		}
		</style>
	</head>
 
	<body>
		$VBlogListHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- コンテンツペイン -->
			<div id="Contents">
				<div class="ContentsList">
					<div style="width: 100%;">
#foreach($tegaki in $tegakiList)
						<div class="BlogThumb">
#if($tegaki.tegakiId!=-1)
							<a href="../$user.userId/${tegaki.tegakiId}.html" class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');">
							</a>
#else
							<div class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');">
							</div>
#end
							<div class="BlogInfo">
								<div class="BlogTitle">$tegaki.title</div>
								<div class="BlogDate">
									<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" title="コメント$tegaki.commentNum件" alt="コメント$tegaki.commentNum件" />x$tegaki.commentNum
									&nbsp;
									$tegaki.uploadDateText
								</div>
							</div>
						</div><!-- BlogThumb -->
#end
					</div>

					<div class="PageBar">$pageMenu</div>
				</div><!-- ContentsList -->
			</div><!-- Contents -->
			<!-- コンテンツペイン -->

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle"></div>
				<div id="SideBarBody">
					
					<!-- 広告は削除できません -->
					<!--
					・広告は1024x768pxのモニタでスクロールせずに全てが見える位置に表示する必要があります。
					・広告の一部及び全てを隠蔽するような加工をすることはできません。
					・広告の一部及び全てが不鮮明になるような加工をすることはできません。
					-->
					<div class="SideBarItem" style="padding: 0;">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 広告は削除できません -->
					
					<div class="SideBarItem">
						<div class="SideBarItemTitleProfile"></div>
						<div class="MyNickname">
							<!-- $user.nickname -->
						</div>
	
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
							<img src="$user.image009" />
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
						<!-- ブログカテゴリ -->

						<!-- タグごとの投稿数 -->
						<div class="WidgetPane">
							<div class="WidgetTitle">よく使うタグ</div>
							<div class="WidgetItemList">$blogNumByTag</div>
						</div>
						<!-- タグごとの投稿数 -->

						<!-- お気に入りタグ -->
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
						</div>
						<!-- お気に入りタグ -->
						<!-- ウィジェット -->
					</div><!-- SideBarItem -->
	
					<!-- リンク -->
					<div class="SideBarItem">
						<div class="SideBarItemTitleLink"></div>
						<div class="MyLinkBanner" title="リンク1" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center 0px;"></div>
						<div class="MyLinkBanner" title="リンク2" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -40px;"></div>
						<div class="MyLinkBanner" title="リンク3" onclick="CheckLink('http://tegaki.pipa.jp/')" style="backGround-image: url('$user.image010'); background-position: center -80px;"></div>
					</div>
					<!-- リンク -->
	
					<!-- ブログパーツ-->
					<div class="SideBarItem">
						<div class="MyBlogParts">$blogParts</div>
					</div>
					<!-- ブログパーツ-->
				</div><!-- SideBarBody -->
				<div id="SideBarEnd"></div>
			</div><!-- SideBar -->
			<!-- メニューペイン -->

			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!-- Wrapper -->
		
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>

posted by at 2011-09-16 21:56 | 手書きブログ |

手ブロ新デザイン : 特定のテンプレートを使った時だけ、絵の上部にリンクを表示する

以下は、手書きブログ側の記述です。リンク先は自サイトの PHP ですが、
その絵の id を引き渡して、PHP 側でリダイレクトします。もし、特定
の記述が無ければ自分自身へとリダイレクトします

テンプレートの id は、テンプレページのそのテンプレートの画像の情報
より、PD=????? の ????? の部分の数字を使用します。

※ PHP を使用できない方は、固定でリンクを設定する事ができます。

<div class="BlogDetail" style='margin:8px 0 20px 0'>
#if($tegaki.getImg(0).template.fileName != "")
  #if(${tegaki.getImg(0).template.templateId} == 22643)
    <b><a href="http://tegaki.winofsql.jp/te/redirect.php?td=$tegaki.tegakiId" target="_blank" style='color:navy;font-size:16px;'><img src="http://tegaki.winofsql.jp/te/te_flink.png" style='border:solid 0px #000000' /></a></b>
  #end
#end
</div>


以下は、PHP のコードです

<?
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

if ( $_GET['td'] == '20418088' ) {
	header( "Location: http://palette4tegaki.seesaa.net/article/226165166.html" );
	exit();
}

header( "Location: http://tegaki.pipa.jp/61811/$id.html" );

?>

posted by at 2011-09-16 09:04 | 手書きブログ |

IE 用のみ、新デザインの画像編集に対応しました

まだ使ってる方は少ないので、必要無いとは思いますが対象ページの追加だけなので、対応しました。

カスタムパレットツールは、基本ソフトの「再インストール」が必要です。

同様に「対象ページの追加」だけなので、パレットプラグインの4.5も対応しました。キャッシュを削除すると使えるはずです。ただ、大きい画面では左上の隅に置くのが一番よさそうです。( Flash 使っている時は後ろに隠れます )

posted by at 2011-09-15 20:47 | カスタムパレットツール |

手ブロ新デザイン : 一般変数

以下が全てではありませんが、主に使えそうな変数の一覧です

一覧画面

$user.nickname	ニックネーム
$user.userId	ユーザーID
※ これらは #if を使って条件式の中に書く事ができます

※ 以下は、HTML が出力されます( 詳細画面と共通 )
$categoryList	よく使うタグ
$blogNumByTag	カテゴリリスト
$blogParts	ブログパーツ
$pageMenu	ページナビゲーター


詳細画面

$tegaki.tegakiId		詳細ページの id
$tegaki.title			タイトル
$tegaki.uploadDateText		更新日付
$tegaki.commentNum		コメント数
${tegaki.getImg(0).fileName}	画像URL
$tweetURL
※ これらは #if を使って条件式の中に書く事ができます
( 例 : 手ブロ新デザイン : ウインドウタイトル文字列の変更 )

この他、主に CSS で使用している画像の URL を持つ変数があります

posted by at 2011-09-14 21:41 | 手書きブログ |

手ブロ新デザイン : ページをナビゲートする HTML が出力される $pageMenu 変数

ページを動的にカスタマイズさせる為に、「変数」というものが用意されます。
$user.nickname というような単純な文字列の入る変数もありますが、$pageMenu
は HTML が出力されます。

通常は、画面下部にしかありませんが、同じものを画面上部に置けば、そちらにも
表示されます。

<div class="PageBar">$pageMenu</div>

posted by at 2011-09-14 21:27 | 手書きブログ |

手ブロ新デザイン : 日付部分へ編集ページへのリンクを入れる

日付部分に編集ページへのリンクを入れました。
※ 詳細画面用なので注意して下さい

HTML 編集で該当部分を変更すると、ログイン状態で使えます。
自分自身専用ですけれど、日付なんで目立たないので。

※ BlogDate というクラスで探すといいです

<td class="BlogDate"><a href="http://tegaki.pipa.jp/VEditBlogS4.jsp?TD=${tegaki.tegakiId}" target="_blank">$tegaki.uploadDateText</a></td>

posted by at 2011-09-14 21:09 | 手書きブログ |

手ブロ新デザイン : 今すぐ、とにかく「リンク」を使いたい場合



http://tegaki.pipa.jp/ を好きな URL に変更します



画像をオリジナルで使う場合は、40px づつ大きくして、4つ目は
background-position: center -120px; とかにすればいいと思います

うちでは下のようになってます

<div class="SideBarItem">
	<div ></div>
	<div style='margin: 0 0 20px 0' title="最強のハートエディタ" onclick="CheckLink('http://tegaki.winofsql.jp/create_heart.php')">ハートエディタ<br /><img src="http://lh5.googleusercontent.com/_IzfbcNjqGuE/Tc6GsGQ-o5I/AAAAAAAACm4/sPtKPkiV1Sc/s349/heart_save_load.png" style='cursor:pointer;border:solid 1px #000000' /></div>
	<div style='margin: 0 0 20px 0' title="カスタムパレットツール" onclick="CheckLink('http://palette4tegaki.seesaa.net/')">カスタムパレットツール<br /><img src="http://lh6.googleusercontent.com/-SdwqEbEdJdc/TjgHAk2n5JI/AAAAAAAADK4/wvhm52j5n3o/s349/tegaki_palette.png" style='cursor:pointer;border:solid 0px #000000' /></div>
	<div style='margin: 0 0 20px 0' title="パレットプラグイン" onclick="CheckLink('http://palette4tegaki.seesaa.net/article/147012039.html')">パレットプラグイン<br /><img src="http://lh6.googleusercontent.com/-9JVJTepdRWc/ThnN0PsUzwI/AAAAAAAAC_s/c3pTxFcTcxk/s369/pp1.png" style='cursor:pointer;border:solid 1px #000000' /></div>
	<div style='margin: 0 0 20px 0' title="フリーフォントで簡単ロゴ作成" onclick="CheckLink('http://lightbox.on.coocan.jp/html/fontImage.php')">フリーフォントで簡単ロゴ作成<br /><img src="http://winofsql.jp/fflogo.png" style='cursor:pointer;border:solid 1px #000000' /></div>
</div>

posted by at 2011-09-14 20:47 | 手書きブログ |

手ブロ新デザイン : ウインドウタイトル文字列の変更

デフォルトでこうなっていてもおかしく無い内容なのですが、pipa の中の人は
実際のブログにあまり詳しく無いかもしれませんし、自分でやればいいとは思い
ますが、一般の人には絶対解らない内容ではあります

#if($tegaki.title == "")
		<title>ごめんなさい、タイトル書いてません : 手書きブログ($user.nickname)</title>
#else
		<title>$tegaki.title : 手書きブログ($user.nickname)</title>
#end

これが全体のどの部分かは、こちらを参照して下さい。

手書きブログの新しいデザインのバックアップ : 詳細部分 : 9/14(水)

実際のページはこちらです。

IFRAME 使うのが禁止になってました・・・さすがベータ版(汗) : 手書きブログ(night wálker)

posted by at 2011-09-14 20:40 | 手書きブログ |

手書きブログの新しいデザインのバックアップ : 詳細部分 : 9/14(水)

@DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<!-- 削除できません -->$headerPart<!-- 削除できません -->

#if($tegaki.title == "")
		<title>ごめんなさい、タイトル書いてません : 手書きブログ($user.nickname)</title>
#else
		<title>$tegaki.title : 手書きブログ($user.nickname)</title>
#end
		
		<!-- 共通スタイル部 -->
		<style>
		body {
			font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
			font-size:11px;
			margin: 0;
			color: #777777;
			background-color:#ffffff;
		}
		
		a {
			color: #777777;
		}

		#Wrapper {
			width: 1180px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px 16px 0px 16px;
		}

		/* ヘッダペイン */
		#Header {
			float: left;
			width: 100%;
			height: 200px;
		}

		#HeaderTitle {
			display: block;
			float: left;
			width: 100%;
			height: 200px;
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#MyPageTitle {
			display: block;
			font-size: 28px;
			float: left;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
		}
		#MyPageSummary {
			display: block;
			float: left;
			width: 100%;
			height: 125px;
			text-align: left;
			overflow: hidden;
		}

		#MenuBar {
			float: left;
			width: 100%;
			height: 25px;
			font-size: 9px;
			font-weight: bold;
			padding: 2px 0 0 0;
		}

		#MenuBarLeft {
			float: left;
			padding: 0 10px 0 10px;
		}

		#MenuBarRight {
			float: right;
			padding: 0 18px 0 0;
			text-align: right;
		}

		#MenuBarRight .MenuItem {
			float: right;
			padding: 0 0 0 10px;
		}

		#MenuBarRight .MenuItem a {
			float: left;
			display: block;
			width: 109px;
			height: 23px;
		}

		#MenuBar a {
			color:#47301C;
			text-decoration: none;
		}
		/* ヘッダペイン */

		/* フッタペイン */
		#Footer {
			clear: both;
			width: 100%;
			text-align: center;
			padding: 20px 0px 20px 0px;
			font-size: 10px;
		}
		/* フッタペイン */
		</style>
		<!-- 共通スタイル部 -->

		<!-- メニューペイン -->
		<style>
		#SideBar {
			float: right;
			width: 500px;
		}
		
		#SideBarTitle {
			float: left;
			width: 500px;
			height: 10px;
			padding: 0px 20px 0px 7px;
		/*	background-image: url('$user.image004'); */
			background-position: left top;
			background-repeat: no-repeat;
		}
		
		#SideBarBody {
			float: left;
			width: 300px;
			height: auto;
			border: 0px;
			padding: 0px 20px 0px 7px;
/*			background-image: url('$user.image005'); */
			background-position: left top;
			background-repeat: repeat;
		}
		
		#SideBarEnd {
			float: left;
			width: 300px;
			height: 20px;
			padding: 0px 20px 0px 7px;
	/*		background-image: url('$user.image004'); */
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		#Ad300x250 {
			float: left;
			width: 300px;
			height: 252px;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem {
			float: left;
			width: 100%;
			padding: 0px 0px 0px 0px;
			margin-bottom: 10px;
			text-align: center;
		}

		.SideBarItem .SideBarItemTitleProfile {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center 0px;
			background-repeat: no-repeat;
		}

		.SideBarItem .SideBarItemTitleLink {
			float: left;
			width: 100%;
			height: 40px;
			background-image: url('$user.image006');
			background-position: center -40px;
			background-repeat: no-repeat;
		}
	
		.SideBarItem .MyNickname {
			float: left;
			width: 100%;
			font-size: 20px;
			font-weight: bold;
			margin: 0;
		}
	
		.SideBarItem .MyImg {
			float: left;
			width: 100%;
		}

		.SideBarItem .MyImg img {
			display: block;
			border: none;
			margin-left: auto;
			margin-right: auto;
		}
	
		.SideBarItem .MyProfileCmd {
			float: left;
			width: 100%;
			margin: 5px 0px 5px 0px;
		}
	
		.SideBarItem .MyProfileCmd .CmdButton {
			border: solid 1px #cccccc;
			text-decoration: none;
		}
		
		.SideBarItem .MyProfileCmd .CmdButton:HOVER {
			background-color: #f0f0f0;
		}
	
		.SideBarItem .MyProfileCmd .CmdButtonDisable {
			border: solid 1px #cccccc;
			color: #ffffff;
			background-color: #cccccc;
			text-decoration: none;
		}

		.SideBarItem .MyProfileCmd .BlogParts {
			width:68px;
			height:9px;
			border:none;
		}
	
		.SideBarItem .MyLinkBanner {
			display: block;
			float: left;
			width: 250px;
			height: 40px;
			padding: 0px 25px 0px 25px;
			cursor: pointer;
			font-size: 16px;
			line-height: 30px;
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-decoration: underline;
			background-repeat: no-repeat;
		}

		/*** サイドバーウィジェット ***/
		.WidgetPane {
			float: left;
			width: 349px;
			height: auto;
			margin: 5px 27px 20px 0px;
			background-color: #FFFFFF;
			color: #555555;
		}

		.WidgetPane .WidgetTitle {
			width: 349px;
			background-color: #dddddd;
			border-top: 1px solid #222222;
			border-left: 1px solid #222222;
			border-right: 1px solid #222222;
		}

		.WidgetPane .WidgetItemList {
			float: left;
			width: 349px;
			height: 198px;
/*			height: auto; */
			border-top: 1px solid #222222;
			border-left: 1px solid #222222;
			border-right: 1px solid #222222;
			border-bottom: 1px solid #222222;
			background-color: #ffffff;
		}

		.WidgetPane .WidgetItemList a {
			color: #555555;
		}

		.WidgetPane .WidgetItemList .BlogTag {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			color: #ffffff;
			text-decoration: none;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .BlogTag .BlogNum {
			width: 60px;
			height: 20px;
			margin: 40px 0 0 0;
			color: #ffffff;
			text-align: center;
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
			background-color: #888888;
		}

		.WidgetPane .ReadMore {
			float: left;
			width: 100%;
			text-align: right;
			padding: 4px 0 0 0;
			font-size: 85%;
		}

		.WidgetPane .WidgetItemList .BlogThumb {
			text-decoration: none;
			display: block;
			width: 60px;
			height: 80px;
			border-top: 1px solid #dddddd;
			border-right: 1px solid #dddddd;
		}

		.WidgetPane .WidgetItemList .Category {
			width: 100%;
			text-align: left;
			padding: 2px 0 2px 5px;
		}
		/*** サイドバーウィジェット ***/
		</style>
		<!-- メニューペイン -->

		<!-- コンテンツペイン -->
		<style>
		#Contents {
			float: left;
			width: 651px;
			height: auto;
		}

		.ContentsList {
			float: left;
			width: 651px;
			padding: 0px;
			margin-bottom: 20px;
			border: 0;
		}

		.BlogThumbFull {
			float: left;
			width: 100%;
			text-align: center;
		}
		
		.BlogThumbFull .BlogThumbFullTitle {
			float: left;
			width: 634px;
			height: 10px;
			padding: 0px 20px 0px 7px;
			background-image:url('$user.image007');
			background-position: left top;
			background-repeat: no-repeat;
		}

		.BlogThumbFull .BlogThumbFullBody {
			float: left;
			width: 607px;
			padding: 0px 30px 0px 21px;
			background-image:url('$user.image008');
			background-position: left bottom;
			background-repeat: repeat;
		}

		.BlogThumbFull .BlogThumbFullEnd {
			float: left;
			width: 634px;
			height: 20px;
			padding: 0px 20px 0px 7px;
			background-image:url('$user.image007');
			background-position: left bottom;
			background-repeat: no-repeat;
		}
		
		.BlogThumbFull .NaviBar {
			width: 100%;
			margin: 5px 0px 5px 0px;
		}
		
		.BlogThumbFull .NaviBar .Navi_P,
		.BlogThumbFull .NaviBar .Navi_C,
		.BlogThumbFull .NaviBar .Navi_N {
			width: 33%;
		}

		.BlogThumbFull .BlogInfoFull {
			width: 100%;
			margin: 5px 0px 0px 0px;
			text-align: left;
		}

		.BlogThumbFull .BlogInfoFull img {
			border: none;
		}
				
		.BlogThumbFull .BlogInfoFull .BlogCmd {
			text-align: right;
			font-size: 0px;
			font-size: 0em;
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .BlogCmdHeartIcon {
		}

		.BlogThumbFull .BlogInfoFull .BlogCmd .EditHeartIcon {
			margin-left: 5px;
		}

		.BlogThumbFull .BlogInfoFull .BlogDate {
			font-size: 11px;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle {
			font-size: 26px;
			font-weight: bold;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTitle .BlogTitleComment {
			font-size: 11px;
			font-weight: normal;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTag img {
			border: solid 1px #dddddd;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate {
			width: 80px;
			text-align: center;
		}
		
		.BlogThumbFull .BlogInfoFull .BlogTemplate img {
			height: 60px;
			border: solid 1px #dddddd;
		}
		
		/*** コメント ***/
		.CommentDetail {
			text-align: center;
		}
		
		.CommentDetail .CmtImg {
			text-align: center;
			border: solid 1px #dddddd;
			width: 480px;
			height: 160px;
			margin: 0px auto 0px auto;
		}

		.CommentDetail .CommentName {
			height: 15px;
		}
		
		#PalletPaneH {
			text-align: center;
			width: 484px;
			background-color:#ffffff;
			margin: 0px auto 0px auto;
		} 
				
		#PalletPaneH .PalletButtonTitle {
			font-size: x-small;
			text-align: center;
			background-color: #dddddd;
		}

		#PalletPaneH #ColorButton,
		#PalletPaneH #PenButton {
			border-collapse:collapse;
			border:0px;
		}

		#PalletPaneH #ColorButton td,
		#PalletPaneH #PenButton td
			{
			border:none;
			padding:0px;
			text-align:center;
			background-color:#ffffff;
			cursor: pointer;
		}

		#PalletPaneH #PenButton td {
			width: 15px;
		}

		#PalletPaneH #ColorButton td:hover,
		#PalletPaneH #PenButton td:hover {
			background-color: #bbccff;
		}

		#PalletPaneH .PalleteCommand {
			text-align: center;
		}

		#PalletPaneH .PalleteCommand select {
			font-size: x-small;
		}

		#PalletPaneH #ColorButton .Color {
			width:14px;
			height:28px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow {
			width:14px;
			height:15px;
			border: solid 1px #eeeeee;
			margin:3px 1px 3px 1px;
		}

		#PalletPaneH #ColorButton .ColorRainbow .ColorRainbowPart {
			border: none;
			width:14px;
			height:3px;
			font-size: 0em;
		}

		#PalletPaneH #PenButton .PenWidth
		{
			font-size: 1px;
			border: solid 1px #eeeeee;
			background-color:#000000;
			margin:3px 1px 3px 1px;
			margin-left: auto;
			margin-right: auto;
			height: 28px;
		}

		#PalletPaneH #UndoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/UndoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #UndoButton:hover {
			background-color: #bbccff;
		}

		#UploadCmd {
			width: 100%;
			border-collapse:collapse;
			text-align: center;
			border: 0px;
			margin: 2px 0px 15px 0px;
		}

		#UploadCmd .UploadButton {
			width: 56px;
			height: 23px;
			border: none;
			background: url(http://img01.pipa.jp/tegaki/img/UploadButton3.png) no-repeat 0 0;
			font-size: 0em;
			color: #ffffff;
			cursor: pointer;
			vertical-align: top;
		}
		#PalletPaneH #RedoButton {
			color:#666666;
			font-size:xx-small;
			text-align:center;
			cursor:pointer;
			float:left;
			height:38px;
			width:34px;
			background: white url("http://img01.pipa.jp/tegaki/img/RedoV.png") no-repeat bottom center;
			margin: 0 auto;
		}

		#PalletPaneH #RedoButton:hover {
			background-color: #bbccff;
		}
		/*** コメント ***/
		</style>
	</head>
 
	<body>
		$VBlogHeaderPart

		<div id="Wrapper">
			<!-- 削除できません -->$menuBar<!-- 削除できません -->

			<!-- ヘッダペイン -->
			<div id="Header">
				<a href="../$user.userId/" id="HeaderTitle" style="background-image: url('$user.image001');">
					<span id="MyPageTitle"></span>
					<span id="MyPageSummary"></span>
				</a>
			</div><!-- Header -->
			<!-- ヘッダペイン -->

			<!-- コンテンツペイン -->
			<div id="Contents">
				<div class="ContentsList">
					<div class="BlogThumbFull">
						<div class="BlogThumbFullTitle"></div>
						<div class="BlogThumbFullBody">
							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; New</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">Blog list</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">Old &gt;</a>
#end
									</td>
								</tr>
							</table>

		
							<table class="BlogInfoFull">
								<tr>
									<td class="BlogDate"><a href="http://tegaki.pipa.jp/VEditBlogS.jsp?TD=${tegaki.tegakiId}" target="_blank">$tegaki.uploadDateText</a></td>
									<td class="BlogCmd">
										<a href="$tweetURL" target="_blank">
										<img src="http://img01.pipa.jp/tegaki/img/tweet_icon.png" border="0" alt="このブログをツイートする" style="vertical-align:middle;"/>
										</a>
									</td>
								</tr>
								<tr>
									<td class="BlogTitle">
										$tegaki.title
										<span class="BlogTitleComment">
											<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" alt="コメント" /> x $tegaki.commentNum
										</span>
									</td>
									<td class="BlogCmd">
										$bookmarkButton
									</td>
								</tr>
							</table>

		
							<table class="BlogInfoFull">
								<tr>
									<td class="BlogTag">Tag</td>
									<td class="BlogTemplate">Template</td>
									<td class="BlogCmd"></td>
								</tr>
								<tr>
									<td class="BlogTag">
#if($tegaki.tagId > 1)
										<a href="../VSearchBlogByTagS.jsp?GD=${tegaki.tagId}">
											<img src="${tegaki.tagFileName}"/>
										</a>
#else
										<img src="${tegaki.tagFileName}" />
#end
									</td>
									<td class="BlogTemplate">
#if($tegaki.getImg(0).template.fileName != "")
  #if(${tegaki.getImg(0).template.templateId} > 0)
										<a href="../VSearchBlogByTemplateS2.jsp?PD=${tegaki.getImg(0).template.templateId}" >
  #end
											<img src="${tegaki.getImg(0).template.fileName}" />
  #if(${tegaki.getImg(0).template.templateId} > 0)
										</a>
  #end
#end
									</td>

									<td class="BlogCmd">
										<a href="javascript:OpenDotList('../VBlogDotListS.jsp?PG=0&ID=$user.userId&TD=$tegaki.tegakiId');">
#foreach($heart in $heartList)
											<img class="BlogCmdHeartIcon" src="$heart" />
#end
										</a>
										&nbsp;
										<a href="javascript:OpenDot('../VCreateDotS.jsp?ID=$user.userId&TD=$tegaki.tegakiId');"><img class="EditHeartIcon" src="http://img01.pipa.jp/tegaki/img/EditHeartIcon.gif" /></a>
									</td>
<td style='width:60px;'>
<a href="http://tegaki.winofsql.jp/create_heart.php" target="_blank">エディタ</a>
</td>
								</tr>
							</table>

							
							<div class="BlogDetail">
								<img src="${tegaki.getImg(0).fileName}" class="BlogImgFull" alt="$tegaki.title" />
							</div>
		
							<div class="BlogCommentTop">
								comment
							</div>
							<div class="CommentNameCmd"></div>

#if( ${tegaki.getImg(0).fileName} == "http://img01.pipa.jp/tegaki/user_img2/12247/1224779540080581.png" )
<br /><br />
<a href="http://palette4tegaki.seesaa.net/article/225117040.html" target="_blank"><b style='font-size:14px;color:#00f'>かつての埋め込み方法はこちらをご覧下さい</b></a>
<br /><br />
<!--iframe width="420" height="345" src="http://www.youtube.com/embed/KwZOZvEOdcs" frameborder="0" allowfullscreen></iframe-->
<br /><br />
#end
					
							<!-- 削除できません -->$comments<!-- 削除できません -->

							<table class="NaviBar">
								<tr>
									<td class="Navi_N">
#if($tegakiNext.tegakiId > 0)
									<a href="${tegakiNext.tegakiId}.html">&lt; New</a>
#end
									</td>
									<td class="Navi_C">
									<a href="index.html">Blog list</a>
									</td>
									<td class="Navi_P">
#if($tegakiPrev.tegakiId > 0)
									<a href="${tegakiPrev.tegakiId}.html">Old &gt;</a>
#end
									</td>
								</tr>
							</table>
						</div>
						<div class="BlogThumbFullEnd"></div>
					</div>
				</div>
<!--iframe
   src="http://tegaki.winofsql.jp/night.php?t=${tegaki.getImg(0).fileName}"
   height="1200"
   width="651"
   frameborder="0"
   scrolling="no"
></iframe-->
			</div>

			<!-- メニューペイン -->
			<div id="SideBar">
				<div id="SideBarTitle"></div>
				<div id="SideBarBody">
				
					<!-- 削除できません -->
					<div class="SideBarItem" style="padding: 0 0 0 20px;">
						<div id="Ad300x250"> $ad300x250 </div>
					</div>
					<!-- 削除できません -->
					
					
					<div class="SideBarItem">
						<div class="SideBarItemTitleProfile"></div>
						<div class="MyNickname">
							$user.nickname
						</div>
	
						<div class="MyImg">
							<a href="../$user.userId/">
								<img src="$user.myProfileImage001" alt="ブログ一覧" />
							</a>
							<img src="http://lh5.googleusercontent.com/-TLp0Q_inSj8/TmYSDGGiEWI/AAAAAAAADYA/1hilN9ty7AY/s349/freefont_hanko_hksoukk.png" />
						</div>
	
						<div class="MyProfileCmd">
#if($thisPage.isMyPage == false)
  #if($thisPage.isMyFavoritePage == false)
							<a href="$addFavoriteURL" class="CmdButton">お気に入り</a>
  #else
							<span class="CmdButtonDisable">お気に入り中</span>
  #end
  #if($thisPage.isMyFriendPage == false)
							<a href="$requestFrinedURL" class="CmdButton">友達申請</a>
  #else
							<span class="CmdButtonDisable">友達申請済</span>
  #end
							<a href="$sendMessageURL" class="CmdButton">メッセージ</a>

							<a href="../bloglist.rss?ID=$user.userId" class="CmdButton">RSS</a>
#end
						</div>
	
						<!-- ウィジェット -->
						<!-- ブログカテゴリ -->
						<div class="WidgetPane" style='position:relative'>
							<img src="https://lh5.googleusercontent.com/-RhOUuAGiVQo/Tlh-gHvM_zI/AAAAAAAADU4/AhMvUa-zAxw/s200/0826.jpg" style='border:solid 0px #000000;position:absolute;left:150px;top:18px' />
							<div class="WidgetTitle">ブログカテゴリ</div>
							<div class="WidgetItemList">$categoryList</div>
						</div>
						<!-- ブログカテゴリ -->

						<!-- お気に入りタグ -->
						<!--
						<div class="WidgetPane">
							<div class="WidgetTitle">お気に入りタグ</div>
							<div class="WidgetItemList">$favoriteTagList</div>
							<div class="ReadMore"><a href="../$user.userId/profile.html">もっと見る&gt;&gt;</a></div>
						</div>
						-->
						<!-- お気に入りタグ -->
						<!-- ウィジェット -->
					</div><!-- SideBarItem -->
	
					<!-- リンク -->
					<div class="SideBarItem">
						<div ></div>
						<div style='margin: 0 0 20px 0' title="最強のハートエディタ" onclick="CheckLink('http://tegaki.winofsql.jp/create_heart.php')">ハートエディタ<br /><img src="http://lh5.googleusercontent.com/_IzfbcNjqGuE/Tc6GsGQ-o5I/AAAAAAAACm4/sPtKPkiV1Sc/s349/heart_save_load.png" style='cursor:pointer;border:solid 1px #000000' /></div>
						<div style='margin: 0 0 20px 0' title="カスタムパレットツール" onclick="CheckLink('http://palette4tegaki.seesaa.net/')">カスタムパレットツール<br /><img src="http://lh6.googleusercontent.com/-SdwqEbEdJdc/TjgHAk2n5JI/AAAAAAAADK4/wvhm52j5n3o/s349/tegaki_palette.png" style='cursor:pointer;border:solid 0px #000000' /></div>
						<div style='margin: 0 0 20px 0' title="パレットプラグイン" onclick="CheckLink('http://palette4tegaki.seesaa.net/article/147012039.html')">パレットプラグイン<br /><img src="http://lh6.googleusercontent.com/-9JVJTepdRWc/ThnN0PsUzwI/AAAAAAAAC_s/c3pTxFcTcxk/s369/pp1.png" style='cursor:pointer;border:solid 1px #000000' /></div>
						<div style='margin: 0 0 20px 0' title="フリーフォントで簡単ロゴ作成" onclick="CheckLink('http://lightbox.on.coocan.jp/html/fontImage.php')">フリーフォントで簡単ロゴ作成<br /><img src="http://winofsql.jp/fflogo.png" style='cursor:pointer;border:solid 1px #000000' /></div>
					</div>
					<!-- リンク -->

					<!-- タグごとの投稿数 -->
					<div class="WidgetPane">
						<div class="WidgetTitle">よく使うタグ</div>
						<div class="WidgetItemList">$blogNumByTag</div>
					</div>
					<!-- タグごとの投稿数 -->


	
					<!-- ブログパーツ-->
					<!--
					<div class="SideBarItem">
						<div class="MyBlogParts">$blogParts</div>
					</div>
					 -->
					<!-- ブログパーツ-->
				</div><!-- SideBarBody -->
				<div id="SideBarEnd"></div>
			</div><!-- SideBar -->
			<!-- メニューペイン -->
			<!-- 削除できません -->$wrapperFooterPart<!-- 削除できません -->
		</div><!--Wrapper-->
		<!-- 削除できません -->$bodyFooterPart<!-- 削除できません -->
	</body>
</html>
@END

posted by at 2011-09-14 19:49 | 手書きブログ |

【今日(9/14)見たらIFRAME禁止になってました】=> ほんの一瞬、「手書きブログの特定の絵の下に YouTube を埋め込み」ができていました



ベータ版の為いつどうなるか解りませんが、仕様的にはごく普通の方法です。
既に書かれている記述方法や変数を見れば解ります。

※ あんのじょう、もう使えません

JavaScript は使えませんが、IFRAME は現在使えていると言う事です。

${tegaki.getImg(0).fileName} という変数は、画像の URL が入っていて、img
要素の中で使われているので使ってみたら、うまく動作しました。

これをたくさんすると、テンプレートが肥大しますが、ビルドされた HTML に
は関係無いページでは含まれないのであまり気にする必要も無いと思います。

<div class="BlogCommentTop">
	comment
</div>
<div class="CommentNameCmd"></div>
#if( ${tegaki.getImg(0).fileName} == "http://img01.pipa.jp/tegaki/user_img2/12247/1224779540080581.png" )
<br /><br />
<iframe width="420" height="345" src="http://www.youtube.com/embed/KwZOZvEOdcs" frameborder="0" allowfullscreen></iframe>
<br /><br />
#end

posted by at 2011-09-09 09:37 | 手書きブログ |

DAZ3D : Night Hawk Vampire #3

posted by at 2011-08-27 02:18 | DAZ3D DAZStudio イラスト : Night Hawk Vampire |

<<前の31件 .. 3 4 5 6 7.. 次の31件>>

	透過PNGで、ドロップシャドウを可能にしました / フリーフォントで簡単ロゴ作成
	合成画像サンプルの画像を 12 枚追加しました : フリーフォントで簡単ロゴ作成
	JavaScript 内で使用する、キャラクタセットに依存しない日本語文字列を作成する
	翔ぶ、バタフライ
	地域毎に、Yahoo! のTV番組表を今の時間から24時間表示するボタンをページに表示する
	DAZ3D : ドラゴンと少女 / 魔法発動
	DAZ3D : 日本刀とバンパイア
	ダウンロードリンク等をその場で作成
	Google 翻訳ブックマークレット
	フリーフォントでボタン素材作成サンプル
	Seesaa(またはさくらのブログ) の記事の一括編集で『コメント・公開設定・広告の表示・カテゴリ』を一括変更するブックマークレット
	表示中のページを斜めにして影を付けるブックマークレット
	階層を指定して Googleのドメイン内検索を実行
	Seesaa ブログのカテゴリをソートする
	フリーフォントで簡単ロゴ作成の参照画像
	ラノベPOP
	外字がとにかく豊富な、にしき的フォント『 Nishiki-teki 』
	画像の部分ダウンロード / フリーフォントで簡単ロゴ作成
	かなり印象的な『小学生が書いた字のような』フォント / Cheekふぉんとver1.01
	音楽動画がいろいろ

	カスタムパレットツール / 総合メニュー
	インストールから使い方まで
	パレットプラグイン ( 使用方法 )
	フレームで無い任意のページのディレクトリ階層を選択して Google の検索を行う
	カスタムパレットツールを含む全てのIE拡張メニューのメンテナンスツール