手ブロ新デザイン : あたらしいテーマをカスタマイズしました



新しいテーマが追加されたのですが、サイドとコンテンツの位置が逆に
なっていたので、いままでの馴染みのある位置に変更しました。

さらに、サムネイルが正方形で小さくなっていたのを元の大きさに戻し
て、プロフィール画像は最大幅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 Pゴシック','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 | 手書きブログ | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。