無料ブログ作成ならJUGEM(ジュゲム)

ホーム

テンプレートHTML・CSSについて: 公開されているテンプレートのHTMLに{ad}タグがないものありますので、エラーが表示された場合は{ad}タグを追加してご利用ください。
テンプレートの利用について: 弊社が著作権を所有する画像等以外のテンプレートに関する著作権は制作者にあります。弊社提供以外のブログサービスで利用した場合は、その都度制作者の方にご確認ください。

テンプレート名 : sakura-blossom-ver.3

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}"/>
<link rel="alternate" type="application/atom+xml" href="{site_atom}" />
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var topBtn = $('#page-top');    
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
	$(function(){
		$.uHat.switchHat();
	});

$.uHat = {
		switchHat: function(settings) {
			uHatConA = $.extend({
				switchBtn: '.switchHat',
				switchContents: '.switchDetail',
				switchClickAddClass: 'nowOpen'
			}, settings);
			$(uHatConA.switchContents).hide();
			$(uHatConA.switchBtn).addClass("switchOn").click(function(){
				var index = $(uHatConA.switchBtn).index(this);
				$(uHatConA.switchContents).eq(index).slideToggle(400);
				$(this).toggleClass(uHatConA.switchClickAddClass);
			}).css("cursor","pointer");
		}
	};

})(jQuery);
</script>
</head>
<body onload="javascript:initval();">

<div id="header" class="clearfix">

<h1 id="site_title">{blog_name}</h1>
<div class="description">{blog_description}</div>

</div>

<!--
この部分は不必要になったら削除してください。
画像は見る人の各モニターサイズに合わせて拡大・縮小します
（ただし、モニターサイズ横幅が1020px以下は横スクロールになります）。

お好きな画像に替える時、横幅は現在主流モニターサイズの 1920px にしてください。高さはお好みで。
ただ、高さがあると主文が出てくるのに沢山スクロールしないといけませんので、760px～1080pxの間が
好ましいと思います。デフォルトのサイズは 1920x960px にしてあります。

無料版をお使いの方は画像アップロードの容量制限（300kb）がありますので、
精緻な写真は保存時のjpg品質を落としても容量オーバーになります。

使用写真はフリー素材を加工したものですから、そのままお使いいただいて問題ありませんが、画像の転用、再配布は禁止です。
-->

<div id="full-size">
<img title="画像ダウンロード・転用・再配布禁止です" src="http://img-cdn.jg.jugem.jp/d12/543560/20150304_1336515.jpg" alt="sakura-blossom" />
</div>

<div class="calendar">{calendar_horizontal}</div>

<div id="main">

<div class="entry_navi">
{prev_entry}&nbsp;|&nbsp;<a href="./">main</a>&nbsp;|&nbsp;{next_entry}
</div>

<div class="entry">
<h2>{entry_title_link}</h2>
<div class="entry_date">{entry_date}&nbsp;|&nbsp;<span class="red">{category_name}</span></div>
<div class="entry_body">{entry_description}</div>
<a name="sequel"></a>
<div class="entry_more">


<div class="entry_sequel_link">
<a href="./?eid={entry_sequel_id}#sequel">続きを読む</a>
</div>


{entry_sequel_text}

</div>

<div class="social-wrap">
<ul>
<li>{tweet_button_none_en}</li>
<li>{hatena_bookmark_simple}</li>
<li>{facebook_button}</li>
</ul>
</div>
<div class="entry_state">{entry_time_only}&nbsp;|&nbsp;{comment_num}&nbsp;|&nbsp;{trackback_num}</div>
{trackback_auto_discovery}
</div>

<a name="comments" id="comments">&nbsp;</a>
<div class="comment">

<div class="comment-body">{comment_description}</div>
<div class="comment_author">{comment_name}&nbsp;|&nbsp;{comment_time_24}</div>

<h3 class="comment_title">Comment</h3>
<div class="comment-send">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" />
<label for="name">name:</label>
<br />
<input class="fill-in" type="text" tabindex="1" name="name" id="name" value="{cookie_name}" />
<br />
<label for="email">email:</label>
<br />
<input class="fill-in" type="text" tabindex="2" name="email" id="email" value="{cookie_email}" />
<br />
<label for="url">url:</label>
<br />
<input class="fill-in" type="text" tabindex="3" name="url" id="url" value="{cookie_url}" />
<br />
<label for="description">comments:</label>
<br />
<textarea tabindex="4" id="description" name="description" rows="10"></textarea>
<br />
<input class="transmit" tabindex="5" type="submit" value="送信" onclick="javascript:setval();" />&nbsp;<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
&nbsp;<label for="set_cookie">Cookieを保存</label>
</form>
</div>
</div>

