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

貼り付けるだけで使えるはずです。
失敗したら、旧画面に一度戻ってやりなおせばいいと思います。
<!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 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;
		}

		.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 | 手書きブログ | このブログの読者になる | 更新情報をチェックする