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

ホーム

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

テンプレート名 : simple black

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="{site_encoding}">
<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="https://imaging.jugem.jp/template/js/cookie.js"></script>

<link href="gmw.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="javascript:initval();">
{gmo_header_src}
<div id="container">
  <div id="wrapper"> <a id="top" name="top"></a>
    
    <div id="header">
      
      <h1>{blog_name}</h1>
      <div id="description">{blog_description}</div>
      
    </div>
    
    
    <div id="content">
      
      <div id="main">
        
        <div id="entryNavi"> {prev_entry} | <a href="./">main</a> | {next_entry} </div>
        
        
        <div class="entry">
          <h2>{entry_title_link}</h2>
          <div class="entryBody">{entry_description}</div>
          <a name="sequel"></a>
          <div class="entryMore">{entry_sequel}</div>
          <div class="status">
            <div class="btn">{love}</div>
            <div class="btn">{mixi_check1}</div>
            <div class="btn">{google_plus_one_medium}</div>
            <div class="btn">{facebook_button}</div>
            <div class="btn">{hatena_bookmark_standard}</div>
            <div class="btn">{tweet_button_none}</div>
            <div class="clear">&nbsp;</div>
          </div>
          <div class="banner_01"><a href="http://ramen.ibimf.link/" target="_blank"><img src="http://ramen.ibimf.link/wp-content/themes/ramen/images/rb_01.png" alt="らぁめん道｜有名店のラーメン通販　毎日ランキング形式で配信中"></a></div>
        </div>
        {trackback_auto_discovery}
        
        
        <div id="relatedEntry">
          <div id="relateTitle">関連する記事</div>
          {related_entry_list} </div>
        
        
        <a name="comments"></a>
        <div id="comment">
          
          
          <div class="commentBody">{comment_description}</div>
          <div class="commentState">
            {comment_name} | {comment_time}
          </div>
          
          <div id="commentSendTitle">コメントする</div>
          <div class="commentSendForm">
            <form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
              <input type="hidden" name="entry_id" value="{entry_id}" class="input" />
              <label for="name">name:</label>
              <br/>
              <input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" />
              <br />
              <label for="email">email:</label>
              <br>
              <input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" />
              <br />
              <label for="url">url:</label>
              <br>
              <input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" />
              <br />
              <label for="description">comments:</label>
              <br />
              <textarea tabindex="4" id="description" name="description" rows="5"></textarea>
              <br />
              <input tabindex="5" type="submit" value="コメント送信"  onclick="javascript:setval();" />
              &nbsp;&nbsp;
              <input type="checkbox" name="set_cookie" value="1" id="set_cookie">
              &nbsp;
              <label for="set_cookie">入力情報を登録しますか？</label>
            </form>
          </div>
        </div>
        
        
        <a name="trackback"></a>
        <div id="trackback">
          <div id="trackbackURL">この記事のトラックバックURL</div>
          <input type="text" value="{trackback_url}" />
          <div id="trackbackTitle">トラックバック</div>
          
          <div class="trackbackName">{trackback_title}</div>
          <div class="trackbackBody">{trackback_excerpt}</div>
          <ul class="trackbackState">
            <li>{trackback_blog_name}</li>
            <li>{trackback_time}</li>
          </ul>
          
        </div>
        
        
        <div id="profile">
          <div id="profileTitle">プロフィール</div>
          <div id="profileName">{profile_name}</div>
          <div id="profileBody">{profile_description}</div>
        </div>
        
        
        
        
        <div id="pager"> {full_pager_link} </div>
        
        <div class="pageTop"> <a href="#top">このページの先頭へ▲</a> </div>
        <br class="clear" />
      </div>
      
      
      <div id="side">
        
        <h3>PROFILE</h3>
        <div class="sideContents"> {user_list} </div>
        
        
        <h3>SEARCH THIS SITE</h3>
        <div class="sideContents">
          <form method="get" action="./">
            <table border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td><input id="search" name="search" size="20" class="search" /></td>
                <td><input type="image" value="Search" src="http://img-cdn.jg.jugem.jp/c32/121605/20150217_1556138.gif" class="ml10" /></td>
              </tr>
            </table>
          </form>
        </div>
        
        
        <h3>CALENDAR</h3>
        <div class="sideContents calendar">
          <table>
            <tr align="center">
              <td class="sun">S</td>
              <td class="day">M</td>
              <td class="day">T</td>
              <td class="day">W</td>
              <td class="day">T</td>
              <td class="day">F</td>
              <td class="sat">S</td>
            </tr>
          </table>
          {calendar} </div>
        
        
        <h3>SELECTED ENTRIES</h3>
        <div class="sideContents"> {selected_entry_list} </div>
        
        
        <h3>CATEGORIES</h3>
        <div class="sideContents"> {category_list} </div>
        
        
        <h3>ARCHIVES</h3>
        <div class="sideContents">{archives_list2}</div>
        
        
        <h3>RECENT COMMENT</h3>
        <div class="sideContents"> {recent_comment_list2} </div>
        
        
        <h3>RECENT TRACKBACK</h3>
        <div class="sideContents"> {recent_trackback_list2} </div>
        
        
        <h3>RECOMMEND</h3>
        <div class="sideContents tac"> {amazon_item} </div>
        
        
        <h3>{freespace_title1}</h3>
        <div class="sideContents"> {freespace_contents1} </div>
        
        
        <h3>{freespace_title2}</h3>
        <div class="sideContents"> {freespace_contents2} </div>
        
        
        <h3>{freespace_title3}</h3>
        <div class="sideContents"> {freespace_contents3} </div>
        
        
        <h3>{freespace_title4}</h3>
        <div class="sideContents"> {freespace_contents4} </div>
        
        
        <h3>{freespace_title5}</h3>
        <div class="sideContents"> {freespace_contents5} </div>
        
        
        <h3>LINKS</h3>
        <div class="sideContents"> {link_list} </div>
        
        
        <h3>OTHERS</h3>
        <div class="sideContents">
          <ul>
            <li><a href="./manage/">管理者ページ</a></li>
            <li><a href="./?mode=rss">RSS1.0</a></li>
            <li><a href="./?mode=atom">Atom0.3</a></li>
          </ul>
        </div>
        
        
        <h3>MOBILE</h3>
        <div class="sideContents tac"> {site_qrcode} </div>
        
        
        
        <h3>PR</h3>
        <div class="sideContents tac"> {ad} </div>
        <div class="mt20 tac"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:160px;height:600px"
     data-ad-client="ca-pub-0926145433957092"
     data-ad-slot="3793540016"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
        
      </div>
      
      <br class="clear" />
    </div>
    
  </div>
  
  
  <div id="footer">
    <div id="copyright">&copy; <a href="http://black-chocoa.jugem.jp/" target="_blank">TEMPLATE DA FILE</a> All Right Reserved.</div>
    
  </div>
  