<a name="trackback" id="trackback">&nbsp;</a>
<div class="trackback">
<h3 class="trackback_title">Trackback URL</h3>
<div class="trackback_url">{trackback_url}</div>
</div>

<div class="trackback-main">
<h3 class="trackback_maintitle">Trackback</h3>
<div class="trackback-body">{trackback_excerpt}</div>
<div class="trackback_author">{trackback_title}&nbsp;|&nbsp;{trackback_blog_name}&nbsp;|&nbsp;{trackback_time_24}</div>
</div>

<div class="profile-unit">
<h2 class="profile_title">Profile</h2>
<div class="profile_name">name : {profile_name}</div>
<div class="profile-body">{profile_description}</div>
<div class="entry-bottom"><a href="./">back to main</a></div>
</div>

<div class="prenext-navi">{full_pager_link}</div>

</div>

<div id ="nav">

<ul class="management">
<li><a href="./admin/" title="Login"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150324_1351334.png" width="32" height="32" alt="Login" /></a></li>
<li><a href="./?mode=rss" title="RSS 1.0"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150324_1351335.png" width="32" height="32" alt="RSS 1.0" /></a></li>
<li><a href="./?mode=atom" title="Atom 0.3"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150324_1351336.png" width="32" height="32" alt="Atom 0.3" /></a></li>
<li class="kensaku switchHat" title="検索"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150324_1351337.png" width="32" height="32" alt="検索" /></li>
</ul>

<div class="reference switchDetail">
<form class="refer-form" method="get" action="./">
<input id="character-input" type="text" name="search" placeholder="Search in this site" /><input id="magnifier" type="image" src="http://img-cdn.jg.jugem.jp/d12/543560/20150226_1332392.png" value="検索" alt="検索" title="検索" />
</form>
</div>

<div class="side-unit">
<h3 class="switchHat">Recent entries</h3>
<div class="side-contents switchDetail">{selected_entry_list}</div>
</div>

<div class="side-unit">
<h3 class="switchHat">Categories</h3>
<div class="side-contents switchDetail">{category_list}</div>
</div>

<div class="side-unit">
<h3 class="switchHat">Recent comments</h3>
<div class="side-contents switchDetail">
<ul class="red">

<li>{recent_comment_item_title}<a href="./?eid={recent_comment_item_entry_id}#comments"><br />&nbsp;-&nbsp;{recent_comment_item_name}&nbsp;({recent_comment_item_date})</a>
</li>

</ul>
</div>
</div>

<div class="side-unit">
<h3 class="switchHat">Recent trackback</h3>
<div class="side-contents switchDetail">
<ul class="red">

<li>{recent_trackback_item_title}<a href="./?eid={recent_trackback_item_entry_id}#comments"><br />&nbsp;-&nbsp;{recent_trackback_item_blog_name}&nbsp;({recent_trackback_item_date})</a>
</li>

</ul>
</div>
</div>

<div class="side-unit">
<h3 class="switchHat">Archives</h3>
<div class="side-contents switchDetail">{archives_list2ex}</div>
</div>

<div class="side-unit">
<h3 class="switchHat">Link</h3>
<div class="side-contents switchDetail">{link_list}</div>
</div>

<!--
フリースペースの編集は必ずリストタグを使ってください。
詳細はCSS上部に記載してます。
フリースペース編集場所は編集トップ、メニューの「デザイン」－「サイドバー編集」－「フリースペース」
ブログパーツをフリースペースで使うときは、埋め込めるブログパーツの最大幅は255pxまでです。

フリースペースを折りたたむ場合はh3を<h3 class="switchHat"></h3>に、<div class="side-contents"></div>を<div class="side-contents switchDetail"></div>にしてください。
free space1のみ実装してます。
-->

<div class="side-unit">
<h3 class="switchHat">{freespace_title1}</h3>
<div class="side-contents switchDetail">{freespace_contents1}</div>
</div>

<div class="side-unit">
<h3>{freespace_title2}</h3>
<div class="side-contents">{freespace_contents2}</div>
</div>

