手書きブログ : Web Amusement Hyper Activity Land

TOP / 手書きブログ

手書きブログの『協賛会員』

最近は、GALLERIA ばかりなんですが、長年お世話になってるのでそれなりに中身知ってるので、いろいろ時々まとめています。

そんな中、こんなのに気が付きました、



手書きブログ - 協賛会員への申込

要するに『寄付』? いいえ、一口1ヶ月です
株式会社pipa.jpでは手書きブログの運営をご支援頂ける協賛会員を募集しております。
集まりました資金は手書きブログの回線やサーバ機器の維持費など、手書きブログの運営を支えるために利用いたします。
一口５００円からお申し込みが可能で、協賛会員にはささやかながらお礼として、いくつかの特典をご用意いたします。


まだ使ってませんが、『協賛会員になる』ポタン押すとそう書いてあります。一瞬寄付でずっとと思わせといて、実は一か月５００円の『有料サービス』です。
特典期間：1ヶ月 
※1口からお申込み可能です。
※特典は1口ごとに1ヶ月分付与されます。
※すでに協賛会員の方は特典期間が延長されます。

特典
✑ エディタのキャンバスサイズ変更機能β版の先行利用New!
✑ 投稿数の上限が10,000件にアップNew!
✑ お友達数の上限が1,000人にアップ
✑ お気に入りタグ数の上限が1,000件にアップ
✑ ブックマーク数の上限が1,000件にアップ
✑ お気に入りユーザ数の上限が1,000人にアップ


エディタのキャンバスサイズ変更って何でしょう。『先行利用』なんで、いずれリリースされるんですね。
予定には『コメント欄のサイズ変更機能β版の先行利用』ってのもあります。

予定
コメント欄のサイズ変更機能β版の先行利用
広告の一部非表示
メッセージのエディタがTegaki Hyper!にグレードアップ
メッセージのエディタでのキャンバスサイズ変更機能
送受信したメッセージの無期限保存


ここまで読んで来ると、結構なプレミアムサービスですね。そのうち、『何口でこの機能』とかありそうで、それはそれで面白そうですね。

お支払い方法

これは WebMoney です。コンビニで買って、WEB 上のおさいふにチャージするやつです。これはとてもお手軽です。まだ使って無いので ウェブマネー ウォレットが使えるかどうかは定かではありません・・・

ウェブマネー ウォレット

ひさしぶりにログインしたら、なんかとんでも無く高機能になっていました。残高もまだ、1600円もあるのも忘れていましたし、インターネットバンキングからチャージできるようです(前はできなかったと思う)。

調べてみると新しい機能一覧がありました

統合に伴うウォレット+の変更点
✑ プリペイド番号でチャージの機能追加
✑ セブン-イレブン　インターネット代金収納代行でチャージの機能追加
✑ インターネットバンキングによるチャージ（ケータイ用）の機能追加
✑ 特定サイト専用プリペイド番号発行の機能追加


なるほど。便利になってる

※ 楽天銀行は、やはり使えないそうです。

タグ：手書きブログ

posted by at 2013-02-17 19:59 | 手書きブログ

既存の絵を MzEditor で参照する : 手書きブログ

自分の絵はたぶん全てテンプレート扱いできると思います。

まず、新規で標準エディタを開きます。



次に、MzEditor を選択した時に、アドレスバーを見ると QD= という部分があるので、そこに既存の絵の番号をセットして表示してやると、MzEditor にその絵が表示されます



ここでは、『りゅう』の絵を使っているので、22587814 が目的の番号です



こんなふうにすれば出来上がりです



さらに、新規の場合はまだ他のエディタへ変更できるので、そのまま他のエディタに移動しても QD は引き継がれて元の絵は表示されたままになります。( ですが、レイヤー全体を MzEditor で保存して後から利用できるので、MzEditor で保存します )



上の絵は、『りゅう』の絵を参照した後、レイヤーを二つ追加して、人物を一番手前に置いて、人物と『りゅう』の間に色の付いた透過色で人物と『りゅう』のバランスを調整しています。



この後、左側のツールのフロッピーディスクアイコンで、レイヤー全体の保存をしておきます。これをしないで投稿してしまうと、レイヤーが統合されて一枚の絵になってしまいますので、必ず保存しておきます。

▼ 投稿画像『りゅうじょ』


最後にトリミング

『りゅうじょ』の絵の番号を使って、再び MzEditor で参照して、十字矢印キーアイコンを選択して画像を動かすと、外枠からはみ出た部分が消えるのでトリミングが出来上がります。その後、もう一枚レイヤーを追加して、ペイントツールで塗りつぶして出来上がりです。

■ レイヤーの追加は右下のアイコンの一番左
■ トリミングされた外側は透過になっています
■ 追加したレイヤーを選択してペイント
■ そのレイヤーを下へ移動すると背景になります

▼ 完成

posted by at 2012-08-28 00:13 | 手書きブログ

1280の幅をめいっぱい使う : 手書きブログのデザイン

