【No.005】無難に作ったつもりテンプレート・改【ソース配布】

[PR]

▶2024/04/27 Sat.
▶
▶CM()

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

【No.005】無難に作ったつもりテンプレート・改【ソース配布】

【概要】
無難に作ったつもりテンプレート・改。［画像パーツ：未使用］
windows8【IE11,Chrome38】で動作確認。macでどうなっているかは全くの謎。
IE6には対応していません。
テンプレートの解説は今回作っていません。何かあれば当ブログのコメント欄よりご質問ください。

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

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

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

「ブログ一覧」用ソース

<!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:005-無難・改-ブログ一覧
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: #555;
	background: #fff;
}
a {
	color: #555;
	text-decoration: none;
}
a:hover,
a:active {
	color: #8d0;
	background: none; /*ie10*/
}

#wrapper {
	width: 930px;
	margin: 0 auto;
	padding: 100px 30px 0 30px;
	background: #fff;
}



/* メニューバー
----------------------------------------------------------------------*/
#MenuBar {
	display: none;
}
#mymenubar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	width: 100%;
	height: 35px;
	border-bottom: dotted 1px #e0e0e0;
	background: #f7f7f7;
	-ms-filter: "alpha(opacity=90)";
	    filter: alpha(opacity=90);
	      opacity: 0.9;
}
#mymenubar-inner {
	position: relative;
	min-width: 700px;
	max-width: 930px;
	margin: 0 auto;
	padding: 0 30px;
}

/* ▼メニューバーアイコン */
#blog-id {
	float: left;
	display: block;
	margin: 3px 0;
}
#blog-id img {
	height: 29px;
	border-radius: 3px;
	-webkit-transition: 0.15s ease-in-out;
	        transition: 0.15s ease-in-out;
}
#blog-id img:hover {
	-ms-filter: "alpha(opacity=50)";
	    filter: alpha(opacity=50);
	      opacity: 0.5;
}

/* ▼ページバー */
.pagebar-outer {
	position: relative;
	top: 0;
	left: -30px;
	height: 35px;
	margin-top: 30px;
}
.pagebar {
	position: absolute;
	top: 0;
	left: 120px;
	width: 400px;
	text-align: center;
}
.pagebar span {
	float: left;
	display: block;
	width: 26px;
	line-height: 35px;
	cursor: default;
}
.pagebar a span {
	color: #555;
}
.pagebar a span:hover,
.pagebar a span:active {
	color: #8d0;
	cursor: pointer;
}
.pagebar .Selected {
	color: #8d0;
	font-weight: bold;
	font-size: 110%;
}

/* ▼ホームリンク */
#homelink {
	float: right;
	padding: 5px 0;
}
#homelink a {
	margin: 0 0 0 10px;
	line-height: 25px;
}
@media screen and (max-width: 750px) {
	#homelink {
		float: none;
		position: fixed;
		top: 40px;
		right: 0;
		padding: 0;
		text-align: center;
	}
	#homelink a {
		display: block;
		width: 70px;
		height: 23px;
		line-height: 23px;
		margin: 0 0 4px 0;
		background: #f7f7f7;
		border: dotted 1px #e0e0e0;
		border-right: 0;
		-ms-filter: "alpha(opacity=90)";
		    filter: alpha(opacity=90);
		      opacity: 0.9;
	}
}



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

