【No.001】現行版に似せたつもりテンプレート【ソース配布】

[PR]

▶2024/11/21 Thu.
▶
▶CM()

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

【No.001】現行版に似せたつもりテンプレート【ソース配布】

【概要】
現行版に似せたつもりテンプレート。［画像パーツ：使用］
windows8【IE10,Chrome30,Firefox24,Opera17】で動作確認。macでどうなっているかは全くの謎。
IEは7以上に対応（させたつもり）。IE6も最低限の考慮はしましたがデザインに若干のズレが出ます。
テンプレートの詳細は「【No.001】現行版に似せたつもりテンプレート【カスタマイズ解説】」をご覧ください。

【注意点】
手ブロの詳細設定で、ハートの編集制限を使用している方（「友達のみ編集OK」または「編集不可」に設定されている方）は現在ご使用頂けないテンプレートとなっております。
使用すると他ユーザーから見た詳細画面が崩壊します。（自分のアカウントからでは分かりません）
公式側のタグミスによる現象と思われましたので、その旨報告し現在対応待ち中です。

テンプレートは好きに弄っていただいて構いません。リンク・報告等も不要です。
不備や疑問等、お気づきの点ございましたらコメントよりお知らせ頂けると幸いです。

以下、「つづき」よりソースを載せています。

▼一覧ソースの先頭／▼詳細ソースの先頭

「ブログ一覧」用ソース

<!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>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<!-- 削除不可 -->$headerPart<!-- 削除不可 -->
	<title>$user.nicknameさんの手書きブログ</title>

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

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

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





	<style type="text/css">
/******************************************************************************************/
/*------------------------------------------------------------------------------------------
template:001-現行版風-ブログ一覧
author: Matsubaki (ID:257444)
blogurl: http://mttmmttm.ko-me.com/
------------------------------------------------------------------------------------------*/



/* reset style
----------------------------------------------------------------------*/
html, body, div, span, a, p, img, ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
}
ul, ol { list-style: none; }
img { vertical-align: bottom; }



/* clearfix
----------------------------------------------------------------------*/
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }



/* 基本設定
----------------------------------------------------------------------*/
body {
	font: 11px/1.7 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Verdana, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #444;
	background: #eee;
	text-align: center; /*ie6*/
}
a,
a span {
	color: #444;
	text-decoration: none;
}
a:hover,
a:active,
a span:hover,
a span:active {
	color: #f80;
	background: #eee;
}
#wrapper {
	width: 730px;
	_width: 770px; /*ie6*/
	margin: 0 auto;
	padding: 0 20px;
	background: #fff;
	text-align: left; /*ie6*/
}



/* ヘッダー
----------------------------------------------------------------------*/
#header {
	position: relative;
	width: 100%;
	height: 270px;
}

/* ▼広告 */
#ad {
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	height: 250px;
	padding: 1px;
	background: #eee;
}

/* ▼ブログタイトル */
a#blog-id {
	position: absolute;
	top: 27px;
	left: 0px;
	display: block;
	width: 410px;
	height: 225px;
	background: url($user.image001) no-repeat top left;
}

/* ▼メニューバー */
#MenuBar {
	position: absolute;
	top: 2px;
	right: 320px;
	width: 205px;
	height: 23px;
	text-align: center;
}
#MenuBar #MenuBarLeft {
	float: left;
	width: 175px;
	height: 23px;
	overflow: hidden;
}
#MenuBar #MenuBarLeft a {
	/*▽*/
	float: left;
	display: block;
	height: 23px;
	font-size: 10px;
	text-decoration: none;
	/*△*/
	line-height: 23px;
}
#MenuBar #MenuBarRight {
	float: right;
}
#MenuBar #MenuBarRight .MenuItem {
	display: none;
}
#MenuBar #MenuBarRight .MenuItem.Twitter {
	display: block;
	width: 23px;
	height: 23px;
	padding: 0;
	-ms-filter: "alpha(opacity=80)";
	    filter: alpha(opacity=80);
	      opacity: 0.8;
}
#MenuBar #MenuBarRight .MenuItem.Twitter:hover {
	-ms-filter: "alpha(opacity=100)";
	    filter: alpha(opacity=100);
	      opacity: 1;
}
#MenuBar #MenuBarRight .MenuItem.Twitter .Text {
	display: none;
}



