ベータ版1

戻る

カスタムトピック

自己責任でお使い下さい。明らかなエラーについては対応します。
メールフォームか手ブロメッセージよりご連絡下さい。
改変はご自由に。色などは変更して下さい。変更の目安については下に。
※再配布はご遠慮下さい。原型を留めない改変後の再配布についてはこの限りではありません。

保存はコピー&ペーストでお願いします。

サーバー移転に伴い、クリップボードにコピーできるようにしました。
なので、一旦メモ帳かTeraPadなどの余分なものが入らないテキストエディッターなどに貼り付けて下さい。
そのまま手ブロベータのフォームに貼り付けても多分、大丈夫です。(一応実験済み)
※コピーされない！という場合はCtrl+Cでやってみてください。全選択(Ctrl+A)にしかならない場合があります。

一覧

<!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>

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

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

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

/* 共通スタイル部分 開始 ------------------------------------------------------------------------ */

*{margin: 0;padding: 0;}

html,body{margin: 0;padding: 0;}

body {font-family:Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;font-size:11px;margin: 0;color: #ff0000;background-color:#ffffff;}
        
a:link, a:active{color:#ff0000;text-decoration: none;}

a:visited{color:#810081;text-decoration: none;}

a:hover{background-color:#eeeeee;color:#ff0000;text-decoration: none;}

/* ---------------------------------------------------------------------------------------------- */

/* box設定 -------------------------------------------------------------------------------------- */

#boxA { width:560px;height:auto;float:left; }

#boxB { width:320px;height:auto;float:left;margin-top:0px; }

#boxC { clear:left; }

/* ---------------------------------------------------------------------------------------------- */

#Wrapper {width: 988px;margin: 0px auto;padding: 0px 1px 0px 1px;}

/* ---------------------------------------------------------------------------------------------- */

/* ページナビバ設定 ----------------------------------------------------------------------------- */

.PageBar{text-align: center;float: left;width: 100%;font-size: 10px;margin: 5px 0px 5px 0px;}

.PageBar span{float: left;padding: 10px;width: 10px;height: 10px;text-align:center;white-space: nowrap;overflow: hidden;line-height: 10px;}

.PageBar span:hover {background-color:#eeeeee;color:#ff0000;}

.PageBar .Selected {font-weight: bold;}

/* ---------------------------------------------------------------------------------------------- */

/* ヘッダペイン --------------------------------------------------------------------------------- */

#Header {float: left;width: 100%;height: 150px;margin-top: 10px;}

#HeaderTitle {float: left;width: 100%;height: 150px;background-position: left top;background-repeat: no-repeat;}

#MenuBar {display: none !important;}

#MenuBarLeft {display: none !important;}

#MenuBarRight {display: none !important;}

/* ---------------------------------------------------------------------------------------------- */

/* フッタペイン --------------------------------------------------------------------------------- */

#Footer {clear: both;width: 100%;text-align: center;padding: 20px 0px 20px 0px;font-size: 10px;}

/* 共通スタイル部分 終了 ------------------------------------------------------------------------ */

/* メニューペイン ------------------------------------------------------------------------------- */

/* 広告 ----------------------------------------------------------------------------------------- */

#Ad300x250 {float: left;width: 300px;height: 252px;margin-left: auto;margin-right: auto;}

/* ---------------------------------------------------------------------------------------------- */

/* サイド設定 ----------------------------------------------------------------------------------- */

#SideBar {float: right;width: 300px;}

#SideBarTitle {float: left;width: 300px;height: 10px;padding: 0px 20px 0px 7px;background-position: left top;background-repeat: no-repeat;}

#SideBarBody {float: left;width: 300px;height: auto;border: 0px;padding: 0px 20px 0px 7px;background-position: left top;background-repeat: repeat;}

#SideBarEnd {float: left;width: 300px;height: 20px;padding: 0px 20px 0px 7px;background-position: left bottom;background-repeat: no-repeat;}

.SideBarItem {float: left;width: 100%;padding: 0px 0px 10px 0px;text-align: center;}

.SideBarItemTitleProfile {float: left;width: 100%;height: 10px;background-position: center 0px;background-repeat: no-repeat;}

.SideBarItemTitleLink {float: left;width: 100%;height: 5px;background-position: center -40px;background-repeat: no-repeat;}

/* ---------------------------------------------------------------------------------------------- */

.MyNickname {float: left;width: 100%;font-size: 14px;font-weight: bold;margin: 0;}

.SideBarItem .MyImg {float: left;width: 100%;}

.SideBarItem .MyImg img {border: none;margin-left: auto;margin-right: auto;}

.MyProfileCmd {float: left;width: 100%;padding: 5px 0px 5px 0px;}

.CmdButton {text-decoration: none;background-color: #ffffff;}

.CmdButton:HOVER {background-color: #eeeeee;color:#ffffff;}

.CmdButtonDisable {color: #ffffff;background-color: #ffffff;text-decoration: none;margin-bottom:2px;}

.MyProfileCmd .BlogParts {width:68px;height:9px;border:none;}

.MyLinkBanner {	display: block;float: left;width: 250px;height: 40px;padding: 0px 25px 0px 25px;
		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: #eeeeee;color: #ffffff;}

.WidgetTitle {	width: 244px;color:#ff0000;background-color: #dddddd;
		border-top: 1px solid #dddddd;border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;}

.WidgetItemList {	float: left;width: 244px;height: auto;text-align: left;color:#ff0000;background-color: #ffffff;
		border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;border-bottom: 1px solid #dddddd;}

.WidgetItemList a {color: #ff0000;text-decoration: none;text-align: left;}

.WidgetItemList a:hover {color: #ff0000;background-color:#eeeeee;text-decoration: none;text-align: left;}

.WidgetItemList .BlogTag {float: left;width: 60px;height: 60px;color: #ffffff;text-decoration: none;border-top: 1px solid #dddddd;border-right: 1px solid #dddddd;}

.WidgetItemList .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: #ff0000;}

.ReadMore {float: left;width: 100%;text-align: right;padding: 4px 0 0 0;font-size: 85%;}

.WidgetItemList .BlogThumb {text-decoration: none;width: 60px;height: 80px;}

.Category {width: 100%;text-align: left;padding: 2px 0 2px 5px;}

.WidgetItemList p{margin:1px 0px 1px 5px;}

/* サイドバーウィジェット ----------------------------------------------------------------------- */

/* メニューペイン ------------------------------------------------------------------------------- */

/* コンテンツペイン ----------------------------------------------------------------------------- */

#Contents {float: left;width: 560px;height: auto;}

.ContentsList {float: left;width: 560px;padding: 0px;margin-bottom: 20px;border: 0;}

.BlogThumb {font-size: x-small;text-align: center;float: left;width: 120px;height: 160px;padding: 4px 4px 4px 4px;margin: 1px 2px 50px 1px;color:#ff0000;}

.BlogThumb .BlogImg {float: left;width: 120px;height: 160px;border: 2px solid #dddddd;}

.BlogThumb .BlogInfo{float: left;width: 100%;}

.BlogTitle {clear: both;height: 16px;width: 124px;line-height: 16px;font-size: 11px;font-weight: bold;overflow: hidden;white-space: nowrap;background-color: #ffffff;}

.BlogThumb .BlogInfo .BlogDate {float: left;width: 100%;height: 15px;line-height: 10px;font-size: 9px;overflow: yes;margin:5px 0 0 0;}

#CategoryName {margin: 0 0 5px 10px;}

/* ---------------------------------------------------------------------------------------------- */

-->
</style>
</head>
 
<body>
    $VBlogListHeaderPart

<div id="Wrapper">
    $menuBar
    <div id="boxA"> 
    
    <div id="Header">

    <img src="$user.image001" border="0" />

</div>

<div id="Contents">
    <div id="CategoryName">カテゴリ：$categoryName</div>
    <div class="PageBar">$pageMenu</div>
    <div class="ContentsList">
    #foreach($tegaki in $tegakiList)
    <div class="BlogThumb">
    <div class="BlogTitle">$tegaki.title</div>
    #if($tegaki.tegakiId!=-1)
    <a href="../$user.userId/${tegaki.tegakiId}.html" class="BlogImg" title="$tegaki.title" alt="$tegaki.title" style="background-image: url('$tegaki.fileNameMedium');">
    </a>
    #else
    <div class="BlogImg" style="background-image: url('$tegaki.fileNameMedium');">
    </div>
    #end
    <div class="BlogInfo">
    <div class="BlogDate">
    $tegaki.uploadDateText　　
    <font title="コメント$tegaki.commentNum件">コメント$tegaki.commentNum件</font>

</div>
    </div>
    </div>
    #end

<div class="PageBar">$pageMenu</div>
    </div>
    </div>
    
    </div>

<div id="boxB"> 
    
    <div id="SideBar">
    <div id="SideBarTitle"></div>
    <div id="SideBarBody">
                    
    
    <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">
    <img src="$user.image002" title="プロフィールタグ" />
    <a href="../$user.userId/">
    <img src="$user.myProfileImage001" title="ブログ一覧" />
    </a>    
    </div>

<div class="MyProfileCmd">
    #if($thisPage.isMyPage == false)
      #if($thisPage.isMyFriendPage == false)
    <a href="$requestFrinedURL" class="CmdButton"><img src="$user.image003" title="友達申請" border="0" /></a>
      #else
    <span class="CmdButtonDisable"><img src="$user.image003" title="友達申請" border="0" /></span>
      #end

#if($thisPage.isMyFavoritePage == false)
    <a href="$addFavoriteURL" class="CmdButton"><img src="$user.image004" title="お気に入り" border="0" /></a>
      #else
    <span class="CmdButtonDisable"><img src="$user.image004" title="お気に入り" border="0" /></span>
      #end

#else
    <span class="CmdButtonDisable"><img src="$user.image006" title="友達" border="0" /></span>
    <span class="CmdButtonDisable"><img src="$user.image007" title="お気に入り中" border="0" /></span>
    <span class="CmdButtonDisable"><img src="$user.image008" title="メッセージ" border="0" /></span>
    
    #end
    </div>
    
    
    
    <div class="WidgetPane">
    <div class="WidgetTitle">あばうと</div>
    <div class="WidgetItemList"><p>
文字を改行する際は<br>で。←表に見えるように＆lt;と＆gt;にしてますが、実際は(半角英数の<>)です。
<br>を入れなくてもwidthで指定している横幅を文字数が超えると勝手に折り返されます。
ここに入る文字のインデントは揃えても揃えなくてもokですが、タグ部分のインデントは弄らないで下さい。<br><br>
    ←に半角スペースでのインデントあり。この位置から初めてもOKです。(ソースを参照。表には反映多分されません。※全角スペースだと反映されるので、インデントの際は半角英数のスペースかtabキーを使ってください。
    ただ手ブロ内のhtml編集エディッターだとどうもtabキーが効かないみたいなので、一旦メモ帳などの余分なものが入らないテキストエディターで編集するとtabキーが使えます)
    </p></div>
    </div>

<div class="WidgetPane">
    <div class="WidgetTitle">link</div>
    <div class="WidgetItemList"><p>
    <a href="http://" target="_blank">リンク</a><br>
    <a href="http://" target="_blank">リンク</a><br>
    </p></div>
    </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>
    
    

    
    </div>
    <div id="SideBarEnd"></div>
    </div>
    
    </div>

<div id="boxC"> 
    $wrapperFooterPart
    </div>
        
    $bodyFooterPart
    </div>
</body>
</html>

詳細

<title>
#if ($tegaki.title != "")
『$tegaki.title』- 
#end
$user.nicknameさんの手書きブログ
</title>
        

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

/* 共通スタイル部分 開始 ----------------------------------------------------------------------- */
* {margin: 0;padding: 0;}

html,body{margin: 0;padding: 0;}

body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
       font-size:11px;margin: 0;color: #ff0000;background-color:#ffffff;}
        
a:link, a:active{color:#ff0000;text-decoration: none;}

a:visited{color:#810081;text-decoration: none;}

a:hover{background-color:#eeeeee;color:#ff0000;text-decoration: none;}

/* box設定 -------------------------------------------------------------------------------------- */
#boxA { width:560px;height:auto;float:left; }

#boxB { width:320px;height:auto;float:left;margin-top:0px; }

#boxC { clear:left; }
/* ---------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------- */

#Wrapper {width: 988px;margin: 0 auto;padding: 0px 1px 0px 1px;}

/* ---------------------------------------------------------------------------------------------- */

/* ヘッダペイン --------------------------------------------------------------------------------- */
#Header {float: left;width: 100%;height: 150px;margin-top: 10px;}

#HeaderTitle {display: block;float: left;width: 100%;height: 150px;background-position: left top;background-repeat: no-repeat;}
        
#MenuBar {display: none !important;}

#MenuBarLeft {display: none !important;}

#MenuBarRight {display: none !important;}

/* ---------------------------------------------------------------------------------------------- */

/* フッタペイン---------------------------------------------------------------------------------- */

#Footer {clear: both;width: 100%;text-align: center;padding: 20px 0px 20px 0px;font-size: 10px;}

/* ---------------------------------------------------------------------------------------------- */

/* 共通スタイル部分 終了 ------------------------------------------------------------------------ */

/* メニューペイン ------------------------------------------------------------------------------- */

/* 広告 ----------------------------------------------------------------------------------------- */

#Ad300x250 {float: left;width: 300px;height: 252px;margin-left: auto;margin-right: auto;}

/* ---------------------------------------------------------------------------------------------- */

/* サイド設定　---------------------------------------------------------------------------------- */

#SideBar {float: right;width: 300px;}
        
#SideBarTitle {float: left;width: 300px;height: 10px;padding: 0px 20px 0px 7px;background-position: left top;background-repeat: no-repeat;}
        
#SideBarBody {float: left;width: 300px;height: auto;border: 0px;padding: 0px 20px 0px 7px;background-position: left top;background-repeat: repeat;}
        
#SideBarEnd {float: left;width: 300px;height: 20px;padding: 0px 20px 0px 7px;background-position: left bottom;background-repeat: no-repeat;}
    
.SideBarItem {float: left;width: 100%;padding: 0px 0px 10px 0px;text-align: center;}

.SideBarItem .SideBarItemTitleProfile {float: left;width: 100%;height: 40px;background-position: center 0px;background-repeat: no-repeat;}

.SideBarItem .SideBarItemTitleLink {float: left;width: 100%;height: 40px;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 #ffffff;text-decoration: none;background-color: #ffffff;}
        
.SideBarItem .MyProfileCmd .CmdButton:HOVER {background-color: #eeeeee;}
    
.SideBarItem .MyProfileCmd .CmdButtonDisable {border: solid 1px #ffffff;color: #ffffff;background-color: #ffffff;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;
                            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: #ff0000;}

.WidgetTitle {width: 244px;color:#ff0000;background-color: #dddddd;border-top: 1px solid #dddddd;border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;}

.WidgetItemList {float: left;text-align: left;width: 244px;height: auto;border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;border-bottom: 1px solid #dddddd;background-color: #ffffff;}

.WidgetItemList a {color: #ff0000;text-decoration: none;text-align: left;}

.WidgetItemList a:hover {color: #ff0000;background-color:#eeeeee;text-decoration: none;text-align: left;}

.BlogTag {float: left;display: block;width: 60px;height: 60px;color: #ffffff;text-decoration: none;border-top: 1px solid #dddddd;border-right: 1px solid #dddddd;}

.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: #ff0000;}

.ReadMore {float: left;width: 100%;text-align: right;padding: 4px 0 0 0;font-size: 85%;}

.BlogThumb {text-decoration: none;display: block;width: 60px;height: 80px;border-top: 1px solid #dddddd;border-right: 1px solid #dddddd;}

.WidgetItemList .Category {width: 100%;text-align: left;padding: 2px 0 2px 5px;}

.WidgetItemList p{margin:1px 0px 1px 5px;}

/* ---------------------------------------------------------------------------------------------- */

/* メニューペイン ------------------------------------------------------------------------------- */

/* コンテンツペイン ----------------------------------------------------------------------------- */

#Contents {float: left;width: 651px;height: auto;}

.ContentsList {float: left;width: 651px;padding: 0px;margin-bottom: 20px;border: 0;}

/* ---------------------------------------------------------------------------------------------- */

.BlogThumbFull {float: left;text-align: center;}

.BlogImgFull {border: 2px solid #dddddd;}
        
.BlogThumbFull .BlogThumbFullTitle {float: left;width: 624px;height: 10px;padding: 0px 20px 0px 7px;}

.BlogThumbFull .BlogThumbFullBody {float: left;width: 600px;padding: 1px 1px 1px 1px;}

.BlogThumbFull .BlogThumbFullEnd {float: left;width: 624px;height: 20px;padding: 0px 20px 0px 7px;}
        
.BlogThumbFull .NaviBar {width: 100%;margin: 5px 0px 5px 0px;}
        
.BlogThumbFull .NaviBar .Navi_N,.BlogThumbFull .NaviBar .Navi_C,.BlogThumbFull .NaviBar .Navi_P {width: 33%;}

.BlogThumbFull .BlogInfoFull {margin: 0 0px 4px 60px;text-align: left;width: 482px;}

.BlogThumbFull .BlogInfoFull img {border: none;}
                
.BlogThumbFull .BlogInfoFull .BlogButton {float: right;text-align: right;width: 90px;}

.BlogThumbFull .BlogInfoFull .BlogLeft {float: left;text-align: left;width: 345px;height: 60px;margin: 0 0 4px 0;}

.BlogThumbFull .BlogInfoFull .BlogCmd {float: right;text-align: right;width: 135px;}

.BlogThumbFull .BlogInfoFull .BlogCmd .BlogCmdHeartIcon {margin: 10 5 5 0;float: right;}

.BlogThumbFull .BlogInfoFull .BlogCmd .EditHeartIcon {display: block;float: right;height: 20px;margin: 10 5 5 0;}

.BlogThumbFull .BlogInfoFull .BlogCmd .EditHeartIcon img {margin-left: 5px;}

.BlogThumbFull .BlogInfoFull .BlogCmd .Quote {display: block;width: 100%;height: 20px;color: #666666;}

.BlogThumbFull .BlogInfoFull .BlogDate {font-size: 11px;}
        
.BlogThumbFull .BlogInfoFull .BlogTitle {float: left;width: 380px;font-size: 20px;font-weight: bold;word-break:break-all;}

.BlogThumbFull .BlogInfoFull .BlogTitle .BlogTitleComment {font-size: 11px;font-weight: normal;}
        
.BlogThumbFull .BlogInfoFull .BlogLeft img {border: solid 1px #dddddd;}
                
.BlogThumbFull .BlogInfoFull .BlogLeft .Template {width: 45px;height: 60px;}

.BlogThumbFull .BlogInfoFull .BlogLeft .Tag {width: 60px;height: 60px;}

/* ---------------------------------------------------------------------------------------------- */

/* コメント ------------------------------------------------------------------------------------- */

.CommentDetail {text-align: left;}

.CommentDetail .CmtImg {text-align: left;border: solid 2px #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: #ff0000;}

#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: #dddddd;}

#PalletPaneH .PalleteCommand {text-align: center;}

#PalletPaneH .PalleteCommand select {font-size: x-small;}

#PalletPaneH #ColorButton .Color {width:14px;height:28px;border: solid 1px #dddddd;margin:3px 1px 3px 1px;}

#PalletPaneH #ColorButton .ColorRainbow {width:14px;height:15px;border: solid 1px #dddddd;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 #ff0000;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: #8632d7;}

#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;vertical-align: top;}

#PalletPaneH #RedoButton {color:#666666;font-size:xx-small;text-align:center;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: #dddddd;}

/* ---------------------------------------------------------------------------------------------- */

#CategoryName {margin: 0 0 5px 10px;}

/* ---------------------------------------------------------------------------------------------- */

-->
</style>
</head>
 
<body>
    $VBlogHeaderPart

<div id="Wrapper">
    $menuBar
    <div id="boxA"> 
    
    <div id="Header">
<!--　←これ

※リンクがいる場合は＜!-- --＞とこの説明文と下の＜img src="$user.image001" title="手ブロタイトル" border="0" /＞を削除して下さい。
これ→ -->

</div>

<div id="Contents">
    <div id="CategoryName">カテゴリ：$categoryName</div>

<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">< 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 ></a>
    #end
    </td>
    </tr>
    </table>

<div class="BlogInfoFull">
    <div class="BlogTitle">
    <div class="BlogDate">$tegaki.uploadDateText</div>
    $tegaki.title
    </div >
    <div class="BlogButton">
    $bookmarkButton
    <br><br>
    </div>
    </div>

<div class="BlogInfoFull">
    <div class="BlogLeft">
    #if($tegaki.getImg(0).template.fileName != "")
      #if(${tegaki.getImg(0).template.templateId} > 0)
    <a href="../VSearchBlogByTemplateS2.jsp?PD=${tegaki.getImg(0).template.templateId}">
    <img class="Template" src="${tegaki.getImg(0).template.fileName}_60.jpg" /></a>
      #end
    #end

#foreach($tag in $tegaki.tagList)
    <a href="../VSearchBlogByTagS.jsp?GD=${tag.tagId}">
    <img class="Tag" src="${tag.fileName}" onerror="this.onerror=null;this.src='http://img01.pipa.jp/tegaki/img06/DefaultTag.gif'" /></a>
    #end

</div>
    <div class="BlogCmd">
    #if($tegaki.themeId==6 || $tegaki.themeId==7)
    <a class="Quote" href="../VEditBlogS4.jsp?QD=$tegaki.tegakiId">引用してブログをかく</a>
    #end

<a class="EditHeartIconHeader cboxElement" href="../VCreateDotS4.jsp?M=0&ID=$user.userId&TD=$tegaki.tegakiId">
    <img src="http://img01.pipa.jp/tegaki/img/EditHeartIcon.gif" /></a>
    #foreach($heart in $heartList)
    <a href="../VBlogDotListS.jsp?PG=0&ID=$user.userId&TD=$tegaki.tegakiId" target="_blank">
    <img class="BlogCmdHeartIcon" src="$heart" /></a>
    #end
    </div>
    </div>

<div class="BlogDetail">
    <img src="${tegaki.getImg(0).fileName}" class="BlogImgFull" alt="$tegaki.title" />
    </div>
        
    <div class="BlogCommentTop">
    <img src="http://img01.pipa.jp/tegaki/img04/CommentIcon.gif" alt="コメント" /> x $tegaki.commentNum件
    </div>
    <div class="CommentNameCmd"></div>

$comments

<table class="NaviBar">
    <tr>
    <td class="Navi_N">
    #if($tegakiNext.tegakiId > 0)
    <a href="${tegakiNext.tegakiId}.html">< 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 ></a>
    #end
    </td>
    </tr>
    </table>
    </div>
    <div class="BlogThumbFullEnd"></div>
    </div>
    </div>
    </div>
    </div>

<div id="boxB"> 
    
    <div id="SideBar">
    <div id="SideBarTitle"></div>
    <div id="SideBarBody">
    
    
    <div class="SideBarItem" style="margin: 0;padding: 0;">
    <div id="Ad300x250"> $ad300x250 </div>
    </div>
    
                    
    <div class="SideBarItem">
    <div class="SideBarItemTitleProfile"></div>
    <div class="MyNickname">
    $user.nickname
    </div>
    
    <div class="MyImg">
    <img src="$user.image002" title="プロフィールタグ" />
    <a href="../$user.userId/">
    <img src="$user.myProfileImage001" title="ブログ一覧" />
    </a>
    </div>
    
    <div class="MyProfileCmd">
    #if($thisPage.isMyPage == false)
      #if($thisPage.isMyFriendPage == false)
    <a href="$requestFrinedURL" class="CmdButton"><img src="$user.image003" title="友達申請" border="0" /></a>
      #else
    <span class="CmdButtonDisable"><img src="$user.image003" title="友達申請" border="0" /></span>
      #end

#else
    <span class="CmdButtonDisable"><img src="$user.image006" title="友達" border="0" /></span>
    <span class="CmdButtonDisable"><img src="$user.image007" title="お気に入り中" border="0" /></span>
    <span class="CmdButtonDisable"><img src="$user.image008" title="メッセージ" border="0" /></span>

    #end
    </div>
    
    
    
    <div class="WidgetPane">
    <div class="WidgetTitle">あばうと</div>
    <div class="WidgetItemList">
    <font color="#ff0000"><p>
文字を改行する際は<br>で。←表に見えるように＆lt;と＆gt;にしてますが、実際は(半角英数の<>)です。
<br>を入れなくてもwidthで指定している横幅を文字数が超えると勝手に折り返されます。
ここに入る文字のインデントは揃えても揃えなくてもokですが、タグ部分のインデントは弄らないで下さい。<br><br>
    ←に半角スペースでのインデントあり。この位置から初めてもOKです。(ソースを参照。表には反映多分されません。※全角スペースだと反映されるので、インデントの際は半角英数のスペースかtabキーを使ってください。
    ただ手ブロ内のhtml編集エディッターだとどうもtabキーが効かないみたいなので、一旦メモ帳などの余分なものが入らないテキストエディターで編集するとtabキーが使えます)
    </font></p>
    </div>
    </div>

<div class="WidgetPane">
    <div class="WidgetTitle">ブログカテゴリ</div>
    <div class="WidgetItemList">$categoryList</div>
    </div>

</div>
                            
    

    
    </div>
    <div id="SideBarEnd"></div>
    </div>
    </div>

<div id="boxC"> 
    $wrapperFooterPart
    </div>
    $bodyFooterPart
    </div> 
</body>
</html>

比較サイト