/* ▼記事 */
#contents-list {}
.blogthumb {
	float: left;
	margin: 0 28px 14px 0;
	text-align: center;
}
.blogthumb .title {
	width: 120px;
	height: 14px;
	padding: 0 1px;
	line-height: 14px;
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.blogthumb .article {
	position: relative;
	width: 120px;
	height: 160px;
	border: solid 1px #e0e0e0;
	background: #fff;
	overflow: hidden;
}
.blogthumb .info {
	position: absolute;
	top: 62px;
	left: 10px;
	z-index: 1;
	width: 100px;
	color: #000;
}
.blogthumb .info .date {
	width: 100px;
	height: 20px;
	overflow: hidden;
	font: bold 14px/20px "Century Gothic", CenturyGothic, Futura, AppleGothic, sans-serif;
	letter-spacing: 1px;
}
.blogthumb .info .come {
	font: 10px/18px "Century Gothic", CenturyGothic, Futura, AppleGothic, sans-serif;
}
.blogthumb .blogimg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: block;
	width: 120px;
	height: 160px;
	-webkit-transition: 0.15s ease-in-out;
	        transition: 0.15s ease-in-out;
}
.blogthumb .blogimg:hover {
	cursor: pointer;
	-ms-filter: "alpha(opacity=20)";
	    filter: alpha(opacity=20);
	      opacity: 0.2;
}



/* サイドメニュー
----------------------------------------------------------------------*/
#side {
	float: right;
	width: 300px;
	padding-left: 15px;
	border-left: 1px solid #e0e0e0;
}
.s-section {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dotted #e0e0e0;
}
.s-title {
	font: 22px/1.7 "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}
.s-unit {
	width: 290px;
	margin: 15px 0 15px 10px;
	word-wrap: break-word;
}

/* ▼広告 */
#ad {
	width: 300px;
	height: auto;
}

/* ▼プロフィール */
#myimg {
	float: left;
	margin: 0 10px 5px 0;
	border: solid 1px #ccc;
}
#myimg,
#myimg img {
	display: block;
	width: 88px;
	height: 88px;
}
#prof {
	float: left;
	width: 190px;
}
.myname a {
	font-size: 14px;
}
.mycmd {
	line-height: 22px;
	font-size: 9px;
}
.mycmd .cmdbutton,
.mycmd .cmdbuttondisable {
	padding: 0 1px;
	border: solid 1px #ccc;
}
.mycmd .cmdbuttondisable {
	color: #fff;
	background: #ccc;
}
.freearea-1 {
	padding: 2px 0;
	font-size: 10px;
	line-height: 1.5;
	word-wrap: break-word;
}
.freearea-2 img {
	margin: 3px 0;
}
.freearea-2 a img {
	-webkit-transition: 0.1s ease-in-out;
	        transition: 0.1s ease-in-out;
}
.freearea-2 a img:hover {
	-ms-filter: "alpha(opacity=85)";
	    filter: alpha(opacity=85);
	      opacity: 0.85;
}

/* ▼カテゴリ */
.Category {
	height: 20px;
	line-height: 20px;
}
.Category #Category$categoryId {
	color: #8d0;
	font-weight: bold;
}

/* ▼タグ */
.BlogTag {
	float: left;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 3px 3px 0;
	border: solid 1px #ccc;
}
.BlogTag .BlogNum {
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 12px;
	text-align: center;
	color: #000;
	background: #fff;
	-ms-filter: "alpha(opacity=0)";
	    filter: alpha(opacity=0);
	      opacity: 0.0;
	-webkit-transition: 0.15s ease-in-out;
	        transition: 0.15s ease-in-out;
}
.BlogTag:hover .BlogNum {
	-ms-filter: "alpha(opacity=80)";
	    filter: alpha(opacity=80);
	      opacity: 0.8;
}



/* フッター
----------------------------------------------------------------------*/
#Footer {
	clear: both;
	width: 100%;
	padding: 80px 0 20px;
	text-align: center;
}
#Footer br+br,
#Footer a+a+a+a+a+a+br { display: none; }
#Footer a+a+a+a+a+a:after { content: "."; visibility: hidden; margin-right: 0.8em; }



/* ページスクロール
----------------------------------------------------------------------*/
.to-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 9997;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	background: #eee;
	border-radius: 7px;
	-ms-filter: "alpha(opacity=90)";
	    filter: alpha(opacity=90);
	      opacity: 0.9;
}
.to-top:hover,
.to-top:active {
	background: #eee;
}



/******************************************************************************************/
	</style>
</head>





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


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