<div class="side-unit">
<h3>{freespace_title3}</h3>
<div class="side-contents">{freespace_contents3}</div>
</div>

<div class="side-unit">
<h3>{freespace_title4}</h3>
<div class="side-contents">{freespace_contents4}</div>
</div>

<div class="side-unit">
<h3>{freespace_title5}</h3>
<div class="side-contents">{freespace_contents5}</div>
</div>

<div class="side-unit">
<h3>Recommend</h3>
<div class="side-contents">{amazon_item}</div>
</div>

<dl class="profile">
<dt>Web master</dt>

<dd><a href="./?pid={user_item_id}" title="Profile詳細">{user_item_name}</a></dd>








<dd class="pakutaso-banner"><a href="http://www.pakutaso.com/" title="ぱくたそ・フリー写真素材"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150304_1336517.png" width="108" height="31" alt="banner" /></a></dd>
</dl>

<div class="ad">
<h3>Public relations</h3>
<div class="ad-contents">{ad}</div>
</div>

</div>

</div>

<div id="footer">

<div class="banner">{powered}</div>


<div class="copyright">
template by <a href="http://hidarikikiryu.jugem.jp/">lefty_haru</a> {copyright}
</div>

</div>

</div>

<ul id="sns-unit">
<li id="page-top"><a href="#header" title="このページの上へ"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150327_1353649.png" width="48" height="48" alt="Page top" /></a></li>
<li class="fb-icon"><a href="ここにfacebookURL" title="facebook"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150327_1353663.png" width="32" height="32" alt="facebook" /></a></li>
<li class="twitte-icon"><a href="ここにtwitterURL" title="twitter"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150327_1353680.png" width="32" height="32" alt="Twitter" /></a></li>
<li class="rss-icon"><a href="./?mode=rss" title="RSS feed"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150324_1351335.png" width="32" height="32" alt="RSS feed" /></a></li>
</ul>




</body>
</html>

CSS

@charset "EUC-JP";

/* ----------------------------------------
 作成日:2015.03.27
 テンプレート名: sakura-blossom-ver.3
 by lefty_haru (http://hidarikikiryu.jugem.jp)
---------------------------------------- */

/* ←ここから
読み終わりましたらこの部分は邪魔ですので削除してください。
文字、色、サイズなど改変はご自由におやりください。そのままおよび改変後の再配布は禁止です。

一部変更しました。
アイコンのマウスオンとマウスアウトの色変更が出来るようになっています。
検索も折りたたみにしました。
変更に伴い、以前のアイコンは削除しますので直リンのままお使いになっていた方は、
こちらのver.3に変更してください。

JQuery、Java script、CSS 3は一部しか判りませんので質問いただいてもお答えしかねます。
特に難しい記述をしておりませんから、改変箇所は検索されれば回答は見つかると思います。
デフォルト状態（初期状態）の不具合がありましたらご連絡いただけますと対処いたします。
改変後の不具合のサポートはしませんのでご容赦ください。

メインで使っている写真はフリー素材を加工したものですから、そのままお使いいただいて問題ありませんが、画像の転用、再配布は禁止です。
facebookなどの各アイコンはフリー素材を加工したものと自分で製作したものがありますので当該テンプレート以外でお使いいただくのは禁止です。

通常のモニターでは厳密なキャリブレーションは無理ですが、
正しく色合いが映るように最低限のキャリブレーションはおやりになったほうが良いと思います。
キャリブレーションはモニター側とパソコン側両方行えます。
詳しくお知りになりたいのでしたら「パソコン　モニター　キャリブレーション」で検索すればヒットします。

パソコンはwindows7ならデスクトップ画面で右クリック。
グラフィックプロパティをクリックすれば調整パネルが出ます。
調整の方法は検索してください。

当方がモニターをキャリブレーションするのに使っているサイトです。
2つのサイトで両方正しく見えるようにモニター側を調整しています。

http://urawazapclife.blog119.fc2.com/blog-entry-351.html
http://www.takoland.com/entrance/monitor_setting.htm

Mac os X v10.8（Mountain Lion）以降および、Windows7（更新プログラム適用）以降の
OSに最適化してますので、それ以前のOSでのご利用は正しく表示されません。
透過や影はCSS3に対応していないIE10以前のブラウザでは表現されません
（IE9～IE11では正常に表示。IE8ではブログタイトルの背景色が無くなります。
修正方法が判りましたら対処しますが、IE8はサポート終了のOS：winXPになるため、暇なときに探しての対応となります。現在使えるVista、win7、win8でしたら問題は無いと思います）。
Fire Fox、Google Chrome、Operaをお使いの方は最新のバージョンにしてください。
要所に変更時の注意点を記載してありますのでお読みください。

エントリー内最大画像横幅は640pxまで。

右サイドバーのフリースペースの編集は必ずリストタグを使ってください。
リストタグを使わないとスペースが均一に表示されません。
<ul>
<li></li>
<li></li>
</ul>
ここまで→ */