/* コンテンツ
----------------------------------------------------------------------*/
#contents {
	float: left;
	width: 520px;
}

/* ▼ページバー */
.pagebar {
	height: 30px;
	padding: 5px 0;
	text-align: center;
}
.pagebar span {
	float: left;
	display: block;
	width: 30px;
	margin-right: 3px;
	line-height: 30px;
	cursor: default;
}
.pagebar a:hover span {
	cursor: pointer;
}
.pagebar .Selected {
	font-weight: bold;
	font-size: 115%;
}

/* ▼カテゴリ名 */
.catename {
	line-height: 20px;
}

/* ▼記事 */
#contents-list {
	padding-top: 20px;
}
.blogthumb {
	float: left;
	margin: 0 4px 20px 0;
	font-size: 10px;
}
.blogthumb .title {
	width: 120px;
	height: 16px;
	padding: 0 2px;
	line-height: 16px;
	font-weight: bold;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	background: #ddd;
}
.blogthumb .article {
	padding: 2px;
	background: #ddd;
}
.blogthumb .article,
.blogthumb .article .blogimg {
	display: block;
	width: 120px;
	height: 160px;
}
.blogthumb .article .blogimg:hover {
	-ms-filter: "alpha(opacity=70)";
	    filter: alpha(opacity=70);
	      opacity: 0.7;
}
.blogthumb .date {
	width: 120px;
	padding: 0 2px;
	line-height: 14px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}
.blogthumb .date img {
	margin: 0 0 3px 0;
}



/* サイドメニュー
----------------------------------------------------------------------*/
#side {
	float: right;
	width: 200px;
	text-align: center;
}
.s-title {
	width: 200px;
	height: 40px;
	margin-bottom: 5px;
	font: 16px/40px "Century Gothic", Futura, CenturyGothic, AppleGothic, sans-serif;
	overflow: hidden;
}
.s-section {
	margin-bottom: 40px;
	word-wrap: break-word;
}

/* ▼プロフィール */
.myname a {
	line-height: 35px;
	font-size: 16px;
}
.myimg {
	width: 180px;
	height: 180px;
	margin: 0 auto;
	border: 0px solid #ddd;
}
.myimg img {
	display: block;
	width: 180px;
	height: 180px;
}
.mycmd {
	font-size: 9px;
	line-height: 30px;
}
.mycmd .cmdbutton {
	color: #000;
	background: #fff;
}
.mycmd .cmdbutton:hover {
	background: #ddd;
}
.mycmd .cmdbuttondisable {
	color: #fff;
	background: #000;
}
.mycmd .cmdbutton,
.mycmd .cmdbuttondisable {
	padding: 0 1px;
	border: solid 1px #000;
	-webkit-border-radius: 4px;
	        border-radius: 4px;
}
.mytext {
	padding: 5px 0;
	line-height: 1.5;
}

/* ▼リンク */
.mylink a {
	display: block;
	margin: 0 0 3px 0;
}
.mylink img:hover {
	-ms-filter: "alpha(opacity=70)";
	    filter: alpha(opacity=70);
	      opacity: 0.7;
}

/* ▼カテゴリ */
.Category {
	width: 200px;
}
.Category a {
	display: block;
}

/* ▼タグ */
.tagtab {
	width: 200px;
}
.BlogTag {
	float: left;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 0 2px 2px;
	border: 2px solid #ddd;
}
.BlogTag .BlogNum {
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #333;
	background: #fff;
	-ms-filter: "alpha(opacity=0)";
	    filter: alpha(opacity=0);
	      opacity: 0;
}
.BlogTag:hover .BlogNum {
	-ms-filter: "alpha(opacity=80)";
	    filter: alpha(opacity=80);
	      opacity: 0.8;
}



/* フッター
----------------------------------------------------------------------*/
#Footer {
	clear: both;
	width: 100%;
	padding: 70px 0 30px;
	line-height: 0.8;
	font-size: 10px;
	text-align: center;
}



/******************************************************************************************/
/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼カスタマイズエリア▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/

/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲カスタマイズエリア▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/******************************************************************************************/
	</style>
</head>





<body>
<!-- 削除不可 -->$VBlogListHeaderPart<!-- 削除不可 -->


<div id="wrapper" class="cf">