<!-- メニューバー/始 -->
	<div id="mymenubar">
		<div id="mymenubar-inner" class="cf">


		<!-- ▼メニューバーアイコン -->
			<a id="blog-id" href="../$user.userId/"><img src="$user.myProfileImage001" alt="■" /></a>
		<!-- ▲メニューバーアイコン -->

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

		<!-- ▼ホームリンク -->
			<div id="homelink">
				<a href="http://tegaki.pipa.jp/" target="_top">■ pipa top</a>
				<a href="../VMyPageS.jsp" target="_top">■ my page</a>
			</div>
		<!-- ▲ホームリンク -->


		</div>
	</div>
<!-- メニューバー/終 -->





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


	<!-- ▼記事 -->
		<div id="contents-list" class="cf">
#foreach($tegaki in $tegakiList)
			<div class="blogthumb">
				<div class="article">
					<div class="info">
						<div class="date">$tegaki.uploadDateText</div>
						<div class="come"><b>$tegaki.commentNum</b> comments</div>
					</div>
#if($tegaki.tegakiId!=-1)
					<a href="../$user.userId/${tegaki.tegakiId}.html" class="blogimg" style="background: #f7f7f7 url($tegaki.fileNameMedium) no-repeat 50% 50%;"></a>
#else
					<div class="blogimg" style="background: #f7f7f7 url($tegaki.fileNameMedium) no-repeat 50% 50%;"></div>
#end
				</div>
				<div class="title">$tegaki.title</div>
			</div>
#end
		</div>
	<!-- ▲記事 -->

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


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





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


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

	<!-- ▼プロフィール -->
		<div class="s-section">
			<div class="s-title">Profile</div>
			<div class="s-unit cf">
				<div id="myimg">
					<a href="../$user.userId/"><img src="$user.myProfileImage001" alt="ブログ一覧" /></a>
				</div>
				<div id="prof">
					<div class="myname">
						<a href="../$user.userId/">$user.nickname</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="freearea-1">
						フリーエリア１<br />
						てすとてすとてすとてすとてすとてすとてすとてすとてすとてすと
					</div>
				</div>
			</div>
			<div class="s-unit">
				<div class="freearea-2">
					▶ フリーエリア２<br />
					てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと<br />
					testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
				</div>
			</div>
		</div>
	<!-- ▲プロフィール -->

	<!-- ▼カテゴリ -->
		<div class="s-section">
			<div class="s-title">Categories</div>
			<div class="s-unit">$categoryList</div>
		</div>
	<!-- ▲カテゴリ -->

	<!-- ▼タグ -->
		<div class="s-section">
			<div class="s-title">Tags</div>
			<div class="s-unit cf">$blogNumByTag</div>
		</div>
	<!-- ▲タグ -->

	<!-- ▼ブログパーツ -->
		<div class="s-section">
			<div class="s-title">Blog Parts</div>
			<div class="s-unit">$blogParts</div>
		</div>
	<!-- ▲ブログパーツ -->


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





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





<!-- ページスクロール -->
	<a class="to-top" onclick="$('html,body').animate({scrollTop: 0}, 500, 'swing');return false;">▲</a>
<!-- ページスクロール -->





</div>


<!-- 削除不可 -->$bodyFooterPart<!-- 削除不可 -->
<!-- 削除不可 -->$menuBar<!-- 削除不可 -->
</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:005-無難・改-ブログ詳細
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: #555;
	background: #fff;
}
a {
	color: #555;
	text-decoration: none;
}
a:hover,
a:active {
	color: #8d0;
	background: none; /*ie10*/
}

#wrapper {
	width: 930px;
	margin: 0 auto;
	padding: 100px 30px 0 30px;
	background: #fff;
}



/* メニューバー
----------------------------------------------------------------------*/
#MenuBar {
	display: none;
}
#mymenubar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	width: 100%;
	height: 35px;
	border-bottom: dotted 1px #e0e0e0;
	background: #f7f7f7;
	-ms-filter: "alpha(opacity=90)";
	    filter: alpha(opacity=90);
	      opacity: 0.9;
}
#mymenubar-inner {
	position: relative;
	min-width: 700px;
	max-width: 930px;
	margin: 0 auto;
	padding: 0 30px;
}