</div>
</body>
</html>

CSS

@charset "EUC-JP";
/* ----------------------------------------
 作成日:2015.02.13
 テンプレート名: simple black
 by black-chocoa (http://black-chocoa.jugem.jp/)
---------------------------------------- */

/* --------------------------------------
　リセット
--------------------------------------- */
 
* {
	margin:0px;
	padding:0px;
}
h1, h2, h3, h4, h5, h6 {
	margin:0px;
	padding:0px;
	font-weight: normal;
}
img {
	border:none;
	vertical-align:top;
}
ul, li {
	margin:0px;
	padding:0px;
	list-style-position: inside;
}
hr {
	display:none;
	clear:both;
}
input{
	margin:0px;
	padding:0px;
}
/* --------------------------------------
　共通
--------------------------------------- */
.clear {
	clear:both;
	font-size:1px;
	height:1px;
}
.tac{
	text-align:center;
}
.ml10{
	margin-left:10px;
}
.mt20{
	margin-top:20px;
}
/* --------------------------------------
　枠共通部分
--------------------------------------- */

/* ページ全体のテキスト色 */
html {
}
/* ページ全体 */
body {
	width:100%;
	text-align:center;
	font-family:"Meiryo UI", "ヒラギノ角ゴ3";
	background-color:#ffffff;
	color: #282828;
	font-size:14px;
	line-height:1.5em;	
}