<!-- ヘッダー/始 -->
	<div id="header">


	<!-- ▼広告 -->
		<div id="ad"><!-- 削除不可 -->$ad300x250<!-- 削除不可 --></div>
	<!-- ▲広告 -->

	<!-- ▼ブログタイトル -->
		<a id="blog-id" href="../$user.userId/"></a>
	<!-- ▲ブログタイトル -->

	<!-- ▼メニューバー -->
		<!-- 削除不可 -->$menuBar<!-- 削除不可 -->
	<!-- ▲メニューバー -->


	</div>
<!-- ヘッダー/終 -->





<!-- コンテンツ/始 -->
	<div id="contents">


	<!-- ▼ページバー -->
		<div class="pagebar cf">$pageMenu</div>
	<!-- ▲ページバー -->

	<!-- ▼カテゴリ名 -->
		<div class="catename">Category : $categoryName</div>
	<!-- ▲カテゴリ名 -->

	<!-- ▼記事 -->
		<div id="contents-list" class="cf">
#foreach($tegaki in $tegakiList)
			<div class="blogthumb">
				<div class="title">$tegaki.title</div>
				<div class="article">
#if($tegaki.tegakiId!=-1)
					<a href="../$user.userId/${tegaki.tegakiId}.html" class="blogimg" style="background: url($tegaki.fileNameMedium) no-repeat 50% 50%;"></a>
#else
					<div class="blogimg" style="background: url($tegaki.fileNameMedium) no-repeat 50% 50%;"></div>
#end
				</div>
				<div class="date">
					$tegaki.uploadDateText<br />
					<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" alt="※" />x$tegaki.commentNum
				</div>
			</div>
#end
		</div>
	<!-- ▲記事 -->

	<!-- ▼ページバー -->
		<div class="pagebar cf">$pageMenu</div>
	<!-- ▲ページバー -->


	</div>
<!-- コンテンツ/終 -->





<!-- サイドメニュー/始 -->
	<div id="side">


	<!-- ▼プロフィール -->
		<div class="s-title" style="background: url($user.image002) no-repeat top left;">Profile</div>
		<div class="s-section">
			<div class="myname">
				<a href="../$user.userId/">$user.nickname</a>
			</div>
			<div class="myimg">
				<a href="../$user.userId/"><img src="$user.myProfileImage001" alt="ブログ一覧" /></a>
			</div>
			<div class="mycmd">
#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>
#else
				<span class="cmdbuttondisable">お気に入り</span>
				<span class="cmdbuttondisable">友達申請</span>
				<span class="cmdbuttondisable">メッセージ</span>
				<a href="../bloglist.rss?ID=$user.userId" class="cmdbutton">RSS</a>
#end
			</div>
			<div class="mytext">
				■■■自己紹介文■■■<br />
				編集してください
			</div>
		</div>
	<!-- ▲プロフィール -->

	<!-- ▼リンク -->
		<div class="s-title" style="background: url($user.image003) no-repeat top left;">Links</div>
		<div class="s-section">
			<div class="mylink">
				<a href="https://mttmmttm.ko-me.com/" target="_blank"><img src="$user.image007" width="200" height="40" /></a>
				<a href="http://www.htmq.com/" target="_blank">HTMLクイックリファレンス</a>
				<a href="http://cssfontstack.com/" target="_blank">CSS FONT STACK</a>
			</div>
		</div>
	<!-- ▲リンク -->

	<!-- ▼カテゴリ -->
		<div class="s-title" style="background: url($user.image004) no-repeat top left;">Categories</div>
		<div class="s-section">
			$categoryList
		</div>
	<!-- ▲カテゴリ -->

	<!-- ▼タグ -->
		<div class="s-title" style="background: url($user.image005) no-repeat top left;">Tags</div>
		<div class="s-section">
			<div class="tagtab cf">$blogNumByTag</div>
		</div>
	<!-- ▲タグ -->

	<!-- ▼ブログパーツ -->
		<div class="s-title" style="background: url($user.image006) no-repeat top left;">Blog Parts</div>
		<div class="s-section">
			$blogParts
		</div>
	<!-- ▲ブログパーツ -->


	</div>
<!-- サイドメニュー/終 -->





<!-- フッター/始 -->
	<!-- 削除不可 -->$wrapperFooterPart<!-- 削除不可 -->
<!-- フッター/終 -->





</div>


<!-- 削除不可 -->$bodyFooterPart<!-- 削除不可 -->
</body>
</html>

「ブログ詳細」用ソース