/* 初期化 ---------- */

body,h1,h2,h3,h4,p,div,img,ul,ol,li,dl,dd,dt,q,blockquote,table,th,td,form,input { 
margin: 0; padding: 0;
 }

body { 
font-size: 16px; color: #222; font-style: normal; font-weight: normal; letter-spacing: normal;
font-family: "Lucida Grande","segoe UI",Verdana,"游ゴシック体","游ゴシック",YuGothic,"Yu Gothic","ヒラギノ角ゴ proN w3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
line-height: 1em;
background: #f8f8f8;
text-align: center;
 }

h1, h2, h3 { 
font-weight: normal;
 }

img {
 border: 0;
 }

ul, ol {
list-style-type: none;
}

/* リンク */
#site_title a {
color: #333; text-decoration: none;
}
#site_title a:hover {
color: #b33e5c; text-decoration: none;
}

.calendar a {
color:#b33e5c; text-decoration:none;
}
.calendar a:hover {
color:#b33e5c; text-decoration:underline;
}

.entry_body a {
color: #b33e5c; text-decoration: none;
}
.entry_body a:hover {
color: #b33e5c; text-decoration: underline;
}

.entry h2 a {
color: #333; text-decoration: none;
}
.entry h2 a:hover {
color: #b33e5c; text-decoration: none;
}

a {
color: #333; text-decoration: none;
}
a:hover	{
color: #b33e5c; text-decoration: underline;
}

/* リンク　コメント・トラックバック */
.red a { 
color:#b33e5c; text-decoration: none;
 }
.red a:hover { 
color:#b33e5c; text-decoration: underline;
 }

/* クリアー */

.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden
 }

.clearfix {
 display: inline-block;
 }

/* IE7 */
*+html .clearfix {
 min-height: 1%;
 }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/* ---------- レイアウト指定 */

/* -------------------- 2カラムレイアウト ----------------------------- */

/*
ヘッダーの位置はブラウザ高さの0～100%内で上下移動可能です（px指定もOK）。
top: 7%;の所に任意の%に変えて下さい。top: 0;でブラウザの上部にくっつきます。
％の基準位置はヘッダー背景上辺です。ですので50%に設定しても見た目は少し下に見えます。
ヘッダーを上部につけたときは、ヘッダー背景の高さは少し狭いほうが見た目が良いと思います。
高さを狭くするにはヘッダーのpaddingを調整するかメインタイトルとブログ説明のpaddingを調整して下さい。

上部につけた時の当方のデフォルトは、#headerのpaddingはそのままで
h1#site_title　　padding: 8px 40px 8px 30px;
.description　　padding: 8px 0px;
*/
/*
ヘッダー背景は透過量の調節可能です。backgroundのrgba最後の0.8を任意の数値に変えて下さい。
0.0で完全透過、1.0で不透明になります。小数点以下は一桁で変更。
*/
#header { 
position: absolute;
top: 5%;
left: 0;
z-index: 2;
width: 100%;
min-width: 1020px;
margin: 0px auto;
padding: 15px 0px 15px;
background: rgba(255, 255, 255, 0.8);
 }

#full-size { 
position: relative;
left: 0;
top: 0;
z-index: 1;
width: 100%;
min-width: 1020px;
margin: 0px auto;
overflow: hidden;
 }

#full-size img { 
width: 100%;
 }

/* メインをノーマルカラーにしたい時は #f8f8f8（推奨）  */
#wrapper { 
position: relative;
width: 100%;
min-width: 1020px;
margin: 0px auto;
background: #fef6f6;
 }

#contents { 
width: 1020px;
margin: 0 auto;
 }

#main { 
float: left;
width: 690px;
text-align: left;
margin: 0px 50px 0px 10px;
padding: 20px 0px 0px;
}

