ベータ版1-2

戻る

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

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

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

カスタム版1です。ヘッダー内のタイト画像orテキスト表示を選べるタイプです。
また手ブロトップやマイページへのナビが標準搭載されています。
テンプレ1とデザイン的にはほぼ変わりありません。

ヘッダー下のカテゴリーの表示をやめたい時は下記のようにしてください。普通に削除するとエラーが出ます。


一覧
ヘッダーの画像を表示した場合。↓
一覧画像の場合

ヘッダーの画像を非表示にして、代わりにテキストを表示した場合。↓
一覧文字の場合

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

#tegaki {margin-top:2px;margin-left:10px;text-align:center;}

#tegaki2 {margin-top:5px;margin-left:10px;text-align:left;}

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

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

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

#SideBarBody {float: left;width: 300px;height: auto;border: 0px;padding: 0px 20px 0px 7px;}

#SideBarEnd {float: left;width: 300px;height: 20px;padding: 0px 20px 0px 7px;}

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

.SideBarItemTitleProfile {float: left;width: 100%;height: 10px;}

.SideBarItemTitleLink {float: left;width: 100%;height: 5px;}

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

.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">
    <div id="tegaki">
    <a href="http://tegaki.pipa.jp/">手書きブログトップ</a>
    　<a href="../VMyPageS.jsp">マイページ</a>
    　<a href="http://sites.google.com/site/teburohelp/">ヘルプ</a>
    </div>
    <br>
    <br>
    <div id="tegaki2">
ここにお知らせやメモなどを挿入。<br>
文字は割と長めに設定できますが、長すぎてもコンテンツのサムネイルに文字が掛かる惧れがあります。<br>
長文の挿入サンプルは焔斬アカの一覧などをご覧ください。<br>
焔斬アカへのリンクについてベータトップやサイトindex下から飛んでご覧になれます。<br>
150pxに高さを設定していますが、長めに文字を記入したい方は200pxくらいに変更しても大丈夫です。<br>
変更する場合は#Headerと#HeaderTitleのhightを同じ数字にして下さい。
文字の方ではなく、画像の方をお使いになりたい場合は、<div>タグ下の<br>からこの項目を削除頂くか、で
囲んでから、下記のを外して下さい。
ご自分の手ブロ一覧にリンクを貼りたい場合は上のもの、リンクはなくて画像だけでいい場合は下のものをお使いください。
    </div>
<!--
    <a href="../$user.userId/" id="HeaderTitle">
    <img src="$user.image001" border="0" />
    </a>

<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">
    <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＞で。←表に見えるように全角にしています。いつの間にかコードが記号に変換されていました。
実際は(半角英数の<>)です。＜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;}

#tegaki {margin: 0 0 5px 10px;text-align:center;}

#tegaki2 {margin-top:5px;margin-left:10px;text-align:left;}
/* ---------------------------------------------------------------------------------------------- */

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

#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">
    <div id="tegaki">
    <a href="http://tegaki.pipa.jp/">手書きブログトップ</a>
  　 <a href="../VMyPageS.jsp">マイページ</a>
  　 <a href="../VCreateDotS4.jsp?M=2&ID=$user.userId&TD=$tegaki.tegakiId" class="Text" style="width:70px;">マイハート送信</a>
    <a href="../VCreateDotS4.jsp?M=0&ID=$user.userId&TD=$tegaki.tegakiId" class="EditHeartIconHeader cboxElement" style="width:35px;height:19px;padding:3px 0 0 2px;font-size:11px;">[編集]</a>
  　 <a href="http://sites.google.com/site/teburohelp/">ヘルプ</a>
    </div>
<!-- ←これ
    <div id="tegaki2">
画像じゃなくて文字を使う場合はここに文章を入れてください。
通常は非表示にしています。
    </div>

※リンクがいる場合は＜!-- --＞とこの説明文と下の＜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">
    <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>

比較サイト