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

ホーム

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

テンプレート名 : gr-BlueGray

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 src="http://homepage3.nifty.com/gun-ryu/blog/script/menuAction.js" type="text/javascript"></script>
<script src="http://homepage3.nifty.com/gun-ryu/blog/script/makeTreeSub.js" type="text/javascript"></script>
</head>

<div id="wrapper_body">

<div id="header">

<div class="linkmenu">
        <a href="" onclick="return buttonClick(event, 'MENU1');">Entries</a>&nbsp;｜
        <a href="" onclick="return buttonClick(event, 'MENU2');">Comment</a>&nbsp;｜
        <a href="" onclick="return buttonClick(event, 'MENU3');">Trackback</a>&nbsp;｜
        <a href="" onclick="return buttonClick(event, 'MENU4');">Categories</a>&nbsp;｜
        <a href="" onclick="return buttonClick(event, 'MENU5');">Archives</a>&nbsp;｜
        <a href="" onclick="return buttonClick(event, 'MENU6');">Links</a>
    </div>

<div id="MENU1" class="MENU">
        <div class="list_text"><div class="sideitem">
        {selected_entry_list}
        </div></div>
        <div class="list_title">Selected Entries</div>
    </div>

<div id="MENU2" class="MENU">
        <div class="list_text"><div class="sideitem">
        <div id="commentlist">{recent_comment_list}</div>
        </div></div>
        <div class="list_title">Comment</div>
    </div>

<div id="MENU3" class="MENU">
        <div class="list_text"><div class="sideitem">
        <div id="tblist">{recent_trackback_list}</div>
        </div></div>
        <div class="list_title">Trackback</div>
    </div>

<div id="MENU4" class="MENU">
        <div class="list_text"><div class="sideitem">
        {category_list}
        </div></div>
        <div class="list_title">Categories</div>
    </div>

<div id="MENU5" class="MENU">
        <div class="list_text"><div class="sideitem">
        {archives_list}
        </div></div>
        <div class="list_title">Archives</div>
    </div>

<div id="MENU6" class="MENU">
        <div class="list_text"><div class="sideitem">
        {link_list}
        </div></div>
        <div class="list_title">Links</div>
    </div>

<script src="http://homepage3.nifty.com/gun-ryu/blog/script/makeTreeMain.js" type="text/javascript"></script>

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

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

<div id="headmenu">

<div class="jgm_img">{powered}</div>
        <div class="power">
        <a href="./?pid=1">Profile</a>&nbsp;｜
        <a href="{site_rss}">RSS1.0</a>&nbsp;｜
        <a href="{site_atom}">Atom0.3</a>&nbsp;｜
        <a href="./admin/">Admin</a>&nbsp;｜&nbsp;
        </div>

</div>

</div>

<div id="wrapper_mainside">

<div id="main">

<div id="entry">

<div class="entry_navi">
            <strong>Page：</strong>&nbsp;{prev_page_link}&nbsp;&nbsp;{page_now}/{page_num}&nbsp;&nbsp;{next_page_link}
            </div>
            
            
            
            <div class="entry_navi">
            <strong>Entry：</strong>&nbsp;<a href="{prev_permalink}" alt="Prev">&lt;&lt;&nbsp;prev</a>&nbsp;|&nbsp;<a href="./">main</a>&nbsp;|&nbsp;<a href="{next_permalink}" alt="Next">next&nbsp;&gt;&gt;</a>
            </div>

<div class="entry_title">{entry_title}</div>
            <div class="entry_date">{entry_date} {entry_time} | category：{category_name}</div>
            <div class="entry_body">{entry_description}
                <a name="sequel"></a>
                
                
                <a href="./?eid={entry_sequel_id}#sequel">&nbsp;続きを読む&nbsp;▼</a>
                
                
                {entry_sequel_text}
                
            </div>
            <div class="entry_state">Posted by：{user_name} | {comment_num} | {trackback_num} | <a href="#top" title="Page top">▲top</a></div>

</div>
        {trackback_auto_discovery}

<div id="trackback">
        <a name="comments"></a>

<div class="tb_main_title">Comment</div>

<div class="tb">
                <div class="tb_postby">Posted by：{comment_name}</div>
                <div class="tb_body">{comment_description}</div>
                <div class="tb_state">at：{comment_time} | <a href="#top" title="Page top">▲top</a></div>
            </div>