#nav { 
float: right;
width: 240px;
text-align: left;
margin: 0px 10px 0px 20px;
padding: 20px 0px 0px 0px;
}

#footer { 
width: 100%;
padding: 100px 0px 20px;
border-top: 1px solid #bbb;
background: #fff;
}

/* -------------------- ヘッダー部 ----------------------- */

/* ブログタイトル */
h1#site_title { 
float: left;
text-align: left;
font-size: 22px;
padding: 15px 40px 15px 30px;
}

/* ブログ説明 */
.description {
text-align: left;
font-size: 12px;
margin: 0px 0px 0px 30px;
padding: 15px 0px;
}

/* ナビポインタ、カレンダーはお好きなほうを使ってください。デフォルトはカレンダーです */

/* ------------------------ ナビポインタ */

.pointer {
text-align: center;
padding: 20px 0px;
background: #fff;
box-shadow: 0px 2px 4px #9c9c9c;
 }

/* ---------------------- カレンダー */

.calendar {
text-align: center;
font-size: 14px; color: #333; letter-spacing: 0.1em;
padding: 20px 0px;
background: #fff;
box-shadow: 0px 2px 4px #9c9c9c;
}

/* ------------------------------ main　エントリー -------------- */

/* エントリー単体表示時上部プレビューネクストリンク */

.entry_navi {
text-align: center;
font-size: 13px;
margin: 10px 0px;
}

/* エントリー本体 */

.entry {
width: 690px;
margin: 0px 0px 40px;
}

/* line-heightはエントリータイトルが2行になった際、文字が重ならないギリで設定してます */
h2 {
font-size: 24px; line-height: 1.1em;
margin: 0px 15px 0px;
padding: 20px 0px 5px;
}

.entry_date {
color: #b33e5c; font-size: 13px;
margin: 0px 0px 0px 15px;
padding: 0px 0px 10px 0px;
}

.entry_body {
font-size: 14px; line-height: 1.7em;letter-spacing: 0.1em;
margin: 0px 15px 0px;
padding: 15px 0px 0px;
}

.entry_more {
font-size: 14px; line-height: 1.7em;letter-spacing: 0.1em;
margin: 0px 15px 0px;
padding: 15px 0px 0px;
}

.entry_sequel_link {
text-align: right;
font-size: 14px;
margin: 0px 5px 0px 0px;
}

.entry_sequel_link a { 
color:#333;
text-decoration:none;
}
.entry_sequel_link a:hover {
color:#b33e5c;
text-decoration:underline;
}

/* エントリー掲載画像：640pxまで */
.entry_body img, .entry_more img {
 padding: 9px;
 border: 1px solid #aaa;
 background: #fefefe;
 }

/*
引用：1行未満短文はq、複数行はblockquote使用
記事の投稿リッチエディターでの引用（”のアイコンボタン）を使うとblokquoteのみになります。
qを使う場合は、HTMLモードに切り替え<q></q>タグを使ってください。
<q>タグを打ち込むと自動生成で<q></q>が作られるので、<q>ここに</q>引用短文を入れてください。
アップロード表示では自動で引用の「」が生成されます。
*/
q {
background: #fff;
border-bottom: 1px dashed #999;
}

blockquote {
margin: 10px 0px;
padding: 9px;
border: 1px dashed #999;
background: #fff;
}

/* ソーシャルボタン */
.social-wrap {
margin: 30px 0px 0px;
padding: 10px 0px;
border: 1px solid #bbb;
background: #fff;
}

.social-wrap ul {
padding: 0px 0px 0px 10px;
list-style: none;
}
.social-wrap li {
display: inline;
}

/* エントリー下部のカテゴリー・コメント・トラックバック */
.entry_state {
font-size: 13px;
text-align: right;
padding: 10px 5px 10px 0px;
}

/* 単体エントリー表示時　コメント部 */

.comment {
margin: 20px 0px 30px;
padding: 10px 0px;	
}

.comment-body {
font-size: 14px; line-height: 1.8em;
margin: 0px 15px;
}

.comment_author {
font-size: 13px;
text-align: right;
margin: 10px 0px 25px;
padding: 2px 10px 0px 0px;
border-top: 1px dashed #999;
}

h3.comment_title {
font-size: 18px;
margin: 20px 15px 0px;
padding: 0;
border: none;
}

.comment-send {
font-size: 14px; line-height: 1.8em;
margin: 15px 15px 0px;
padding: 0px;
}
	