/* ▼メニューバーアイコン */
#blog-id {
	float: left;
	display: block;
	margin: 3px 0;
}
#blog-id img {
	height: 29px;
	border-radius: 3px;
	-webkit-transition: 0.15s ease-in-out;
	        transition: 0.15s ease-in-out;
}
#blog-id img:hover {
	-ms-filter: "alpha(opacity=50)";
	    filter: alpha(opacity=50);
	      opacity: 0.5;
}

/* ▼ページナビ */
.navibar-outer {
	position: relative;
	top: 0;
	left: -30px;
	height: 35px;
	margin-top: 30px;
}
.navibar {
	position: absolute;
	top: 0;
	left: 120px;
	width: 400px;
	height: 35px;
	text-align: center;
}
.navibar a {
	display: block;
	width: 70px;
	margin: 0 auto;
	line-height: 35px;
}
.navibar .navi_P,
.navibar .navi_N,
.navibar .navi_C {
	float: left;
	width: 130px;
	height: 35px;
}

/* ▼ホームリンク */
#homelink {
	float: right;
	padding: 5px 0;
}
#homelink a {
	margin: 0 0 0 10px;
	line-height: 25px;
}
@media screen and (max-width: 750px) {
	#homelink {
		float: none;
		position: fixed;
		top: 40px;
		right: 0;
		padding: 0;
		text-align: center;
	}
	#homelink a {
		display: block;
		width: 70px;
		height: 23px;
		line-height: 23px;
		margin: 0 0 4px 0;
		background: #f7f7f7;
		border: dotted 1px #e0e0e0;
		border-right: 0;
		-ms-filter: "alpha(opacity=90)";
		    filter: alpha(opacity=90);
		      opacity: 0.9;
	}
}



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

/* ▼記事情報 */
#bloginfo {
	width: 480px;
	margin: 0 auto;
}
#bloginfo #left-area {
	float: left;
	width: 270px;
}
#bloginfo #right-area {
	float: right;
	width: 210px;
}

/* ▼▼①日付②コメント数・エディタ・カテゴリ③ツイート・ブクマ・テンプレ */
#left-area .date-1 {
	width: 200px;
	height: 29px;
	font: 29px/1 "Century Gothic", CenturyGothic, Futura, AppleGothic, sans-serif;
	letter-spacing: 1px;
	overflow: hidden;
}
#left-area .date-2 {
	padding: 15px 0 4px;
	line-height: 17px;
	white-space: nowrap;
}
#left-area .date-2 img {
	margin: 0 1px 5px 0;
}
#left-area .date-3 {
	line-height: 16px;
}
#left-area .date-3 img {
	width: 19px;
	height: 19px;
}
#left-area .date-3 .mytweet {
	margin-right: 1px;
}

/* ▼▼④タグ・テンプレ⑤ハート */
#right-area .date-4 {
	height: 81px;
}
#right-area .date-4 img {
	float: right;
	display: block;
	height: 60px;
	margin-left: 4px;
	border: 1px solid #ccc;
}
#right-area .date-5 .EditHeartIconHeader {
	float: right;
	margin: 5px 0 0 5px;
}
#right-area .date-5 .EditHeartIconHeader img {
	display: block;
}
#right-area .date-5 .w-heart {
	float: right;
}
#right-area .date-5 .w-heart img {
	float: left;
	display: block;
	width: 20px;
	height: 20px;
}

/* ▼記事タイトル */
#date-title {
	width: 480px;
	margin: 0 auto;
	padding: 8px 0 2px 0;
	line-height: 24px;
	font-size: 16px;
	word-wrap: break-word;
}

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

/* コメント */
.blogcomment {
	margin: 18px auto;
}
.CommentDetail {
	width: 482px;
	margin: 0 auto;
	text-align: left;
}
.CommentDetail .CmtImg {
	width: 480px;
	border: solid 1px #ccc;
}
.CommentName {
	width: 480px;
	height: 18px;
	margin: 0 auto;
	font-size: 10px;
	text-align: left;
}

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