/* ページ全体のリンク色 */
a, a:link, a:visited {
	color:#f0533f;
	text-decoration: none;
}
a:hover, a:active {
	color: #282828;
}
/* ------------------------------------- 
 *	ページレイアウト
--------------------------------------- */

/*ページ全体の幅、レイアウトを中央揃え*/
#container {
	border-top:solid 30px #282828;
}
#wrapper {
	width:1000px; 
	margin:0px auto;
	padding:0;
	text-align:left;
	background-color:#fff;
}
/*ブログ名と説明文、トップ画像*/
#header {
	padding:40px 0px;
	border-bottom: solid 5px #282828;
}
/*コンテンツ枠（記事の枠＋サイドメニューの枠）*/
#content {
	margin:0 auto;
	padding-top:20px;
}
/*　左側の幅（記事の枠）*/
#main {
	float:left;
	width:720px;
	padding:0 20px 0 0;
}
/*　右側の幅（サイドメニューの枠）　*/
#side {
	float:left;
	width:260px; 
}
/* --------------------------------------
　header
--------------------------------------- */
/* ブログ名 */
/* ブログ名の色 */
h1, h1 a, h1 a:link, h1 a:visited {
	font-family:Impact;
	font-size: 40px;
	color: #282828;	
}
h1 a:hover, h1 a:active {
	color:#f0533f;
}
/* ブログの説明文 */
div#description {
	color:#535353;
	margin-top:10px;
}
/* --------------------------------------
　メイン
--------------------------------------- */
.entry {
	border-bottom:solid 4px #282828;
	position:relative;
	padding-bottom:10px;
}
/* 記事のタイトル */
h2{
	font-size:20px;
	background-image: url(http://img-cdn.jg.jugem.jp/c32/121605/20150217_1556137.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 30px;
	padding:20px 210px 10px 40px;
}
/* 記事本文 */
.entryBody {
	margin-top:20px;

}
/* 記事の続き */
.entryMore {

}
/* --------------------------------------
　記事の装飾
--------------------------------------- */
.entry h3 {
	font-size:18px;
	font-weight:bold;
	margin:20px 0;
}
/* --------------------------------------
　記事の装飾
--------------------------------------- */
/* JUGEMテーマ */
.jugem_theme{
	background-color:#f4f4f4;
	padding:10px;
	font-size:12px;
	margin-bottom:30px;
}
/* 引用 */
.entry blockquote {
	background-color:#fbfafa;
	border:solid 3px #f4f4f4;
	color:#535353;
	margin:10px 20px;
	padding:20px;
	line-height:2em;
}
/* 画像 */
.entry .pict {
	border:solid 10px #f4f4f4;
	margin:10px 0;
}
/* リスト */
.entryBody ul, .entryMore ul{
	margin:20px 0 20px 40px;
}
div.entryBody li, div.entryMore li {
	list-style-position: outside;
	list-style-type: disc;	
}
/* --------------------------------------
　 関連する記事枠
--------------------------------------- */
#relatedEntry {
	background-color:#fbfafa;
	border:solid 3px #f4f4f4;
	color:#535353;
	padding:20px;
	margin-top:20px;
}
#relateTitle {
	font-weight:bold;
	padding-bottom:10px;
	border-bottom:solid 1px #e3dfdf;
	margin-bottom:10px;
}
/* --------------------------------------
　 コメント枠
--------------------------------------- */
#comment {
	background-color:#fbfafa;
	border:solid 3px #f4f4f4;
	color:#535353;
	padding:20px;
	margin-top:20px;
}
#commentTitle {
	font-weight:bold;
	padding-bottom:10px;
	border-bottom:solid 1px #e3dfdf;
	margin-bottom:10px;
}
#commentSendTitle {
	font-weight:bold;
	padding-bottom:10px;
	border-bottom:solid 1px #e3dfdf;
	margin-bottom:10px;
}
.commentBody {
}
.commentState {
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom:dotted 1px #e3dfdf;	
}
.commentSendForm {
	color:#535353;
	font-weight:bold;
}
.commentSendForm .input, .commentSendForm textarea {
	background-color: #FFFFFF;
	border:solid 3px #ededed;
	padding:3px;
	margin-bottom:10px;
	margin-top:5px;
}
.commentSendForm .input{
	width:314px;
}
.commentSendForm textarea {
	width:660px;
}
/* --------------------------------------
　 トラックバック枠
--------------------------------------- */
#trackback {
	margin-top:20px;
	border:solid 3px #ececec;
	background-color:#f6f6f6;
	padding:20px 30px 30px 30px;
}
#trackbackURL {
	border-bottom:solid 1px #d0d0d0;
	padding:0 10px 10px 10px;
	font-weight:bold;
	margin-bottom:10px;
}
#trackbackTitle {
	border-bottom:solid 1px #d0d0d0;
	padding:0 10px 10px 10px;
	font-weight:bold;
	margin-bottom:10px;
}
#trackback input {
	background-color: #FFFFFF;
	border:solid 3px #ededed;
	padding:3px;
	margin-bottom:10px;
	margin-top:5px;
}
#trackback input{
	width:314px;
}
.trackbackName {
}
.trackbackBody {
}
ul.trackbackState {
}
ul.trackbackState li {

}
/* --------------------------------------
　 プロフィールのページ
--------------------------------------- */
#profile {
}
#profileTitle {
	font-size:20px;
	background-image: url(http://img-cdn.jg.jugem.jp/c32/121605/20150217_1556137.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 30px;
	padding:20px 210px 10px 40px;
}
#profileName {
	background-color:#f4f4f4;
	padding:10px;
	font-size:12px;
	margin-bottom:30px;
	margin-top:10px;
}
#profileBody {
	text-align:center;
}
/* --------------------------------------
　 その他
--------------------------------------- */
/* 次の記事・前の記事 */
#entryNavi {
	font-size:12px;
	text-align:center;
	margin-bottom:30px;
}
.status{
	margin-top:10px;
}
.status .btn{
	float:left;
	margin-right:5px;
}
/* 総ページ */
#pager {
	text-align:center;
	margin-top:50px;
}
#pager span {
	margin:0 5px;
}
#pager span.current {
	padding:10px;
	color:#FFFFFF;
	background-color:#282828;
}

