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

詳細画面なので、タイトルに文字列がある場合はブラウザのタイトルバーにも
表示するようにしています
<!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 Pゴシック','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 | 手書きブログ | このブログの読者になる | 更新情報をチェックする