<!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>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<!-- 削除不可 -->$headerPart<!-- 削除不可 -->
	<title>
	#if ($tegaki.title != "")
	『$tegaki.title』- 
	#end
	$user.nicknameさんの手書きブログ
	</title>
		
		<!-- HTML編集規定 -->
		<!--
		本規定は必要に応じて予告無く変更することがございます。

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

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





	<style type="text/css">
/******************************************************************************************/
/*------------------------------------------------------------------------------------------
template:001-現行版風-ブログ詳細
author: Matsubaki (ID:257444)
blogurl: http://mttmmttm.ko-me.com/
------------------------------------------------------------------------------------------*/



/* reset style
----------------------------------------------------------------------*/
html, body, div, span, a, p, img, ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
}
ul, ol { list-style: none; }
img { vertical-align: bottom; }



/* clearfix
----------------------------------------------------------------------*/
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }



/* 基本設定
----------------------------------------------------------------------*/
body {
	font: 11px/1.7 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Verdana, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #444;
	background: #eee;
	text-align: center; /*ie6*/
}
a,
a span {
	color: #444;
	text-decoration: none;
}
a:hover,
a:active,
a span:hover,
a span:active {
	color: #f80;
	background: #eee;
}
#wrapper {
	width: 730px;
	_width: 770px; /*ie6*/
	margin: 0 auto;
	padding: 0 20px;
	background: #fff;
	text-align: left; /*ie6*/
}



/* ヘッダー
----------------------------------------------------------------------*/
#header {
	position: relative;
	width: 100%;
	height: 270px;
}

/* ▼広告 */
#ad {
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	height: 250px;
	padding: 1px;
	background: #eee;
}

/* ▼ブログタイトル */
a#blog-id {
	position: absolute;
	top: 27px;
	left: 0px;
	display: block;
	width: 410px;
	height: 225px;
	background: url($user.image001) no-repeat top left;
}

/* ▼メニューバー */
#MenuBar {
	position: absolute;
	top: 2px;
	right: 320px;
	width: 205px;
	height: 23px;
	text-align: center;
}
#MenuBar #MenuBarLeft {
	float: left;
	width: 175px;
	height: 23px;
	overflow: hidden;
}
#MenuBar #MenuBarLeft a {
	/*▽*/
	float: left;
	display: block;
	height: 23px;
	font-size: 10px;
	text-decoration: none;
	/*△*/
	line-height: 23px;
}
#MenuBar #MenuBarRight {
	float: right;
}
#MenuBar #MenuBarRight .MenuItem {
	display: none;
}
#MenuBar #MenuBarRight .MenuItem.Twitter {
	display: block;
	width: 23px;
	height: 23px;
	padding: 0;
	-ms-filter: "alpha(opacity=80)";
	    filter: alpha(opacity=80);
	      opacity: 0.8;
}
#MenuBar #MenuBarRight .MenuItem.Twitter:hover {
	-ms-filter: "alpha(opacity=100)";
	    filter: alpha(opacity=100);
	      opacity: 1;
}
#MenuBar #MenuBarRight .MenuItem.Twitter .Text {
	display: none;
}



/* コンテンツ
----------------------------------------------------------------------*/
#contents {
	float: left;
	width: 500px;
	text-align: center; /*ie6*/
}

/* ▼ページナビ */
.navibar {
	width: 300px;
	height: 30px;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
}
.navibar a {
	display: block;
	width: 70px;
	margin: 0 auto;
	line-height: 30px;
}
.navibar .navi_P,
.navibar .navi_N,
.navibar .navi_C {
	float: left;
	width: 100px;
	height: 30px;
}

/* ▼記事情報 */
#bloginfo {
	width: 484px;
	margin: 0 auto;
	text-align: left; /*ie6*/
}

/* ▼▼①日付・使用エディタ・カテゴリ */
#bloginfo .date {
	width: 100%;
	margin-bottom: 3px;
	line-height: 1.4;
}

/* ▼▼②タグ・テンプレ */
#bloginfo .tagtmp {
	float: left;
	width: 240px;
	height: 70px;
}
#bloginfo .tagtmp .t-block {
	float: left;
	margin: 0 3px 0 0;
}
#bloginfo .tagtmp img {
	display: block;
	height: 60px;
	border: 2px solid #ddd;
}