#pager span a {
	border:solid 3px #f4f4f4;
	background-color:#fbfafa;
	padding:10px;
}
#pager span a:hover, #pager span a:active {
	color:#FFFFFF;
	background-color:#282828;
}
/* このページの先頭へ */	
.pageTop {
	margin-top:10px;
	text-align:right;
	font-size:12px;
}

/* --------------------------------------
　サイドメニュー
--------------------------------------- */
#side{

}
/* サイドメニューのタイトル */
#side h3 { 
	color:#FFFFFF;
	background-color:#282828;
	padding:10px;
	margin-bottom:20px;
}
/* サイドメニューの内容 */
.sideContents {
	font-size:12px;
	margin-bottom:20px;
}
#side .search{
	width:188px;
	height:18px;
	background-color:#fbfafa;
	border:solid 3px #535353;	
	padding:3px;
}
#side ul li{
	border-bottom:dotted 1px #535353;
	list-style-position: inside;
	list-style-type: disc;
	padding:0 10px 10px 10px;
	margin-bottom:10px;
	line-height:1.2em;
}
/* カレンダーのリンク色 */ 
.cell a, .call a:link, .call a:visited {
	color:#000000;
	text-decoration:underline;
	font-weight:bolder;
}
.cell a:hover, .call a:active {
	text-decoration:none;
}
.calendar table{
	margin:0 auto;
}
.calendar table td{
	width:28px;
}
.sun{
	color:#f0533f;
}
.sat{
	color:#0068b7;
}
.sun, .day, .sat{
	font-weight:bold;
}
.calendar_month a{
	font-weight:bold;
}

/* ----------------------------------------
 Footer
---------------------------------------- */
/*　フッター */
#footer {
	width:100%;
	text-align:center;
	margin:20px 0 0 0;
	padding:10px;
	background-color:#282828;
	color:#FFFFFF;
}
#copyright {
}

.banner_01{
	position:absolute;
	top:15px;
	right:0px;
}

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