.comment-send .fill-in { 
width: 250px;
padding: 2px 0px;
 }
.comment-send textarea { 
width: 500px;
 }

.transmit {
letter-spacing: 0.1em;
padding: 2px 4px;
 }

/* 単体エントリー表示時　トラックバック部 */

.trackback {
font-size: 14px; line-height: 1.8em;
margin: 20px 15px 20px;	
}

.trackback h3.trackback_title {
font-size: 18px;
margin: 20px 0px 10px;
padding: 0;
border: none;
}

.trackback_url {
font-size: 16px;
padding: 10px;
border: 1px solid #bbb;
background: #fff;
}

.trackback-main {
font-size: 14px; line-height: 1.8em;
}

.trackback-main h3.trackback_maintitle {
font-size: 18px;
margin: 10px 15px;
padding: 0;
border: none;
}

.trackback-body {
margin: 0px 15px;
}

.trackback_author {
font-size: 13px;
text-align: right;
margin: 10px 0px 25px;
padding: 2px 10px 0px 0px;
border-top: 1px dashed #999;
}

/* ---------------------- メイン下部プレビューネクストナビ */
.prenext-navi {
text-align: center;
font-size: 14px; color: #b33e5c;
margin: 0px 0px 30px;
}

.prenext-navi span { 
display: inline-block;
margin: 0px 3px;
padding: 2px 6px;
border: 1px solid #bbb;
background: #fff;
 }

.prenext-navi span.current { 
border: none;
background: none;
 }

.prenext-navi span.pager_next, .prenext-navi span.pager_prev { 
margin: 0px;
padding: 0px;
border: none;
background: none;
 }

.prenext-navi span.pager_first { 
margin: 0px;
padding: 0px 5px 0px 7px;
border: none;
background: none;
 }

.prenext-navi span.pager_last { 
margin: 0px;
padding: 0px 7px 0px 5px;
border: none;
background: none;
 }

.prenext-navi a { 
color: #333; text-decoration: none;
 }
.prenext-navi a:hover { 
color: #b33e5c; text-decoration: none;
 }

/* ------------------ main　プロフィール詳細ページ用 */

.profile-unit {
width: 690px;
margin: 0px 0px 40px;
border-bottom: 1px solid #fff;
}

h2.profile_title {
font-size: 20px;
margin: 0px 0px 20px;
padding: 10px 0px 0px 15px;
border-bottom: 1px dashed #999;
}

.profile_name {
font-size: 14px;
margin: 0px 0px 20px 15px;
}

.profile-body {
font-size: 14px; line-height: 1.7em;letter-spacing: 0.1em;
margin: 0px 15px 0px;
padding: 15px 0px 0px;
}

.entry-bottom { 
text-align: right;
font-size: 14px;
padding: 10px 10px 30px 0px;
border-bottom: 1px solid #cacaca;
 }

/* ---------------------------------------- 右サイド ------------------------ */

.side-unit {
padding: 0px 0px 30px;
border-bottom: 1px solid #bbb;
}

h3 {
font-size: 17px; color: #333;
padding: 25px 0px 0px 10px;
}

h3.switchOn:hover {
color: #b33e5c;
}

h3.nowOpen:after {
content: " ↑";
}

.side-contents {
font-size: 12px;
}

.side-contents ul {
list-style: none;
padding: 5px 0px 0px;
}

.side-contents li {
line-height: 1.3em;
padding: 20px 0px 0px 15px;
}

/* ------------------ ログイン */

ul.management {
padding: 20px 0px 30px 10px;
list-style: none;
border-bottom: 1px solid #bbb;
 }

ul.management li {
display: inline-block;
width: 32px; height: 32px;
font-size: 13px;
margin: 10px 10px 0px 0px;
padding: 0px;
}

/* マウスオン・マウスアウト時の色変更はご自由に */
ul.management li a {
width: 32px; height: 32px;
display: block;
background: #888;
border-radius: 50%;
 }
ul.management li a:hover {
background: #666;
 }

ul.management li.kensaku {
width: 32px; height: 32px;
background: #888;
border-radius: 50%;
 }
ul.management li.kensaku:hover {
background: #666;
 }

/* ------------- 検索 */
.reference {
position: relative;
padding: 30px 0px 30px;
border-bottom: 1px solid #bbb;
}

.refer-form {
position: relative;
padding: 0px 10px 0px;
}