/* ▼▼③ハート・コメント数・ブクマ・テンプレ使用 */
#bloginfo .info {
	float: right;
	width: 240px;
	height: 70px;
	text-align: right;
}
#bloginfo .info .heart {
	height: 20px;
	margin: 0 0 0 auto;
}
#bloginfo .info .heart .heartbox {
	float: right;
}
#bloginfo .info .heart .heartbox a {
	float: left;
}
#bloginfo .info .heart .EditHeartIconHeader {
	margin: 5px 0 0 5px;
}
#bloginfo .info .other {
	margin-top: 3px;
}
#bloginfo .info .other img {
	margin-bottom: 5px;
}

/* ▼記事タイトル */
.date-title {
	width: 480px;
	margin: 0 auto;
	padding: 0 2px;
	line-height: 31px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	word-wrap: break-word;
	background: #ddd;
}

/* ▼記事本文 */
.BlogThumbFull {}
.BlogThumbFull .BlogDetail {
	width: 480px;
	margin: 0 auto;
	border: solid 2px #ddd;
}
.BlogThumbFull .BlogDetail img {
	width: 480px;
}

/* コメント */
.blogcomment {
	margin: 16px auto;
}
.CommentDetail {
	width: 484px;
	margin: 0 auto;
}
.CommentDetail .CmtImg {
	width: 480px;
	border: solid 2px #ddd;
}
.CommentName {
	width: 480px;
	height: 16px;
	margin: 0 auto;
	font-size: 10px;
}

/* コメントパレットバージョン選択 */
.SwfCommentModeBtn,
.SwfCommentModeBtn:hover {
	padding: 0 3px;
	text-decoration: underline;
}

/*** コメントパレット ***/
table#PalletPaneH { width: 484px; margin: 8px auto 0px; border: 2px solid #ddd; }
table#PalletPaneH .PalletButtonTitle { font-size: x-small; background: #ddd; }
table#PalletPaneH .PalleteCommand select { font-size: x-small; }
table#PalletPaneH #ColorButton .Color,
table#PalletPaneH #ColorButton .ColorRainbow { border: solid 1px #eee; margin: 2px 1px; }
table#PalletPaneH #PenButton .PenWidth { border: solid 1px #eee; margin: 2px auto; }
table#PalletPaneH #PenButton .WidthNum { font-size: 12px; line-height: 21px; }
table#PalletPaneH .CommandButton { margin: 2px 4px 2px 0; }
table#PalletPaneH #PenShapeButton .CommandButton.Small { margin: 0 2px 0 0; line-height: 18px; font-size: 12px; }
table#UploadCmd { width: 482px; margin: 3px auto 15px; }
table#UploadCmd #UploadButton { width: 58px; height: 23px; border: 1px solid #aaa; color: #444; cursor: pointer; }



/* サイドメニュー
----------------------------------------------------------------------*/
#side {
	float: right;
	width: 200px;
	text-align: center;
}
.s-title {
	width: 200px;
	height: 40px;
	margin-bottom: 5px;
	font: 16px/40px "Century Gothic", Futura, CenturyGothic, AppleGothic, sans-serif;
	overflow: hidden;
}
.s-section {
	margin-bottom: 40px;
	word-wrap: break-word;
}

/* ▼プロフィール */
.myname a {
	line-height: 35px;
	font-size: 16px;
}
.myimg {
	width: 180px;
	height: 180px;
	margin: 0 auto;
	border: 0px solid #ddd;
}
.myimg img {
	display: block;
	width: 180px;
	height: 180px;
}
.mycmd {
	font-size: 9px;
	line-height: 30px;
}
.mycmd .cmdbutton {
	color: #000;
	background: #fff;
}
.mycmd .cmdbutton:hover {
	background: #ddd;
}
.mycmd .cmdbuttondisable {
	color: #fff;
	background: #000;
}
.mycmd .cmdbutton,
.mycmd .cmdbuttondisable {
	padding: 0 1px;
	border: solid 1px #000;
	-webkit-border-radius: 4px;
	        border-radius: 4px;
}
.mytext {
	padding: 5px 0;
	line-height: 1.5;
}

/* ▼リンク */
.mylink a {
	display: block;
	margin: 0 0 3px 0;
}
.mylink img:hover {
	-ms-filter: "alpha(opacity=70)";
	    filter: alpha(opacity=70);
	      opacity: 0.7;
}

/* ▼カテゴリ */
.Category {
	width: 200px;
}
.Category a {
	display: block;
}