<div class="formarea">
                <form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
                <table width="550" border="0" cellspacing="0" cellpading="0">
                <tr valign="top">
                    <td width="200">
                    <input type="hidden" name="entry_id" value="{entry_id}" />
                    <label for="name">name：</label><br/>
                    <input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width:180px;" /><br />
                    <label for="email">email：</label><br />
                    <input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:180px;" /><br />
                    <label for="url">url：</label><br />
                    <input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:180px;" />
                    </td>
                    <td width="350">
                    <label for="description">comments：</label><br />
                    <textarea tabindex="4" id="description" name="description" rows="7" cols="50" style="width:333px;"></textarea><br /><br />
                    <input tabindex="5" type="submit" value="submit" onclick="javascript:setval();" style="font-family:'Century Gothic';font-weight:bold;padding:0px 2px;" />
                    <input type="checkbox" name="set_cookie" value="1" id="set_cookie" style="border:none;">
                    <label for="set_cookie">cookie</label>
                </td>
                </tr>
                </table>
                </form>
            </div>
        </div>

<div id="trackback">
        <a name="trackback"></a>

<div class="tb_main_title">Trackback</div>

<div class="tb">
                <div class="tb_title">{trackback_title}</div>
                <div class="tb_body">{trackback_excerpt}</div>
                <div class="tb_state">{trackback_blog_name} | at：{trackback_time} | <a href="#top" title="Page top">▲top</a></div>
            </div>

<div id="entry">
            <div class="entry_navi"><strong>Profile</strong>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;<a href="./">main</a>&nbsp;|</div>
            <div class="entry_title">{profile_name}</div>
            <div class="entry_body_pf">{profile_description}</div>
        </div>

</div>

<div id="side">
    
    <div class="side_in">

<a name="p_freespace1"></a>
        <h2>{freespace_title1}</h2>
        <div class="sideitem_shift">
        {freespace_contents1}
        </div>

<a name="p_freespace2"></a>
        <h2>{freespace_title2}</h2>
        <div class="sideitem_shift">
        {freespace_contents2}
        </div>

<a name="p_freespace3"></a>
        <h2>{freespace_title3}</h2>
        <div class="sideitem_shift">
        {freespace_contents3}
        </div>

<a name="p_freespace4"></a>
        <h2>{freespace_title4}</h2>
        <div class="sideitem_shift">
        {freespace_contents4}
        </div>

<a name="p_freespace5"></a>
        <h2>{freespace_title5}</h2>
        <div class="sideitem_shift">
        {freespace_contents5}
        </div>

<a name="p_search"></a>
        <h2>Search this blog</h2>
        <div class="sideitem_shift">
        <form method="get" action="">
        <input id="search" name="search" size="20" style="margin:5px 5px 0px 0px;width:120px;" />
        <input type="submit" value="search" class="button" style="font-family:'Century Gothic';font-weight:bold;" />
        </form>
        </div>

<a name="p_mobile"></a>
        <h2>Mobile</h2>
        {site_qrcode}

<a name="p_others"></a>

<a name="p_recommend"></a>
        <h2>Recommend</h2>
        
        <div class="sideitem_shift">
        {amazon_item}
        </div>

<a name="p_ad"></a>
        <h2>Sponsored Links</h2>
        <div class="sideitem_shift">
        {ad}
        </div>

<a name="p_design"></a>
        <h2>Info</h2>
        <div class="sideitem">
        <ul>
        <li>Designed by：<a href="http://gunryu-utf.jugem.jp/">Gun☆Ryu</a></li>
        </ul>
        </div>
        <div class="sideitem_shift">
        <a href="http://gun-ryu.jugem.jp/" target="_blank"><img src="http://homepage3.nifty.com/gun-ryu/blog/banner/gr-banner88.jpg" width="88" height="31" alt="Gun☆Ryu's blog：banner" title="Gun☆Ryu's blog：banner" border="0" /></a>&nbsp;<a href="http://gunryu-utf.jugem.jp/" target="_blank"><img src="http://homepage3.nifty.com/gun-ryu/blog/banner/gr_utf-banner88.gif" width="88" height="31" alt="Gun☆Ryu's Template：banner" title="Gun☆Ryu's Template：banner" border="0" /></a>
        </div>

</div>
    
    </div>

</div>

<div id="footer">{copyright}</div>

</div>

</body>
</html>

CSS