#character-input {
width: 214px; height: 28px;
font-size: 13px;
padding: 1px 2px 1px;
background: #fafafa;
border: 1px solid #aaa;
}

#magnifier {
position: absolute;
top: 2px;
left: 198px;
}

/* -------------- user */
dl.profile { 
font-size: 13px;
padding: 25px 0px 30px 10px;
border-bottom: 1px solid #bbb;
}

dl.profile dt { 
line-height: 1.3em;
padding: 5px 0px 5px;
}

dl.profile dd { 
line-height: 1.3em;
padding: 5px 0px 5px;
}

dl.profile dd img { 
padding: 3px;
border: 1px solid #aaa;
background: #fff;
 }

/* -------- for mobile QR code */
dl.profile dd.mobile { 
line-height: 1.3em;
padding: 15px 0px 5px;
}

/* ぱくたそ */
dl.profile dd.pakutaso-banner { 
padding: 20px 0px 5px;
 }

/* スポンサーリンク */
.ad {
padding: 0px 0px 30px;
}

.ad-contents {
font-size: 12px;
padding: 25px 0px 0px 10px;
}

/* ---------------------------------------- フッター -------------------------- */

/* ジュゲムバナー */
.banner { 
text-align: right;
font-size: 13px;
padding: 0px 120px 3px 0px;
}

/* --------------------------------------- 著作権 */
.copyright {
text-align: right;
font-size: 13px;
margin: 0px 120px 0px 0px;
}

.copyright a {
text-decoration: none;
}
.copyright a:hover {
text-decoration: underline;
}

/* SNS Icon */

/*
出現位置はbottom:15px;righ:20px;の数値を好みの数値に変更してください。
ワイド画面だと問題ありませんが、従来の4：3画面などだと左右の背景が無くなり、コンテンツ内に
乗っかりますので、乗っかったときでも邪魔にならないよう、なるべく右より、下よりにしてください。
*/

ul#sns-unit {
width: 48px;
position: fixed;
bottom: 15px;
right: 20px;
z-index: 3;
text-align: center;
list-style: none;
 }

ul#sns-unit li#page-top {
display: block;
width: 48px; height: 48px;
margin: 0px 0px 5px;
padding: 0px;
}

/* ページトップ・各SNSのマウスオン・マウスアウト時の色変更は其々のaとa:hoverの色指定をご自由に変えて下さい */
ul#sns-unit li#page-top a {
display: block;
width: 48px; height: 48px;
background: #888;
border-radius: 50%;
 }
ul#sns-unit li#page-top a:hover {
background: #666;
 }

ul#sns-unit li.fb-icon {
display: block;
width: 32px; height: 32px;
margin: 0px 8px 5px;
padding: 0px;
}

ul#sns-unit li.fb-icon a {
display: block;
width: 32px; height: 32px;
background: #7b8baa;
border-radius: 50%;
 }
ul#sns-unit li.fb-icon a:hover {
background: #4c6cb3;
 }

ul#sns-unit li.twitte-icon {
display: block;
width: 32px; height: 32px;
margin: 0px 8px 5px;
padding: 0px;
}

ul#sns-unit li.twitte-icon a {
display: block;
width: 32px; height: 32px;
background: #9ecdd8;
border-radius: 50%;
 }
ul#sns-unit li.twitte-icon a:hover {
background: #9cb1ba;
 }

ul#sns-unit li.rss-icon {
display: block;
width: 32px; height: 32px;
margin: 0px 8px 5px;
padding: 0px;
}

ul#sns-unit li.rss-icon a {
display: block;
width: 32px; height: 32px;
background: #d8a77e;
border-radius: 50%;
 }
ul#sns-unit li.rss-icon a:hover {
background: #9f8255;
 }

/* JQUERY　ページトップ */
/* SNS Iconを削除してページトップ単体で使うときはこちらを使って下さい。 */

/* ←使うときはこれを削除
#page-top {
position: fixed;
z-index: 3;
bottom: 30px;
right: 30px;
 }

#page-top a {
display: block;
 }
#page-top a:hover {
opacity: 0.8;
 }
使うときはこれを削除→ */

/* --------------------------------- 折りたたみ */

.switchOn {
display: block;
}

高品質デザイン選び放題で、あなた好みのブログに。今すぐブログ作成！: 今すぐ 無料ブログ をはじめよう！ ≫ブログ作成