/* ▼タグ */
.tagtab {
	width: 200px;
}
.BlogTag {
	float: left;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 0 2px 2px;
	border: 2px solid #ddd;
}
.BlogTag .BlogNum {
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #333;
	background: #fff;
	-ms-filter: "alpha(opacity=0)";
	    filter: alpha(opacity=0);
	      opacity: 0;
}
.BlogTag:hover .BlogNum {
	-ms-filter: "alpha(opacity=80)";
	    filter: alpha(opacity=80);
	      opacity: 0.8;
}



/* フッター
----------------------------------------------------------------------*/
#Footer {
	clear: both;
	width: 100%;
	padding: 70px 0 30px;
	line-height: 0.8;
	font-size: 10px;
	text-align: center;
}



/******************************************************************************************/
/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼カスタマイズエリア▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/

/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲カスタマイズエリア▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/******************************************************************************************/
	</style>
</head>





<body>
<!-- 削除不可 -->$VBlogHeaderPart<!-- 削除不可 -->


<div id="wrapper" class="cf">





<!-- ヘッダー/始 -->
	<div id="header">


	<!-- ▼広告 -->
		<div id="ad"><!-- 削除不可 -->$ad300x250<!-- 削除不可 --></div>
	<!-- ▲広告 -->

	<!-- ▼ブログタイトル -->
		<a id="blog-id" href="../$user.userId/"></a>
	<!-- ▲ブログタイトル -->

	<!-- ▼メニューバー -->
		<!-- 削除不可 -->$menuBar<!-- 削除不可 -->
	<!-- ▲メニューバー -->


	</div>
<!-- ヘッダー/終 -->





<!-- コンテンツ/始 -->
	<div id="contents">


	<!-- ▼ページナビ -->
		<div class="navibar cf">
			<div class="navi_N">
#if($tegakiNext.tegakiId > 0)
				<a href="${tegakiNext.tegakiId}.html">&lt;&lt; New</a>
#end
			</div>
			<div class="navi_C">
				<a href="../$user.userId/">Blog list</a>
			</div>
			<div class="navi_P">
#if($tegakiPrev.tegakiId > 0)
				<a href="${tegakiPrev.tegakiId}.html">Old &gt;&gt;</a>
#end
			</div>
		</div>
	<!-- ▲ページナビ -->

	<!-- ▼記事情報 -->
		<div id="bloginfo" class="cf">

		<!-- ▼▼① -->
			<div class="date">
				$tegaki.uploadDateText<br />
				Category : $categoryName
			</div>
		<!-- ▲▲① -->
		<!-- ▼▼② -->
			<div class="tagtmp cf">

#if($tegaki.tagId > 1)
#foreach($tag in $tegaki.tagList)
				<a class="t-block" href="../VSearchBlogByTagS.jsp?GD=${tag.tagId}"><img class="Tag" src="${tag.fileName}" alt="タグ" /></a>
#end
#else
				<img class="t-block" src="${tegaki.tagFileName}" />
#end
#if($tegaki.getImg(0).template.fileName != "")
#if(${tegaki.getImg(0).template.templateId} > 0)
				<a class="t-block" href="../VSearchBlogByTemplateS2.jsp?PD=${tegaki.getImg(0).template.templateId}" ><img class="Template" src="${tegaki.getImg(0).template.fileName}_60.jpg" alt="テンプレ" /></a>
#end
#end
			</div >
		<!-- ▲▲② -->
		<!-- ▼▼③ -->
			<div class="info">
				<div class="heart cf">
					<div class="heartbox cf">
						<a class="EditHeartIconHeader" href="../VCreateDotS4.jsp?M=0&ID=$user.userId&TD=$tegaki.tegakiId">
							<img src="http://img01.pipa.jp/tegaki/img/EditHeartIcon.gif" alt="ハートを送る" />
						</a>
					</div >
					<div class="heartbox cf">
#foreach($heart in $heartList)
						<a href="../VBlogDotListS.jsp?PG=0&ID=$user.userId&TD=$tegaki.tegakiId" onClick="window.open('../VBlogDotListS.jsp?PG=0&ID=$user.userId&TD=$tegaki.tegakiId','ハートリスト','width=390,height=550');return false;">
							<img class="BlogCmdHeartIcon" src="$heart" width="20" height="20" alt="すげぇ" />
						</a>