/* ************************************************ 
 *  gr-BlueGray.css
 *
 *  Ver.20070721-0220
 *================================================= 
 *  ・UTF公開用に作成                   2007/02/28
 *  ・コメント若干修正                  2007/03/02
 *  ・IE向けレイアウト崩れ対応          2007/03/08
 *  ・メニュー表示位置修正              2007/03/09
 *  ・HTMLタグ若干修正                  2007/03/11
 *  ・新JUGEMタグ追加                   2007/03/16
 *  ・Recommendのスタイル修正           2007/03/19
 *  ・公開場所変更                      2007/06/18
 *  ・デコメ対応、banner追加            2007/07/03
 * ************************************************ */

/* ************************************************ 
 *  グローバル設定
 * ************************************************ */

* {
    margin:             0px;
    padding:            0px;
    color:              #666666;
}

body {
    background:         #ffffff;
    color:              #666666;
    font-family:        'Georgia','Verdana','HGSｺﾞｼｯｸM','ＭＳ ゴシック','ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','Osaka',sans-serif;
    font-size:          10.5px;
}

/*  LINK－動作設定  --------------------------------*/
a:link    { color: #0000ff; text-decoration: none; }
a:visited { color: #000099; text-decoration: none; }
a:active  { color: #0000ff; text-decoration: none; }
a:hover   {
    text-decoration:    underline;
    color:              #0000ff;
    background-color:   #cccccc;
}

/* ************************************************ 
 *  レイアウト全体（ラッパー）と要素設定
 * ************************************************ */

#wrapper_body {
    width:              800px;            /* layout */
    margin:             0 auto;
    padding-top:        10px;
    background-color:   #ffffff;
    line-height:        140%;
    text-align:         left;
}

#wrapper_body table,td,tr,div {
    margin: 0px;
    padding:0px;
}

#wrapper_body  li {
    list-style-type:    none;
    margin-bottom:      5px;
}

#wrapper_body  img {
    padding:            1px;
    background:         #ffffff;
    border:             none;
}

/*  LINK－動作設定  --------------------------------*/
#wrapper_body  a:hover img {
    padding:            1px;
    background:         #666666;
}

/* ************************************************ 
 *  ヘッダー部／ラッパーブロック
 * ************************************************ */

#header {
    width:              800px;            /* layout */
    margin:             0px;
}

/* ************************************************ 
 *  画面上部リンクメニュー／ブロック&要素
 * ************************************************ */

.linkmenu {
    margin:             0px;
    padding:            22px 5px 20px 0px;
    background:         #000080;
    color:              #ffffff;
    font-family:        Verdana;
    font-size:          10.5px;
    font-weight:        bolder;
    text-align:         center;
}

/*  LINK－動作設定  --------------------------------*/
.linkmenu a,
.linkmenu a:link,
.linkmenu a:visited,
.linkmenu a:active,
.linkmenu a:hover
{
    color: #ffffff;
    text-decoration: none;
}

/*  PopUPメニュー設定  -----------------------------*/
.MENU {
    visibility:         hidden;
    z-index:            99999;
    position:           absolute;
    width:              215px;
    margin-top:         5px;
    padding-top:        5px;
    background:         #ffffff;
    border:             1px #cccccc solid;
}

.list {
}

.list_title {
    margin-top:         15px;
    padding-top:        3px;
    padding-bottom:     4px;
    background:         #cccccc;
    font-family:        Verdana;
    font-size:          12px;
    font-weight:        bolder;
    text-align:         center;
    border-bottom:      3px #000080 solid;
}

.list_title:first-letter {
    color:              #0000ff;
}

.list_text {
    font-size:          10.5px;
    padding:            5px 10px 5px 5px;
    color:              #666666;
    text-align:         left;
}

/* ************************************************ 
 *  タイトル部／ブロック
 *-------------------------------------------------
 *
 *  ※タイトル画像は、800px×100px
 *  ※URLを自分で書き換えてください
 *
 * ************************************************ */

#header_title {
    background:         url('http://img-cdn.jg.jugem.jp/28c/268660/20070228_291913.jpg') no-repeat;
    background-position:0px 0px;
}

/*  Titele部 設定  ---------------------------------*/
h1 {
    margin-bottom:      8px;
    padding:            20px 0px 10px 10px;
    color:              #666666;
    font-size:          36px;
}

h1:first-letter {
    color:              #0000ff;
    font-weight:        bold;
}