/*** コメントパレット ***/
table#PalletPaneH { width: 482px; margin: 8px auto 0px; border: 1px 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: 300px;
	padding-left: 15px;
	border-left: 1px solid #e0e0e0;
}
.s-section {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dotted #e0e0e0;
}
.s-title {
	font: 22px/1.7 "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}
.s-unit {
	width: 290px;
	margin: 15px 0 15px 10px;
	word-wrap: break-word;
}

/* ▼広告 */
#ad {
	width: 300px;
	height: auto;
}

/* ▼プロフィール */
#myimg {
	float: left;
	margin: 0 10px 5px 0;
	border: solid 1px #ccc;
}
#myimg,
#myimg img {
	display: block;
	width: 88px;
	height: 88px;
}
#prof {
	float: left;
	width: 190px;
}
.myname a {
	font-size: 14px;
}
.mycmd {
	line-height: 22px;
	font-size: 9px;
}
.mycmd .cmdbutton,
.mycmd .cmdbuttondisable {
	padding: 0 1px;
	border: solid 1px #ccc;
}
.mycmd .cmdbuttondisable {
	color: #fff;
	background: #ccc;
}
.freearea-1 {
	padding: 2px 0;
	font-size: 10px;
	line-height: 1.5;
	word-wrap: break-word;
}
.freearea-2 img {
	margin: 3px 0;
}
.freearea-2 a img {
	-webkit-transition: 0.1s ease-in-out;
	        transition: 0.1s ease-in-out;
}
.freearea-2 a img:hover {
	-ms-filter: "alpha(opacity=85)";
	    filter: alpha(opacity=85);
	      opacity: 0.85;
}

/* ▼カテゴリ */
.Category {
	height: 20px;
	line-height: 20px;
}
.Category #Category$categoryId {
	color: #8d0;
	font-weight: bold;
}

/* ▼タグ */
.BlogTag {
	float: left;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 3px 3px 0;
	border: solid 1px #ccc;
}
.BlogTag .BlogNum {
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 12px;
	text-align: center;
	color: #000;
	background: #fff;
	-ms-filter: "alpha(opacity=0)";
	    filter: alpha(opacity=0);
	      opacity: 0.0;
	-webkit-transition: 0.15s ease-in-out;
	        transition: 0.15s ease-in-out;
}
.BlogTag:hover .BlogNum {
	-ms-filter: "alpha(opacity=80)";
	    filter: alpha(opacity=80);
	      opacity: 0.8;
}



/* フッター
----------------------------------------------------------------------*/
#Footer {
	clear: both;
	width: 100%;
	padding: 80px 0 20px;
	text-align: center;
}
#Footer br+br,
#Footer a+a+a+a+a+a+br { display: none; }
#Footer a+a+a+a+a+a:after { content: "."; visibility: hidden; margin-right: 0.8em; }



/* ページスクロール
----------------------------------------------------------------------*/
.to-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 9997;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	background: #eee;
	border-radius: 7px;
	-ms-filter: "alpha(opacity=90)";
	    filter: alpha(opacity=90);
	      opacity: 0.9;
}
.to-top:hover,
.to-top:active {
	background: #eee;
}



/******************************************************************************************/
	</style>
</head>





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


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





<!-- メニューバー/始 -->
	<div id="mymenubar">
		<div id="mymenubar-inner" class="cf">


		<!-- ▼メニューバーアイコン -->
			<a id="blog-id" href="../$user.userId/"><img src="$user.myProfileImage001" alt="■" /></a>
		<!-- ▲メニューバーアイコン -->

		<!-- ▼ページナビ -->
			<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="homelink">
				<a href="http://tegaki.pipa.jp/" target="_top">■ pipa top</a>
				<a href="../VMyPageS.jsp" target="_top">■ my page</a>
			</div>
		<!-- ▲ホームリンク -->


		</div>
	</div>