#end
					</div >
				</div >
				<div class="other">
					<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" alt="コメント" />x$tegaki.commentNum
					$bookmarkButton
#if($tegaki.themeId==6 || $tegaki.themeId==7)
					<a href="../VEditBlogS4.jsp?QD=$tegaki.tegakiId" style="font-size:9px;border:solid 1px #444444;text-decoration:none;padding:0px 3px 0px 3px;color:#000;background:#fff;">Use This Template</a>
#end
				</div >
			</div>
		<!-- ▲▲③ -->

		</div >
	<!-- ▲記事情報 -->

	<!-- ▼記事タイトル -->
		<div class="date-title">$tegaki.title</div>
	<!-- ▲記事タイトル -->

	<!-- ▼記事本文 -->
		<div class="BlogThumbFull">						
			<div class="BlogDetail">
				<img src="${tegaki.getImg(0).fileName}" alt="$tegaki.title" />
			</div>
			<div class="blogcomment cf">
				<!-- 削除不可 -->$comments<!-- 削除不可 -->
			</div>
		</div>
	<!-- ▲記事本文 -->

	<!-- ▼ページナビ -->
		<div class="navibar cf">
			<div class="navi_N">
#if($tegakiNext.tegakiId > 0)
				<a href="${tegakiNext.tegakiId}.html">&lt;&lt; New</a>
#end
			</div>
			<div class="navi_C">
				<a href="../$user.userId/">Blog list</a>
			</div>
			<div class="navi_P">
#if($tegakiPrev.tegakiId > 0)
				<a href="${tegakiPrev.tegakiId}.html">Old &gt;&gt;</a>
#end
			</div>
		</div>
	<!-- ▲ページナビ -->


	</div>
<!-- コンテンツ/終 -->





<!-- サイドメニュー/始 -->
	<div id="side">


	<!-- ▼プロフィール -->
		<div class="s-title" style="background: url($user.image002) no-repeat top left;">Profile</div>
		<div class="s-section">
			<div class="myname">
				<a href="../$user.userId/">$user.nickname</a>
			</div>
			<div class="myimg">
				<a href="../$user.userId/"><img src="$user.myProfileImage001" alt="ブログ一覧" /></a>
			</div>
			<div class="mycmd">
#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>
#else
				<span class="cmdbuttondisable">お気に入り</span>
				<span class="cmdbuttondisable">友達申請</span>
				<span class="cmdbuttondisable">メッセージ</span>
				<a href="../bloglist.rss?ID=$user.userId" class="cmdbutton">RSS</a>
#end
			</div>
			<div class="mytext">
				■■■自己紹介文■■■<br />
				編集してください
			</div>
		</div>
	<!-- ▲プロフィール -->

	<!-- ▼リンク -->
		<div class="s-title" style="background: url($user.image003) no-repeat top left;">Links</div>
		<div class="s-section">
			<div class="mylink">
				<a href="https://mttmmttm.ko-me.com/" target="_blank"><img src="$user.image007" width="200" height="40" /></a>
				<a href="http://www.htmq.com/" target="_blank">HTMLクイックリファレンス</a>
				<a href="http://cssfontstack.com/" target="_blank">CSS FONT STACK</a>
			</div>
		</div>
	<!-- ▲リンク -->

	<!-- ▼カテゴリ -->
		<div class="s-title" style="background: url($user.image004) no-repeat top left;">Categories</div>
		<div class="s-section">
			$categoryList
		</div>
	<!-- ▲カテゴリ -->

	<!-- ▼タグ -->
		<div class="s-title" style="background: url($user.image005) no-repeat top left;">Tags</div>
		<div class="s-section">
			<div class="tagtab cf">$blogNumByTag</div>
		</div>
	<!-- ▲タグ -->

	<!-- ▼ブログパーツ -->
		<div class="s-title" style="background: url($user.image006) no-repeat top left;">Blog Parts</div>
		<div class="s-section">
			$blogParts
		</div>
	<!-- ▲ブログパーツ -->


	</div>
<!-- サイドメニュー/終 -->





<!-- フッター/始 -->
	<!-- 削除不可 -->$wrapperFooterPart<!-- 削除不可 -->
<!-- フッター/終 -->





</div>


<!-- 削除不可 -->$bodyFooterPart<!-- 削除不可 -->
</body>
</html>

Comment

現在、新しいコメントを受け付けない設定になっています。