/*  LINK－動作設定  --------------------------------*/
h1 a:first-letter {
    color:              #0000ff;
    text-decoration:    none;
}
h1 a:link    { color: #666666; text-decoration: none; }
h1 a:visited { color: #666666; text-decoration: none; }
h1 a:active  { color: #666666; text-decoration: none; }
h1 a:hover   {
    color:              #0000ff;
    background-color:   #cccccc;
    text-decoration:    underline;
}

/*  Description部 設定  ----------------------------*/
.description {
    width:              785px;
    padding:            6px 0px 10px 15px;
    color:              #000080;
    font-size:          12px;
}

/* ************************************************ 
 *  タイトル部・カレンダー／ブロック
 * ************************************************ */

.calendar {
    margin:             0px;
    padding:            4px 0px;
    background:         #cccccc;
    font-family:        Verdana;
    font-size:          10.5px;
    font-weight:        bolder;
    text-align:         center;
}

/*  LINK－動作設定  --------------------------------*/
.calendar a:link,
.calendar a:visited  {
    font-weight:        bolder;
    text-decoration:    underline;
}

/* ************************************************ 
 *  タイトル部・リンク／ブロック
 * ************************************************ */

#headmenu {
    margin:             0px;
    padding:            4px 5px 5px 0px;
    background:         #000080;
    color:              #ffffff;
    font-family:        Verdana;
    font-size:          10.5px;
    font-weight:        bolder;
}

/*  LINK－動作設定  --------------------------------*/
#headmenu a:link,
#headmenu a:visited,
#headmenu a:active  { color: #ffffff; text-decoration: none; }
#headmenu a:hover   {
    color:              #0000ff;
    background-color:   #cccccc;
    text-decoration:    underline;
}

/*  JUGEMバナー領域  -------------------------------*/
.jgm_img {
    margin:             1px 0px 0px 0px;
    padding:            0px;
    float:              right;
}

/*  profile,Feed領域  ------------------------------*/
.power {
    margin:             5px 0px;
    padding:            0px;
    color:              #ffffff;
    background:         #000080;
    text-align:         right;
}

/* ************************************************ 
 *  エントリー、サイド部の配置／ブロック
 * ************************************************ */

/*  ラッパーブロック  ------------------------------*/
#wrapper_mainside {
    width:              800px;            /* layout */
    margin:             0 auto;
    text-align:         left;
    position:           relative;         /* layout */
}

/*  エントリー 配置・領域  -------------------------*/
#main {                                   /* layout */
    width:              560px;
    float:              left;
}

/*  サイド部 配置  ---------------------------------*/
#side {                                   /* layout */
    width:              240px;
    float:              right;
}

/*  サイド部 領域  ---------------------------------*/
.side_in {
    width:              215px;
    margin-top:         0px;
    margin-left:        25px;
    margin-bottom:      15px;
}

/* ************************************************ 
 *  エントリー／ブロック＆個別要素
 * ************************************************ */

/*  エントリーブロック  ----------------------------*/
#entry {
    margin-top:         20px;
    margin-bottom:      10px;
}

/*  ナビ  ------------------------------------------*/
.entry_navi {
    margin-bottom:      20px;
    padding:            5px;
    border-top:         2px solid #cccccc;
    border-bottom:      1px dotted #cccccc;
}

/*  タイトル  --------------------------------------*/
.entry_title {
    margin-top:         15px;
    padding:            5px 10px 5px 15px;
    background:         #cccccc;
    border-left:        4px solid #000080;
    border-right:       4px solid #000080;
    font-size:          12.5px;
    font-weight:        bolder;
}

.entry_title:first-letter {
    color:              #0000ff;
}

/*  投稿日時  --------------------------------------*/
.entry_date {
    margin:             0px;
    padding:            5px 10px 5px 0px;
    border-left:        1px solid #cccccc;
    border-right:       1px solid #cccccc;
    border-bottom:      1px dotted #cccccc;
    text-align:         right;
}

/*  本文  ------------------------------------------*/
.entry_body {
    margin:             0px;
    padding:            10px 10px 10px 20px;
    border-left:        1px solid #cccccc;
    border-right:       1px solid #cccccc;
    line-height:        160%;
}

.entry_body .emoji {
    display:            inline;    
}

/*  続き  ------------------------------------------*/
.entry_more {
    padding-top:        10px;
}

/*  ステート  --------------------------------------*/
.entry_state {
    margin:             0px 0px 20px 0px;
    padding:            5px 10px 5px 0px;
    border-left:        1px solid #cccccc;
    border-right:       1px solid #cccccc;
    border-top:         1px dotted #cccccc;
    border-bottom:      1px solid #cccccc;
    text-align:         right;
}

/*  profile用  -------------------------------------*/
.entry_body_pf {
    margin:             0px;
    padding:            10px 10px 10px 20px;
    border-left:        1px solid #cccccc;
    border-right:       1px solid #cccccc;
    border-bottom:      1px solid #cccccc;
    line-height:        160%;
}