広告の表示ルールとしてファーストビュー(最初に表示された状態)で広告がかならず表示される必要がありますが、外側の幅を1230に設定すると、padding とあわせて、1262 となってほぼ画面いっぱいにコンテンツを配置できます。

描いた絵の位置や、右サイドはそのままで左詰めになるので、広告も正しく表示されます。ここでめいっぱいの幅が使えるので、他のコンテンツを気兼ねなく大きいものに張り替える事ができるようになります。

そこで、まずタイトル画像に大きなものを張り付けてみます。タイトル画像は、画像パーツで $user.image001 に対してアップロードする事で設定されます。( 右下に緑色のフォルダアイコンがありますので、そこから PC の画像をアップロードします )





幅を 1230 にしなくても、他のコンテンツを大きくする事はできますが、ひょっとしていろいろやっているうちに影響が出るかもしれないので、まず入れ物を大きくしています。最終的に問題無ければ、幅を元に戻せば良いと思います

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

さて、タイトルにあわせて背景を黒くしたいのですが、そうするとメニューバーの文字の色も同時に変更する必要があります。

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;
}
#MenuBar a {
	color:#DDD1C7;
	text-decoration: none;
}



最後に、レイアウトの境界の色を変えるのに、4、5、7 を黒く塗りつぶしました。8の右端が絵と右サイドの境界色なので、以下のようにしています。



単色塗りは、CTRL + U です。



画像をアップロードしてもすぐ変更されない場合がありますが、それは同じ画像名なのに中身だけが変わったので、ブラウザがサーバーからデータを取り込もうとしないからです。その場合はブラウザのキャシュを削除して下さい。

関連する記事

IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット

posted by at 2012-08-18 14:05 | 手書きブログ

保存がてら、手書きブログの新デザインの内容

アカウント二つあるので、そちらでデザインのテストする為にリセットしようと思うのですが、もし設定が消えてしまったら悲しいので保存しました。ただ、そうとう内容が長いので、自サイトに貼りつけました

詳細定義
一覧定義

全体が長いのは、CSS 部分が多いからなので、これを外部にしてしまうとかなり楽になるのですが、CSS で使用している画像に専用変数が使われているのでこのまま使うしかありません。どうしても外部にしたい場合は、実際のページの CSS 部分を取り出して外部に置けばいいと思います
( 外部にする場合は、UTF8N で保存して下さい )

デフォルトでは、真ん中にセンタリングされていますが、これは #Wrapper に対して指定されている以下の CSS の auto でそうなっていますので、これを削除すれば左詰めになります。( あるいは、次でやるもりですが、幅をめいっぱいにすれば margin の auto 指定はそのままでも同じ事です。)

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

※ margin を削除します

▼ $user.nickname はユーザー名です。

<div class="MyNickname">
	$user.nickname
</div>



ユーザ名部分を『デザインテスト中』に置き換えてみました

posted by at 2012-08-17 19:49 | 手書きブログ

手書きブログの新デザインで、知らない間にメニューバーが設置されていたのですが、勝手に色設定してあるので見えませんでした。

 
もともと背景色を暗い色にしていたので、良く見えてませんでした。詳細側と一覧側を両方変更する必要がありますが、以下の位置の色コードを変更して下さい

#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:#DDD1C7;
	text-decoration: none;
}

posted by at 2012-08-16 20:52 | 手書きブログ

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

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 | 手書きブログ

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

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



この番号を使って、以下の内容になるようにして、詳細のテンプレートの
<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 | 手書きブログ

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

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

一覧画面

$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 | 手書きブログ

手書きブログで直線を引く時

公式完全ガイド : P164

現在、WindowsXP + Firefox(Chromeも同じ) ではうまくうごかない事を確認しています
( めちゃくちゃになります )
以下は、現在 WindowsXP + IE8 での動作です

★ まず、線の太さを決定




( この状態で、「直線モード」になるので右、左の順で指を離します )



この後、公式ガイドでは、左クリックしたままとありますが、何も
せずに( 左も右も放して )線の終わりの位置に移動して右クリック
します



線を引くのを終了したい場合は、線の終わりの現在の位置以外に移動
して「左クリック」すれば「直線モード」は解除されます。
※ こうして解除すると、アンドゥがすぐに動作します

但し左クリックの位置を、キャンバス(Flash) の外でするとすぐに
アンドゥが動作しないので注意して下さい
※ アンドゥが動作しない場合は、キャンバス内で左クリックします

続けて引きたい場合は次の場所に移動して右クリックをします。
解除しなければ、キャンバスの外へ出て右クリックしても直線
モードは維持されます
( キャンバス外での右クリックは何も実行されません )


枠線の引き方の注意

公式完全ガイド : P165

公式ガイドでは、CTRL+Z となっていますが、動作しません。

Firefox( Chrome ) では、CTRL+T で動作します。

IE では、CTRL+T では、新しいタブが開くので、Firefox( Chrome ) で引くしか
ないかもしれません。

※ IE で、タブを無効にしましたが、動作しませんでした

posted by at 2011-07-13 14:29 | 手書きブログ

Seesaa の各ページの表示について

Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>

この記述は、以下の場所で使用します

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

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