<!-- メニューバー/終 -->





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


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

			<div id="left-area">
			<!-- ▼▼① -->
				<div class="date-1">
					$tegaki.uploadDateText
				</div>
			<!-- ▲▲① -->
			<!-- ▼▼② -->
				<div class="date-2">
					<img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" alt="コメント" />x$tegaki.commentNum / with <a href="$editorPage">$editorName</a><br />
					category: $categoryName
				</div>
			<!-- ▲▲② -->
			<!-- ▼▼③ -->
				<div class="date-3">
					<a class="mytweet" href="$tweetURL" title="ツイートする"><img src="http://img01.pipa.jp/tegaki/img07/TwitterBird_S.png" alt="" /></a>
					$bookmarkButton
#if($tegaki.themeId==6 || $tegaki.themeId==7)
					<a href="../VEditBlogS4.jsp?QD=$tegaki.tegakiId" style="font-size:9px; border:solid 1px #444;text-decoration:none;padding:0px 3px;color:#000;background:#fff;">Use Template</a>
#end
				</div>
			<!-- ▲▲③ -->
			</div>

			<div id="right-area">
			<!-- ▼▼④ -->
				<div class="date-4 cf">

#foreach($tag in $tegaki.tagList)
					<a href="../VSearchBlogByTagS.jsp?GD=${tag.tagId}">
						<img src="${tag.fileName}" alt="タグ" />
					</a>
#end
#if($tegaki.getImg(0).template.fileName != "")
#if(${tegaki.getImg(0).template.templateId} > 0)
					<a href="../VSearchBlogByTemplateS2.jsp?PD=${tegaki.getImg(0).template.templateId}">
						<img src="${tegaki.getImg(0).template.fileName}_60.jpg" alt="テンプレ" />
					</a>
#end
#end
				</div >
			<!-- ▲▲④ -->
			<!-- ▼▼⑤ -->
				<div class="date-5 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" />
					</a>
					<a class="w-heart cf" 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;">
#foreach($heart in $heartList)
						<img src="$heart" alt="☆" />
#end
					</a>
				</div >
			<!-- ▲▲⑤ -->
			</div>

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

	<!-- ▼記事タイトル -->
		<div id="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-outer">
			<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>
<!-- コンテンツ/終 -->





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


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

	<!-- ▼プロフィール -->
		<div class="s-section">
			<div class="s-title">Profile</div>
			<div class="s-unit cf">
				<div id="myimg">
					<a href="../$user.userId/"><img src="$user.myProfileImage001" alt="ブログ一覧" /></a>
				</div>
				<div id="prof">
					<div class="myname">
						<a href="../$user.userId/">$user.nickname</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="freearea-1">
						フリーエリア１<br />
						てすとてすとてすとてすとてすとてすとてすとてすとてすとてすと
					</div>
				</div>
			</div>
			<div class="s-unit">
				<div class="freearea-2">
					▶ フリーエリア２<br />
					てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと<br />
					testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
				</div>
			</div>
		</div>
	<!-- ▲プロフィール -->

	<!-- ▼カテゴリ -->
		<div class="s-section">
			<div class="s-title">Categories</div>
			<div class="s-unit">$categoryList</div>
		</div>
	<!-- ▲カテゴリ -->

	<!-- ▼タグ -->
		<div class="s-section">
			<div class="s-title">Tags</div>
			<div class="s-unit cf">$blogNumByTag</div>
		</div>
	<!-- ▲タグ -->

	<!-- ▼ブログパーツ -->
		<div class="s-section">
			<div class="s-title">Blog Parts</div>
			<div class="s-unit">$blogParts</div>
		</div>
	<!-- ▲ブログパーツ -->


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





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





<!-- ページスクロール -->
	<a class="to-top" onclick="$('html,body').animate({scrollTop: 0}, 500, 'swing');return false;">▲</a>
<!-- ページスクロール -->





</div>


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

Comment

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

new▶ お知らせ
old▶ 【No.004】ツイッタ風もどきテンプレート【ソース配布】