.entry_body_pf .emoji {
    display:            inline;    
}

/*  引用・線あり  ----------------------------------*/
blockquote {
    margin:             10px 5px 10px 20px;
    padding:            5px 5px 5px 10px;
    color:              #999999;
    border-top:         1px dotted #cccccc;
    border-right:       3px double #cccccc;
    border-bottom:      1px dotted #cccccc;
    border-left:        3px double #cccccc;
}
/*  引用・線なし  ----------------------------------*/
blockquote.no_bd {
    margin:             10px 5px 0px 20px;
    padding:            5px 5px 5px 10px;
    color:              #999999;
    border:             none;
    font-style:         italic;
}

/* ************************************************ 
 *  コメント・トラックバック／個別要素
 * ************************************************ */

/*  ブロック  --------------------------------------*/
#trackback { padding-top: 20px; padding-bottom: 10px; }

/*  種別タイトル  ----------------------------------*/
#trackback .tb_main_title {
    margin-bottom:      20px;
    padding:            5px 0px;
    border-bottom:      1px dotted #cccccc;
    border-top:         2px solid #cccccc;
    font-size:          12px;
    font-weight:        bolder;
}

#trackback .tb_main_title:first-letter {
    color:              #0000ff;
}

/*  ＵＲＬ  ----------------------------------------*/
#trackback .tb_url {
    padding:            5px 10px 5px 10px;
    font-size:          11px;
}

#trackback .tb {
    margin-bottom:      10px;
    border:             1px solid #cccccc;
}

/*  投稿タイトル  ----------------------------------*/
#trackback .tb_title {
    padding:            5px 10px;
    font-weight:        bold;
}

/*  投稿者  ----------------------------------------*/
#trackback .tb_postby {
    padding:            5px;
    border-bottom:      1px dotted #cccccc;
    font-weight:        bold;
}

/*  投稿内容  --------------------------------------*/
#trackback .tb_body {
    padding:            5px 10px;
    line-height:        140%;
}

/*  投稿ステート  ----------------------------------*/
#trackback .tb_state {
    padding:            5px;
    border-top:         1px dotted #cccccc;
    text-align:         right;
}

/*  投稿入力領域  ----------------------------------*/
#trackback .formarea {
    margin-top:         20px; 
    padding:            5px;
    border:             1px dotted #666666;
    background:         #cccccc;
    color:              #999999;
    font-weight:        bold;
}

/* ************************************************ 
 *  サイド部／個別要素
 * ************************************************ */

/*  タイトル  --------------------------------------*/
h2 {
    margin:             20px 0px 10px 0px;
    padding:            2px 0px 2px 8px;
    background:         #cccccc;
    border-left:        4px solid #000080;
    font-family:        Verdana;
    font-size:          12px;
}

h2:first-letter {
    color:              #0000ff;
}

/*  配置設定  --------------------------------------*/
.sideitem_shift {
    margin-left:        6px;
}

.sideitem_center {
    margin:             0 auto;
    text-align:         center;
}

/*  リスト要素  ------------------------------------*/
.sideitem ul {
    list-style-type:     none;
}

.sideitem li {
    background:         url('http://img-cdn.jg.jugem.jp/28c/268660/20060920_227539.gif') no-repeat;
    background-position:2px 0.5em;
    line-height:        130%;
    margin-bottom:      5px;
    padding-left:       8px;
}

/*  オススメ(Recommend)設定  -----------------------*/
div.amazon_text {
    font-size:          10px;
    padding-bottom:     10px;
}

img.amazon_pict { 
    padding:            4px 0px;
    height:             128px; 
}

/* ************************************************ 
 *  フッター部／ブロック
 * ************************************************ */

#footer {
    clear:              both;             /* layout */
    width:              800px;            /* layout */
    margin:             50px 0px;
    padding:            4px 0px;
    background:         #000080;
    color:              #ffffff;
    font-family:        Verdana;
    font-size:          10.5px;
    font-weight:        bolder;
    text-align:         center;
}

/*  LINK－動作設定  --------------------------------*/
#footer a:link,
#footer a:visited,
#footer a:active  {
    color:              #ffff00;
    text-decoration:    none;
}

/* ************************************************ 
 *  デコメ用定義
 * ************************************************ */

.mobile img.pict { 
    padding:            0px;
    border:             0;
}

.mobile hr {
}

/* ************************************************ END of CSS ****/

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