無料ブログをかんたん作成
無料ブログ作成ならJUGEM(ジュゲム)
ホーム
ブログ作成
ブログを書く
ブログを見る
無料ブログ作成
JUGEM PLUS お申し込み
サービス紹介
JUGEM(無料ブログ)
JUGEM PLUS(有料プラン)
ブログ機能一覧表
デザイン
公式ブログデザイン
PC版
スマートフォン版
ユーザー作成
ユーザー作成
JUGEM を楽しむ
投稿する・みんなとつながる
ブログテーマ
ブログのお題
その他のコンテンツ
芸能人・有名人のブログ
スペシャルインタビュー
JUGEM を楽しむ 一覧
サポート
管理者ページ・マニュアル
FAQ
お知らせ
新着情報
メンテナンス情報
障害情報
おすすめブログ紹介
このページでは JavaScript を使用しています。JavaScript を有効にしてください。
ホーム
>
ブログデザイン一覧
>
ユーザー作成テンプレート「utf」
>
テンプレートHTML・CSSについて
公開されているテンプレートのHTMLに{ad}タグがないものありますので、エラーが表示された場合は{ad}タグを追加してご利用ください。
テンプレートの利用について
弊社が著作権を所有する画像等以外のテンプレートに関する著作権は制作者にあります。弊社提供以外のブログサービスで利用した場合は、その都度制作者の方にご確認ください。
テンプレート名 :
beige-type1
テンプレートイメージ表示ページへ戻る
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/1.8.3/jquery.min.js"></script> <!-- ←ここから この部分は不必要になったら削除してください。 諸般注意書きはCSSに記載してますのでご覧ください。 使用画像は整理のため削除することがありますから、htmlのimgタグ、CSSのbacgroundタグ内のURLをアドレスバーに貼り付けて画像を出し保存してください。 改変の前にデフォルトのテンプレートの複製をお勧めします。改変で表示がおかしくなったときは、複製に切り替えれば初期の状態に戻せます。 ページスクロールのscriptは画像表示のLight box系prototype.jsを使っても制御可能なように関数変更してあります。ただし複数の他Java scriptを使用すると動作しなくなることがあります。ページトップの出現は下記数字:100の所を変更して下さい。数字が大きくなると下へスクロール量が多くなってから出ます。 ここまで→ --> <script type="text/javascript"> var j = jQuery.noConflict(); j(function() { var topBtn = j('#page-top'); topBtn.hide(); j(window).scroll(function () { if (j(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.click(function () { j('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> </head> <body onload="javascript:initval();"> <div id="wrapper"> <div id="header"><!-- ヘッダー始まり --> <!-- 各アイコンはフリー素材を加工したものと自分で製作したものがありますので当該テンプレート以外でお使いいただくのは禁止です。 --> <ul class="management clearfix"> <li><a href="./?mode=atom" title="Atom 0.3"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150226_1332594.png" width="32" height="32" alt="icon" title="Atom 0.3" /></a></li> <li><a href="./?mode=rss" title="RSS 1.0"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150225_1331705.png" width="32" height="32" alt="icon" /></a></li> <li><a href="./admin/" title="Login"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150225_1331704.png" width="32" height="32" alt="icon" /></a></li> </ul> <!-- BEGIN title --> <h1 id="site_title">{blog_name}</h1> <div class="description">{blog_description}</div> <!-- END title --> <!-- BEGIN calendar --> <div class="calendar">{calendar_horizontal}</div> <!-- END calendar --> </div><!-- //ヘッダー終わり --> <div id="contents" class="clearfix"><!-- コンテンツ始まり --> <div id="main"><!-- 左サイド始まり --> <!-- BEGIN sequel --> <div class="entry_navi"> {prev_entry} | <a href="./">main</a> | {next_entry} </div> <!-- END sequel --> <!-- BEGIN entry --> <div class="entry"> <h2>{entry_title_link}</h2> <div class="entry_date">{entry_date} {entry_time_only}</div> <div class="entry_body">{entry_description}</div> <a name="sequel"></a> <div class="entry_more"> <!-- 「続きを読む」は好きな言葉(Read more...など)に変更してください --> <!-- BEGIN entry_sequel_link --> <div class="entry_sequel_link"> <a href="./?eid={entry_sequel_id}#sequel">続きを読む</a> </div> <!-- END entry_sequel_link --> <!-- BEGIN entry_sequel_items --> {entry_sequel_text} <!-- END entry_sequel_items --> </div> <!-- 基本設定でソーシャルボタン設定しないにしていてもボタンが表示されます。 必要ない時はリスト内のソーシャルタグをコメントタグで囲い、CSSの.social-wrapのpadding; 10pxを 15px〜20pxにしてください。 --> <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">{category_name} | {comment_num} | {trackback_num}</div> {trackback_auto_discovery} </div> <!-- END entry --> <!-- BEGIN comment_area --> <a name="comments" id="comments"> </a> <div class="comment"> <!-- BEGIN comment --> <div class="entry_body">{comment_description}</div> <div class="comment_author">{comment_name} | {comment_time_24}</div> <!-- END comment --> <div class="comment_title">Comment</div> <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();" /> <input type="checkbox" name="set_cookie" value="1" id="set_cookie" /> <label for="set_cookie">Cookieを保存</label> </form> </div> </div> <!-- END comment_area --> <!-- BEGIN trackback_area --> <a name="trackback" id="trackback"> </a> <div class="trackback"> <div class="trackback_title">Trackback URL</div> <div class="trackback_url">{trackback_url}</div> <div class="trackback_title">Trackback</div> <!-- BEGIN trackback --> <div class="entry_body">{trackback_excerpt}</div> <div class="trackback_author"> {trackback_title} | {trackback_blog_name} | {trackback_time_24} </div> <!-- END trackback --> </div> <!-- END trackback_area --> <!-- 別ページ:プロフィール詳細 --> <!-- BEGIN profile_area --> <div class="entry"> <div class="profile_title">Profile</div> <div class="profile_name">name : {profile_name}</div> <div class="entry_body">{profile_description}</div> <div class="entry-bottom"><a href="./">back to main</a></div> </div> <!-- END profile_area --> <!-- BEGIN page --> <div class="prenext-navi">{full_pager_link}</div> <!-- END page --> </div><!-- // 左サイド終わり --> <div id ="nav"><!-- 右サイド始まり --> <!-- BEGIN selected_entry --> <div class="side-unit"> <h3>Recent entries</h3> <div class="side-contents">{selected_entry_list}</div> </div> <!-- END selected_entry --> <!-- BEGIN category --> <div class="side-unit"> <h3>Categories</h3> <div class="side-contents">{category_list}</div> </div> <!-- END category --> <!-- search --> <div class="reference"> <form class="refer-form" method="get" action="./"> <input id="character-input" type="text" name="search" placeholder="Search in the site" /><input id="magnifier" type="image" src="http://img-cdn.jg.jugem.jp/d12/543560/20150218_1326736.png" value="検索" alt="検索" title="検索" /> </form> </div> <!-- //search --> <!-- BEGIN recent_comment --> <div class="side-unit"> <h3>Recent comments</h3> <div class="side-contents red"> <ul> <!-- BEGIN recent_comment_items --> <li>{recent_comment_item_title}<br /><a href="./?eid={recent_comment_item_entry_id}#comments">- {recent_comment_item_name} ({recent_comment_item_date})</a> </li> <!-- END recent_comment_items --> </ul> </div> </div> <!-- END recent_comment --> <!-- BEGIN recent_trackback --> <div class="side-unit"> <h3>Recent trackback</h3> <div class="side-contents red"> <ul> <!-- BEGIN recent_trackback_items --> <li>{recent_trackback_item_title}<br /><a href="./?eid={recent_trackback_item_entry_id}#comments">- {recent_trackback_item_blog_name} ({recent_trackback_item_date})</a> </li> <!-- END recent_trackback_items --> </ul> </div> </div> <!-- END recent_trackback --> <!-- BEGIN archives --> <div class="side-unit"> <h3>Archives</h3> <div class="side-contents">{archives_list2ex}</div> </div> <!-- END archives --> <!-- BEGIN link --> <div class="side-unit"> <h3>Link</h3> <div class="side-contents">{link_list}</div> </div> <!-- END link --> <!-- フリースペースの編集は必ずリストタグを使ってください。 詳細はCSS上部に記載してます。 フリースペース編集場所は編集トップ、メニューの「デザイン」−「サイドバー編集」−「フリースペース」 --> <!-- BEGIN freespace1 --> <div class="side-unit"> <h3>{freespace_title1}</h3> <div class="side-contents">{freespace_contents1}</div> </div> <!-- END freespace1 --> <!-- BEGIN freespace2 --> <div class="side-unit"> <h3>{freespace_title2}</h3> <div class="side-contents">{freespace_contents2}</div> </div> <!-- END freespace2 --> <!-- BEGIN freespace3 --> <div class="side-unit"> <h3>{freespace_title3}</h3> <div class="side-contents">{freespace_contents3}</div> </div> <!-- END freespace3 --> <!-- BEGIN freespace4 --> <div class="side-unit"> <h3>{freespace_title4}</h3> <div class="side-contents">{freespace_contents4}</div> </div> <!-- END freespace4 --> <!-- BEGIN freespace5 --> <div class="side-unit"> <h3>{freespace_title5}</h3> <div class="side-contents">{freespace_contents5}</div> </div> <!-- END freespace5 --> <!-- BEGIN amazon --> <div class="side-unit"> <h3>Recommend</h3> <div class="side-contents">{amazon_item}</div> </div> <!-- END amazon --> <!-- BEGIN user --> <dl class="profile"> <dt>Web master</dt> <!-- BEGIN user_items --> <dd><a href="./?pid={user_item_id}" title="Profile詳細">{user_item_name}</a></dd> <!-- END user_items --> <!--<dd><img src="" width="247pxまで" height="" alt="profile" /></dd>--> <!-- 画像を使うときは上のddタグを囲っているコメントタグを外してください --> <!-- mobile --> <!-- QRコードを表示するときは2つのddを囲ってるコメントタグを外してください --> <!-- <dd class="mobile">Mobile QR code</dd> <dd>{site_qrcode}</dd> --> <!-- //mobile --> </dl> <!-- END user --> <!-- 右コンテンツの上下順番を変えてもスポンサーリンクは必ず一番最後にしてください --> <!-- BEGIN jugem_ad --><!-- 削除不可 --> <div class="ad"> <h3>Public relations</h3> <div class="ad-contents">{ad}</div> </div> <!-- END jugem_ad --> </div><!-- // 右サイド終わり --> </div><!-- // コンテンツ終わり --> <div id="footer"> <!-- powered --> <div class="banner">{powered}</div> <!-- /powered --> <!-- BEGIN copyright 削除不可 --> <div class="copyright"> template by <a href="http://hidarikikiryu.jugem.jp/">lefty_haru</a> {copyright} </div> <!-- END copyright --> </div><!-- // footer --> </div><!-- //wrapper --> <!-- SNS Icon color 必要ないときは削除してページスクロールは単体のものを使用してください --> <!-- 各アイコンはフリー素材を加工したものと自分で製作したものがありますので当該テンプレート以外でお使いいただくのは禁止です。 --> <ul id="sns-unit"> <li id="page-top"><a href="#wrapper" title="このページの上へ"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150215_1324791.png" width="48" height="48" alt="ポインタ" /></a></li> <li><a href="ここにfacebookURL" title="facebook"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150216_1324867.png" width="32" height="32" alt="logo" /></a></li> <li><a href="ここにtwitterURL" title="twitter"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150216_1324888.png" width="32" height="32" alt="logo" /></a></li> <li><a href="./?mode=rss" title="RSS feed"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150216_1324887.png" width="32" height="32" alt="logo" /></a></li> </ul> <!-- // SNS Icon color --> <!-- JQuery ページスクロールを単体で使う時用 --> <!-- <div id="page-top"><a href="#wrapper" title="このページの上へ"><img src="http://img-cdn.jg.jugem.jp/d12/543560/20150215_1324791.png" width="48" height="48" alt="ポインタ" /></a></div> --> <!-- // JQuery ページスクロール --> </body> </html>
CSS
@charset "EUC-JP"; /* ---------------------------------------- 作成日:2015.03.01 テンプレート名: beige-type1 by lefty_haru (http://hidarikikiryu.jugem.jp) ---------------------------------------- */ /* ←ここから 読み終わりましたらこの部分は邪魔ですので削除してください。 文字、色、サイズなど改変はご自由におやりください。再配布は禁止です。 色・サイズなど変更しての再配布も禁止です。 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以前のブラウザでは表現されません(IE11では確認済み)。 Fire Fox、Google Chrome、Operaをお使いの方は最新のバージョンにしてください。 要所に変更時の注意点を記載してありますのでお読みください。 エントリー内最大画像横幅は628pxまで。 右サイドバーのフリースペースの編集は必ずリストタグを使ってください。 リストタグを使わないとスペースが均一に表示されません。 <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のbackgroundを #f2f1e7 に変更。 #f2f1e7に替えた時は、レイアウトのfooterのbackgroundも #d8d5c5 に変更してください。 */ body { font-size: 16px; color: #333; 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: 100%; background: #f2f1ec; text-align: center; } h1, h2, h3 { font-weight: normal; } img { border: 0; } ul, ol { list-style-type: none; } /* ----------------リンク */ /* 個別リンク以外全て */ a { color: #444; text-decoration: none; } a:hover { color: #be2e2c; text-decoration: underline; } /* h1 ブログタイトル */ #site_title a { color: #555;text-decoration: none; } #site_title a:hover { color: #be2e2c;text-decoration: none; } /* カレンダー */ .calendar a { color:#be2e2c; text-decoration:none; } .calendar a:hover { color:#be2e2c; text-decoration:underline; } /* 記事内リンク */ .entry_body a { color: #be2e2c; text-decoration: none; } .entry_body a:hover { color: #be2e2c; text-decoration: underline; } /* 記事タイトル */ .entry h2 a { color: #585858; text-decoration: none; } .entry h2 a:hover { color: #be2e2c; text-decoration: none; } /* nav コメント・トラックバック */ .red a { color:#be2e2c; text-decoration: none; } .red a:hover { color:#be2e2c; 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カラムレイアウト */ #wrapper { width: 100%; min-width: 1040px; margin: 0px auto; } #header { width: 100%; background: #fdfdfd; } /* 右ナビとメインの間のborderは#mainと#navの長さがそろわなくてもfooterまで伸びるように 画像で表示してます。両サイドのborderの色を変更する場合は、変更色で巾:1px・高さ:10pxの border画像を作ってアップロードしbackgroundのurlを書き換えてください。 */ #contents { width: 1040px; margin: 0 auto; background: url(http://img-cdn.jg.jugem.jp/d12/543560/20150212_1322527.png) 720px top repeat-y; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } #main { float: left; width: 720px; text-align: left; padding: 20px 0px 0px; } #nav { float: right; width: 320px; text-align: left; padding: 30px 0px 0px; } #footer { width: 100%; padding: 200px 0px 20px; border-top: 1px solid #ccc; background: #dedcd0; } /* -------------------- ヘッダー部 --------------- */ /* ログイン */ ul.management { width: 1010px; text-align: right; margin: 0px auto; padding: 5px 30px 0px 0px; list-style: none; } ul.management li{ float: right; text-align: right; font-size: 13px; padding: 0px 0px 0px 10px; } ul.management li a { display: block; } ul.management li a:hover { opacity: 0.8; } /* ブログタイトル */ /* 説明位置を真ん中にするには、text-align:center;にしてpaddingの一番右を0pxにしてwidthを1040pxに変更。 右にずらす場合は、paddingの4番目の数値:10pxを変更。 加算した数字分width: 1030pxから引いてください。 h1の高さ調節はpaddingの1番目の数値:60pxを変えて下さい。 */ h1#site_title { width: 1030px; text-align: left; font-size: 28px; text-shadow:1px 1px 1px #ccc; margin: 0px auto; padding: 60px 0px 10px 10px; } /* ブログ説明 */ /* 説明位置を真ん中にするには、text-align:center;にしてpaddingの一番右を0pxにしてwidthを1040pxに変更。 右にずらす場合は、paddingの4番目の数値:10pxを変更。 加算した数字分width: 1030pxから引いてください。 */ .description { width: 1030px; text-align: left; font-size: 12px; text-shadow:1px 1px 1px #cdcdcd; margin: 0px auto; padding: 0px 0px 30px 10px; } /* header カレンダー */ .calendar { text-align: center; font-size: 14px; letter-spacing: 0.1em; padding: 14px 0px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } /* カレンダーを見出しと同じ左詰めで表示する場合はこちらを使ってください。 */ /* ====================←使うときはこれを削除 .calendar { width: 1000px; text-align:left; font-size: 14px; letter-spacing: 0.1em; margin: 0px auto; padding: 14px 0px 14px 40px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } 使うときはこれを削除→ ===================== */ /* ------------------------------ #main エントリー --------------- */ /* エントリー単体表示時上部プレビューネクストリンク */ .entry_navi { text-align: center; font-size: 13px; margin: 10px 0px; } /* エントリー本体 */ .entry { width: 720px; margin: 10px 0px 40px; } /* line-heightはエントリータイトルが2行になった際、文字が重ならないギリで設定してます */ h2 { font-size: 27px; line-height: 110%; text-shadow:1px 1px 1px #d2d2d2; margin: 0px 40px 0px 0px; padding: 20px 0px 5px 40px; } .entry_date { color: #be2e2c; font-size: 13px; padding: 0px 0px 10px 40px; } /* エントリー本文 */ .entry_body { font-size: 14px; line-height: 170%; letter-spacing: 0.1em; padding: 15px 40px 0px; } /* エントリー続き */ .entry_more { font-size: 14px; line-height: 170%; letter-spacing: 0.1em; padding: 15px 40px 0px; } /* 続きを読む */ .entry_sequel_link { text-align: right; text-shadow:1px 1px 1px #cfcfcf; padding: 0px 5px 0px 0px; } .entry_sequel_link a { color:#444; text-decoration:none; } .entry_sequel_link a:hover { color:#be2e2c; text-decoration:underline; } /* エントリー本文・続き内最大画像横幅は628pxまで */ .entry_body img, .entry_more img { padding: 5px; background: #fefefe; border: 1px solid #aaa; } /* 引用:1行未満短文はq、複数行はblockquote使用 記事の投稿リッチエディターでの引用(”のアイコンボタン)を使うとblokquoteのみになります。 qを使う場合は、HTMLモードに切り替え<q></q>タグを使ってください。 <q>タグを打ち込むと自動生成で<q></q>が作られるので、<q>ここに</q>引用短文を入れてください。 アップロード表示では自動で引用の「」が生成されます。 */ q { font-size: 14px; line-height: 170%; background: #fff; } blockquote { font-size: 14px; line-height: 170%; margin: 10px 0px; padding: 9px; border: 1px solid #aaa; background: #fff; } /* ソーシャルボタン */ .social-wrap { margin: 30px 0px 0px; padding: 10px 0px; background: #ece9d8; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .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 10px; border-bottom: 1px solid #ccc; } /* 単体エントリー表示時 コメント部 */ .comment-send { font-size: 14px; line-height: 170%; padding: 15px 40px 0px; } .comment { margin: 20px 0px 30px; padding: 10px 0px; } .comment_title { font-size: 20px; margin: 20px 0px 0px; padding: 0px 0px 0px 40px; } .comment_author { font-size: 13px; text-align: right; margin: 10px 0px 25px; padding: 2px 10px 0px 0px; border-top: 1px dashed #999; } .comment-send .fill-in { width: 250px; padding: 2px 0px; } .comment-send textarea { width: 500px; } .transmit { letter-spacing: 0.1em; padding: 2px 4px; } /* 単体エントリー表示時 トラックバック部 */ .trackback { margin: 20px 0px 30px; padding: 10px 0px; } .trackback_title { font-size: 20px; margin: 20px 0px 0px; padding: 0px 0px 0px 40px; } .trackback_url { font-size: 14px; padding: 10px 0px 0px 40px; } .trackback_author { font-size: 13px; text-align: right; margin: 10px 0px 25px; padding: 2px 0px 0px; border-top: 1px dashed #999; } /* #main下部プレビューネクストナビ */ .prenext-navi { text-align: center; font-size: 14px; color: #be2e2c; margin: 0px 0px 30px; } .prenext-navi span { margin: 0px 2px; padding: 0px 5px; border: 1px solid #ccc; background: #fdfdfd; } .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: #444; text-decoration: none; } .prenext-navi a:hover { color: #be2e2c; text-decoration: underline; } /* ---------- #main プロフィール詳細ページ用 */ .profile_title { font-size: 20px; margin: 0px 0px 20px; padding: 10px 0px 10px 40px; border-bottom: 1px solid #ccc; } .profile_name { font-size: 14px; margin: 0px 0px 20px; padding: 0px 0px 0px 40px; } .entry-bottom { text-align: right; font-size: 14px; padding: 10px 40px 30px 0px; border-bottom: 1px solid #ccc; } /* ---------------------------------------- #nav 右サイド -------------------- */ .side-unit { margin: 0px 30px 30px; } /* タイトル下に線を入れる場合は border-bottom: 1px solid #ccc; を追加 */ h3 { font-size: 20px; color: #444; padding: 20px 0px 14px; } .side-contents { font-size: 12px; } .side-contents ul { list-style: none; } .side-contents li { line-height: 1.3em; padding: 14px 0px 14px 5px; border-bottom: 1px solid #ccc; } /* 検索・フォーム */ .reference { position: relative; margin: 0px 30px 30px; } .refer-form { position: relative; } #character-input { width: 254px; height: 28px; font-size: 13px; color: #333; padding: 1px 2px 1px; background: #fbfaf6; border: 1px solid #aaa; } #magnifier { position: absolute; top: 2px; left: 228px; } /* -------------- user */ .profile { font-size: 13px; margin: 20px 30px 30px; padding: 14px 0px 14px 5px; border-bottom: 1px solid #ccc; } .profile dt { line-height: 1.3em; padding: 5px 0px 5px; } .profile dd { line-height: 1.3em; padding: 5px 0px 5px; } .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; } /* スポンサーリンク */ .ad { margin: 0px 30px; padding: 0px 0px 30px; } .ad-contents { font-size: 12px; padding: 10px 0px 0px 5px; } /* ---------------------------------------- #footer フッター ---------------- */ /* ジュゲムバナー */ .banner { text-align: right; font-size: 13px; padding: 0px 80px 3px 0px; } /* 著作権 */ .copyright { text-align: right; font-size: 13px; padding: 0px 80px 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; text-align: center; position: fixed; list-style: none; bottom: 15px; right: 20px; } ul#sns-unit li { padding: 0px 0px 5px; } ul#sns-unit li a { display: block; } ul#sns-unit li a:hover { opacity: 0.8; } /* JQUERY ページトップ */ /* SNS Iconを削除してページトップ単体で使うときはこちらを使って下さい。 */ /* ←使うときはこれを削除 #page-top { position: fixed; bottom: 30px; right: 30px; } #page-top a { display: block; } #page-top a:hover { opacity: 0.8; } 使うときはこれを削除→ */
高品質デザイン選び放題で、あなた好みのブログに。今すぐブログ作成!
今すぐ
無料ブログ
をはじめよう! ≫
ブログ作成
利用規約
|
プライバシーポリシー
|
推奨環境
|
会社概要
|
サイトマップ
Copyright © 2003-2021 株式会社メディアーノ All Rights Reserved.
ページの先頭へ↑