無料ブログをかんたん作成
無料ブログ作成ならJUGEM(ジュゲム)
ホーム
ブログ作成
ブログを書く
ブログを見る
無料ブログ作成
JUGEM PLUS お申し込み
サービス紹介
JUGEM(無料ブログ)
JUGEM PLUS(有料プラン)
ブログ機能一覧表
デザイン
公式ブログデザイン
PC版
スマートフォン版
ユーザー作成
ユーザー作成
JUGEM を楽しむ
投稿する・みんなとつながる
ブログテーマ
ブログのお題
その他のコンテンツ
芸能人・有名人のブログ
スペシャルインタビュー
JUGEM を楽しむ 一覧
サポート
管理者ページ・マニュアル
FAQ
お知らせ
新着情報
メンテナンス情報
障害情報
おすすめブログ紹介
このページでは JavaScript を使用しています。JavaScript を有効にしてください。
ホーム
>
ブログデザイン一覧
>
ユーザー作成テンプレート「utf」
>
テンプレートHTML・CSSについて
公開されているテンプレートのHTMLに{ad}タグがないものありますので、エラーが表示された場合は{ad}タグを追加してご利用ください。
テンプレートの利用について
弊社が著作権を所有する画像等以外のテンプレートに関する著作権は制作者にあります。弊社提供以外のブログサービスで利用した場合は、その都度制作者の方にご確認ください。
テンプレート名 :
Kitty_g
テンプレートイメージ表示ページへ戻る
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> <!- 作成日:2010.09.18 テンプレート名:Kitty_g by mintcream (http://firebird.mintcream.moo.jp/) ご自由にカスタマイズしてください -> </head> <body onload="javascript:initval();"> <!-- wrapper --> <div id="wrapper"> <a id="top" name="top"></a> <div id="ribbon"> <!-- リボンはサイトのトップにリンクしていますが、ご自分のTwitterなど、お好きなところにリンクしてください。--> <a href="./"><img src="http://img.firebird.mintcream.moo.jp/20100917_458633.gif" width="73" height="73" alt="りぼん" style=" position: relative; top: 0; right: 0;"> </a> </div> <!-- header --> <div id="header"> <!-- BEGIN title --> <h1><a href="./">{blog_name}</a></h1> <div id="description">{blog_description}</div> <!-- END title --> </div> <!-- /header --> <!-- content --> <div id="content"> <div id="amazon_body"> <!-- BEGIN amazon --><!-- アマゾン 繰り返し開始 --> <!-- END amazon_pict --> <div class="amazon_pict"> <a href="{amazon_url}" target="_blank"> <img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName} {amazon_ListPrice}" title="{amazon_ProductName} {amazon_ListPrice}" /></a> <!-- BEGIN amazon_text --> <div class="amazon_text"> <a href="{amazon_url}">{amazon_ProductName}</a> {amazon_Creator} {amazon_comment} </div> <!-- END amazon_text --> </div> <!-- END amazon_pict --> <!-- END amazon --><!-- アマゾン 繰り返し終了 --> </div> <!-- END amazon_body --> <!-- main --> <div id="main"> <!-- BEGIN sequel --> <div id="entryNavi"> {prev_entry} | <a href="./">main</a> | {next_entry} </div> <!-- END sequel --> <!-- BEGIN entry --> <div class="entry"> <h2><img src="http://img.firebird.mintcream.moo.jp/20100919_465911.gif" alt="" width="32" height="32" style="height: 32px; vertical-align:middle"/> {entry_title} </h2> <div class="entryBody">{entry_description}</div> <a name="sequel"></a> <div class="entryMore">{entry_sequel}</div> <div class="entryState"> {entry_date}|{category_name}|{entry_time}|{comment_num}|{trackback_num}|{pookmark_link}|{logpi_link}|by {user_name}|{love}</div> <a href="{entry_permalink}"><p style="font-size: 15px; font-weight: bold; color: #fb81a0; margin: 10px 0px 5px 0px;">Related entry</p></a> <!-- BEGIN related_entry --> {related_entry_list} <!-- END related_entry --> <br class="clear" /> </div> {trackback_auto_discovery} <!-- END entry --> <!-- BEGIN comment_area --> <a name="comments"></a> <div id="comment"> <div id="commentTitle">コメント</div> <!-- BEGIN comment --> <div class="commentBody">{comment_description}</div> <ul class="commentState"> <li>{comment_name}</li> <li>{comment_time}</li> </ul> <!-- END comment --> <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();" /> <input type="checkbox" name="set_cookie" value="1" id="set_cookie"> <label for="set_cookie">入力情報を登録しますか?</label> </form> </div> </div> <!-- END comment_area --> <!-- BEGIN trackback_area --> <a name="trackback"></a> <div id="trackback"> <div id="trackbackURL">この記事のトラックバックURL</div> <input type="text" value="{trackback_url}" /> <div id="trackbackTitle">トラックバック</div> <!-- BEGIN trackback --> <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> <!-- END trackback --> </div> <!-- END trackback_area --> <!-- BEGIN profile_area --> <div id="profile"> <div id="profileTitle">プロフィール</div> <div id="profileName">{profile_name}</div> <div id="profileBody">{profile_description}</div> </div> <!-- END profile_area --> <!-- BEGIN page --> <div id="entryNavi"> {prev_page_link} | {page_now}/{page_num}PAGES | {next_page_link} </div> <!-- END page --> <div class="pageTop"> <a href="#top">このページの先頭へ▲</a> </div> </div> <!-- /main --> <!-- left --> <div id="left"> <!-- BEGIN freespace1 --> <h3>{freespace_title1}</h3> <div class="sideContents"> {freespace_contents1} </div> <!-- END freespace1 --> <!-- BEGIN freespace2 --> <h3>{freespace_title2}</h3> <div class="sideContents"> {freespace_contents2} </div> <!-- END freespace2 --> <!-- BEGIN freespace3 --> <h3>{freespace_title3}</h3> <div class="sideContents"> {freespace_contents3} </div> <!-- END freespace3 --> <!-- BEGIN freespace4 --> <h3>{freespace_title4}</h3> <div class="sideContents"> {freespace_contents4} </div> <!-- END freespace4 --> <!-- BEGIN freespace5 --> <h3>{freespace_title5}</h3> <div class="sideContents"> {freespace_contents5} </div> <!-- END freespace5 --> <div style="text-align: right;"> <!-- イメージ いらなければ消してください ここから --> <img src="http://img.firebird.mintcream.moo.jp/20100919_465911.gif" alt="リボン" width="32" height="32" /> <img src="http://img.firebird.mintcream.moo.jp/20100917_458633.gif" alt="リボンななめがけ" width="73" height="73" class="pict" /> <img src="http://img.firebird.mintcream.moo.jp/20100918_460429.jpg" alt="カーテン" width="230" height="20" class="pict" /> <img src="http://img.firebird.mintcream.moo.jp/20100918_460144.jpg" alt="カーテン" width="230" height="96" class="pict" /> <!-- ここまで --> </div> <div class="calendar"> <table border="0" cellspacing="1" cellpadding="0"> <tr> <td class="weekday">Sun</td> <td class="weekday">Mon</td> <td class="weekday">Tue</td> <td class="weekday">Wed</td> <td class="weekday">Thu</td> <td class="weekday">Fri</td> <td class="weekday">Sat</td> </tr> </table> {calendar} </div> <!-- END calendar --> <!-- BEGIN jugem_ad --> <h3>PR</h3> <div class="sideContents"> {ad} </div> <!-- END jugem_ad --> </div> <!-- /left --> <!-- right --> <div id="right"> <!-- BEGIN category --> <div class="linktitle" id="category"> <h3>Categories</h3> </div> <div class="linktext"> {category_selectbox} </div> <!-- END category --> <!-- BEGIN selected_entry --> <h3>Selected entries</h3> <div class="sideContents"> {selected_entry_list} </div> <!-- END selected_entry --> <!-- BEGIN recent_comment --> <h3>Recent comment</h3> <div class="sideContents"> {recent_comment_list} </div> <!-- END recent_comment --> <!-- BEGIN recent_trackback --> <h3>Recent trackback</h3> <div class="sideContents"> {recent_trackback_list} </div> <!-- END recent_trackback --> <!-- BEGIN archives --> <div class="linktitle" id="archives"> <h3>Archives</h3> </div> <div class="linktext"> {archives_selectbox} </div> <!-- END archives --> <!-- BEGIN link --> <h3>Links</h3> <div class="sideContents"> {link_list} </div> <!-- END link --> <!-- BEGIN profile --> <h3>Profile</h3> <div class="sideContents"> {user_list} </div> <!-- END profile --> <!-- search --> <h3>Search this site.</h3> <div class="sideContents"> <form method="get" action="./"> <table cellpadding="0" cellspacing="0" border="0"> <tr valign="middle"> <td><input id="search" name="search" size="20" style="width:110px" class="search" /></td> <td><input type="submit" value="Search" /></td> </tr> </table> </form> </div> <!-- /search/ --> <!-- powered --> <h3>Others</h3> <div class="sideContents"> <ul> <li><a href="./manage/">Admin</a></li> <li><a href="./?mode=rss">RSS1.0</a></li> <li><a href="./?mode=atom">Atom0.3</a></li> <li><a href="http://ja-jp.colourlovers.com/" target="_blank" title="Color Trends + Palettes COLOURlovers">Color Trends + Palettes COLOURlovers</a></li> <li>Template Design : <a href="http://firebird.mintcream.moo.jp/" target="_blank" title="テンプレートデザイン">mintcream</a></li> <li>Blog : <a href="http://firebird.mintcream.moo.jp/" target="_blank" title="ブログ">Mint Cream Next</a></li> </ul> </div> <!-- /powered --> <!-- moblie --> <!-- /moblie --> <!-- powered --> <h3>powered</h3> <div class="sideContents"> <a href="http://jugem.jp/" target="_blank"><img src="../template/banner/powered_04b.gif" width="128" height="22" alt="みんなのブログポータル JUGEM" border="0" /></a> </div> <!-- /powered --> </div> <!-- /right --> <br class="clear" /> </div> <!-- /content/ --> <!-- footer --> <div id="footer"> <div id="copyright"><a href="./">copyright</a></div> </div> <!-- /footer --> </div> <!-- /wrapper/ --> <!-- Lightbox ここからは画像の拡大スクリプトです。リンクタグにrel=lightboxと追加すると、画像がスムーズに拡大するスクリプトです --> <script type="text/javascript"> <!-- /* Lightbox JS: Fullsize Image Overlays by Lokesh Dhakar - http://www.huddletogether.com For more information on this script, visit: http://huddletogether.com/projects/lightbox/ Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ (basically, do anything you want, just leave my name and link) Table of Contents ----------------- Configuration Functions - getPageScroll() - getPageSize() - pause() - getKey() - listenKey() - showLightbox() - hideLightbox() - initLightbox() - addLoadEvent() Function Calls - addLoadEvent(initLightbox) */ // // Configuration // // If you would like to use a custom loading image or close button reference them in the next two lines. var loadingImage = 'http://img-cdn.jg.jugem.jp/d77/92614/20100715_1296294.gif'; var closeButton = 'http://img-cdn.jg.jugem.jp/d77/92614/20100715_1296293.gif'; // // getPageScroll() // Returns array with x,y page scroll values. // Core code from - quirksmode.org // function getPageScroll(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict yScroll = document.documentElement.scrollTop; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; } arrayPageScroll = new Array('',yScroll) return arrayPageScroll; } // // getPageSize() // Returns array with page width, height and window width, height // Core code from - quirksmode.org // Edit for Firefox by pHaez // function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize; } // // pause(numberMillis) // Pauses code execution for specified time. Uses busy code, not good. // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602 // function pause(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } } // // getKey(key) // Gets keycode. If 'x' is pressed then it hides the lightbox. // function getKey(e){ if (e == null) { // ie keycode = event.keyCode; } else { // mozilla keycode = e.which; } key = String.fromCharCode(keycode).toLowerCase(); if(key == 'x'){ hideLightbox(); } } // // listenKey() // function listenKey () { document.onkeypress = getKey; } // // showLightbox() // Preloads images. Pleaces new image in lightbox then centers and displays. // function showLightbox(objLink) { // prep objects var objOverlay = document.getElementById('overlay'); var objLightbox = document.getElementById('lightbox'); var objCaption = document.getElementById('lightboxCaption'); var objImage = document.getElementById('lightboxImage'); var objLoadingImage = document.getElementById('loadingImage'); var objLightboxDetails = document.getElementById('lightboxDetails'); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // center loadingImage if it exists if (objLoadingImage) { objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px'); objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px'); objLoadingImage.style.display = 'block'; } // set height of Overlay to take up whole page and show objOverlay.style.height = (arrayPageSize[1] + 'px'); objOverlay.style.display = 'block'; // preload image imgPreload = new Image(); imgPreload.onload=function(){ objImage.src = objLink.href; // center lightbox and make sure that the top and left values are not negative // and the image placed outside the viewport var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2); var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2); objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px"; objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px"; objLightboxDetails.style.width = imgPreload.width + 'px'; if(objLink.getAttribute('title')){ objCaption.style.display = 'block'; //objCaption.style.width = imgPreload.width + 'px'; objCaption.innerHTML = objLink.getAttribute('title'); } else { objCaption.style.display = 'none'; } // A small pause between the image loading and displaying is required with IE, // this prevents the previous image displaying for a short burst causing flicker. if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } if (objLoadingImage) { objLoadingImage.style.display = 'none'; } // Hide select boxes as they will 'peek' through the image in IE selects = document.getElementsByTagName("select"); for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "hidden"; } objLightbox.style.display = 'block'; // After image is loaded, update the overlay height as the new image might have // increased the overall page height. arrayPageSize = getPageSize(); objOverlay.style.height = (arrayPageSize[1] + 'px'); // Check for 'x' keypress listenKey(); return false; } imgPreload.src = objLink.href; } // // hideLightbox() // function hideLightbox() { // get objects objOverlay = document.getElementById('overlay'); objLightbox = document.getElementById('lightbox'); // hide lightbox and overlay objOverlay.style.display = 'none'; objLightbox.style.display = 'none'; // make select boxes visible selects = document.getElementsByTagName("select"); for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "visible"; } // disable keypress listener document.onkeypress = ''; } // // initLightbox() // Function runs on window load, going through link tags looking for rel="lightbox". // These links receive onclick events that enable the lightbox display for their targets. // The function also inserts html markup at the top of the page which will be used as a // container for the overlay pattern and the inline image. // function initLightbox() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName("a"); // loop through all anchor tags for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){ anchor.onclick = function () {showLightbox(this); return false;} } } // the rest of this code inserts html at the top of the page that looks like this: // // <div id="overlay"> // <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a> // </div> // <div id="lightbox"> // <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image"> // <img id="closeButton" /> // <img id="lightboxImage" /> // </a> // <div id="lightboxDetails"> // <div id="lightboxCaption"></div> // <div id="keyboardMsg"></div> // </div> // </div> var objBody = document.getElementsByTagName("body").item(0); // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file) var objOverlay = document.createElement("div"); objOverlay.setAttribute('id','overlay'); objOverlay.onclick = function () {hideLightbox(); return false;} objOverlay.style.display = 'none'; objOverlay.style.position = 'absolute'; objOverlay.style.top = '0'; objOverlay.style.left = '0'; objOverlay.style.zIndex = '90'; objOverlay.style.width = '100%'; objBody.insertBefore(objOverlay, objBody.firstChild); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // preload and create loader image var imgPreloader = new Image(); // if loader image found, create link to hide lightbox and create loadingimage imgPreloader.onload=function(){ var objLoadingImageLink = document.createElement("a"); objLoadingImageLink.setAttribute('href','#'); objLoadingImageLink.onclick = function () {hideLightbox(); return false;} objOverlay.appendChild(objLoadingImageLink); var objLoadingImage = document.createElement("img"); objLoadingImage.src = loadingImage; objLoadingImage.setAttribute('id','loadingImage'); objLoadingImage.style.position = 'absolute'; objLoadingImage.style.zIndex = '150'; objLoadingImageLink.appendChild(objLoadingImage); imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs return false; } imgPreloader.src = loadingImage; // create lightbox div, same note about styles as above var objLightbox = document.createElement("div"); objLightbox.setAttribute('id','lightbox'); objLightbox.style.display = 'none'; objLightbox.style.position = 'absolute'; objLightbox.style.zIndex = '100'; objBody.insertBefore(objLightbox, objOverlay.nextSibling); // create link var objLink = document.createElement("a"); objLink.setAttribute('href','#'); objLink.setAttribute('title','Click to close'); objLink.onclick = function () {hideLightbox(); return false;} objLightbox.appendChild(objLink); // preload and create close button image var imgPreloadCloseButton = new Image(); // if close button image found, imgPreloadCloseButton.onload=function(){ var objCloseButton = document.createElement("img"); objCloseButton.src = closeButton; objCloseButton.setAttribute('id','closeButton'); objCloseButton.style.position = 'absolute'; objCloseButton.style.zIndex = '200'; objLink.appendChild(objCloseButton); return false; } imgPreloadCloseButton.src = closeButton; // create image var objImage = document.createElement("img"); objImage.setAttribute('id','lightboxImage'); objLink.appendChild(objImage); // create details div, a container for the caption and keyboard message var objLightboxDetails = document.createElement("div"); objLightboxDetails.setAttribute('id','lightboxDetails'); objLightbox.appendChild(objLightboxDetails); // create caption var objCaption = document.createElement("div"); objCaption.setAttribute('id','lightboxCaption'); objCaption.style.display = 'none'; objLightboxDetails.appendChild(objCaption); // create keyboard message var objKeyboardMsg = document.createElement("div"); objKeyboardMsg.setAttribute('id','keyboardMsg'); objKeyboardMsg.innerHTML = 'press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close'; objLightboxDetails.appendChild(objKeyboardMsg); } // // addLoadEvent() // Adds event to window.onload without overwriting currently assigned onload functions. // Function found at Simon Willison's weblog - http://simon.incutio.com/ // function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } } addLoadEvent(initLightbox); // run initLightbox onLoad // --> </script> </body> </html>
CSS
@charset "EUC-JP"; /* ---------------------------------------- ■はじめに [custom]は、カスタマイズするために最適化された 公式テンプレートです。 カスタマイズした場合は、下記のクレジットを書いて、 ユーザーテンプレートファイル(utf)に公開しよう! ※カスタマイズしたらこの文章は削除してください ■カスタマイズ方法がわからない人へ StepUp!JUGEM「PCテンプレ編集講座」 http://stepup-j.jugem.jp/?cid=12 ---------------------------------------- */ /* ---------------------------------------- 作成日:2010.09.17 テンプレート名:Kitty_g by mintcream (http://firebird.mintcream.moo.jp/) ---------------------------------------- */ /* -------------------------------------- リセット --------------------------------------- */ h1,h2,h3,h4,h5,h6 {font-size:100%;} a {text-decoration:underline;overflow:hidden;} img {border:none;vertical-align:top;} li {list-style-type: square; margin-bottom: 3px;} hr {display:none;clear:both;} br.clear {clear:both;} /* -------------------------------------- 共通部分 --------------------------------------- */ *{margin:0px; padding: 0px; } /* ページ全体のテキスト色 */ html {color:#473f41;} /* ページ全体 */ body { width:100%; text-align:center; font-size:14px; line-height: 130%; font-family: "Century Gothic", "ヒラギノ角ゴ Pro W3", "Verdana" , "MS ゴシック", "Osaka‐等幅"; line-height:1.6em; background-color:#dcdbd5; background-image:url(); background-repeat:repeat; background-position:; background-attachment:scroll; } /* ページ全体のリンク色 */ a {color:#5a5053;text-decoration:underline;font-weight:bolder; border-bottom: dotted 1px #9e9e9e;} a:link {color:#5a5053;text-decoration:underline;font-weight:bolder; border-bottom: dotted 1px #9e9e9e;} a:visited {color:#d1d0c9;text-decoration:none; border: 0px;} a:hover {color:#fbb383;text-decoration:none;} a:active {color:#de8795;text-decoration:none;} /* ブログ名の色 */ h1 a,h1 a:link,h1 a:visited {color:#ffffff;text-decoration:none;} h1 a:hover,h1 a:active {color:#fbe1ff;text-decoration:none;} /* 両サイドメニューのリンク色 */ #left a,#right a {color:#252429;text-decoration:none;} #right a:link {color:#a7dafc;text-decoration:none; border: 0px;} #right a:visited {color:#b5acae;text-decoration:none; font-weight: normal;} #left a:link {color:#f6239e;text-decoration:underline;font-weight:bolder; border-bottom: dotted 1px #9e9e9e;} #left a:visited {color:#d1d0c9;text-decoration:underline;font-weight:bolder;} #left a:hover,#right a:hover {color:#e5d409;text-decoration:none;} #left a:active,#right a:active {color:#f6239e;text-decoration:none;} /* ------------------------------------- * ページレイアウト --------------------------------------- */ /* ------------------------------------- ■ページ全体の変更方法(初期は幅950に設定されています) ・A にページ全体の幅を指定する ・B + 40 = A になるように B の値を指定する ・C + D + E + 40 + 40 = A になるように C と D と Eの値を指定する ※左サイドの幅は C 、記事の枠の幅は D 、右サイトの幅は E の値を変更 ※余白(padding)の値を変えない場合の方法です --------------------------------------- */ /*ページ全体の幅、レイアウトを中央揃え*/ #wrapper { width:950px; /* A */ margin:0 auto; padding:0px 0px 10px 0px; background-color:#f7f7f5; text-align: left; } #ribbon { width:950px; margin:0 auto; padding:0px; background-color:#f7f7f5; text-align: right; } /*ブログ名と説明文、トップ画像*/ #header { width:910px; /* B */ height:130px; clear:left; margin:0 auto 10px; padding:0; background-color:#fee5f6; background-image:url(http://img.firebird.mintcream.moo.jp/20100918_460727.jpg); background-repeat:repeat; background-position:bottom center; background-attachment:scroll; } /*コンテンツ枠(記事の枠+サイドメニューの枠)*/ #content { width: 910px; margin:0 auto; padding:20px 0px 20px 0px; } /* 左側の幅(右サイドメニューの枠) */ /* メインの幅(記事の枠)*/ #main { float:left; width:430px; /* C */ zoom:1; padding:5px; } #left {/* サイドバー左 */ float:left; width:230px; /* D */ zoom:1; padding:10px 0px 10px 0px; font-size: 13px; line-height: 150%; } /* 右側の幅(サイドバー右) */ #right { float:left; width:230px; /* E */ zoom:1; overflow: hidden; padding:10px 3px 10px 3px; font-size: 13px; line-height: 150%; color: #b5acae; } /* フッター */ #footer { width:100%; clear:left; } /* -------------------------------------- メイン --------------------------------------- */ /* ブログ名 */ h1 {font-size:20px;padding:45px 0 0 30px;} /* ブログの説明文 */ div#description {margin:15px 0 0 0;padding:0 0 0 30px;} .entry {margin:0px 0 10px 0; border-bottom: dotted 1px #d1d1d1; padding:20px 5px 20px 5px; } /* 次の記事・前の記事 */ #entryNavi {margin:0 0 15px 0;} /* 記事のタイトル */ h2 {font-size:17px;font-weight:bolder; background-image:url(); background-repeat:repeat; color:#fbb383; } /* 記事本文 */ .entryBody {margin:15px 0px 15px 0px;} /* 記事の続き */ .entryMore {margin:10px 0 10px 0;} /* 記事の情報 */ .entryState { text-align: left; display:inline; padding-left:2px; font-size: 12px; margin: 0px; color: #8f8f8f; } /* コメント枠 */ #comment {background-color:#eeeeee;padding:10px;margin:20px 0 0 0;} #commentTitle { margin:0 0 5px 0; font-size:14px; font-weight:bolder; } #commentSendTitle { margin:20px 0 5px 0; font-size:14px; font-weight:bolder; } .commentBody {margin:5px 0;} ul.commentState {margin:0 0 15px 0;} ul.commentState li { display:inline; border-left:1px solid #eeeeee; padding-left:5px; } .commentSendForm {margin:0;} .commentSendForm .input {width:250px;} .commentSendForm textarea {width:350px;margin:0 0 10px 0;} /* トラックバック枠 */ #trackback {background-color: #a7dafc; ;padding:10px;margin:20px 0 0 0;} #trackbackURL { margin:0 0 5px 0; font-size:14px; font-weight:bolder; } #trackbackTitle { margin:20px 0 5px 0; font-size:14px; font-weight:bolder; } #trackback input {width:350px;} .trackbackName {margin:0;} .trackbackBody {margin:5px 0;} ul.trackbackState {margin:0 0 15px 0;} ul.trackbackState li { display:inline; border-left:1px solid #999999; padding-left:5px; } /* プロフィールのページ */ #profile{margin:0;} #profileTitle {font-size:14px;font-weight:bolder;} #profileName {margin:15px 0 0 0;} #profileBody {margin:5px 0;} /* このページの先頭へ */ .pageTop {margin:10px 0 0 0} /* -------------------------------------- 記事の装飾 --------------------------------------- */ /* 引用 */ #main blockquote { background-color: #eeeeee; padding:10px; margin:10px; } /* 画像 */ #main .pict {border:5px #eeeeee solid;padding:0px;} /* リスト */ div.entryBody li,div.entryMore li { list-style:circle; margin:0px; } /* -------------------------------------- サイドメニュー --------------------------------------- */ /* サイドメニューのタイトル */ #left h3 {font-size:16px;font-weight:bolder;margin:0 0 5px 0; font-family: "Century Gothic", "ヒラギノ角ゴ Pro W3", "Verdana" , "MS ゴシック", "Osaka‐等幅"; color: #a7dafc; } #right h3 {font-size:14px;font-weight:bolder;margin:15px 0px 15px 0px;padding: 3px; font-family: "Century Gothic", "ヒラギノ角ゴ Pro W3", "Verdana" , "MS ゴシック", "Osaka‐等幅"; width: 230px; background-color: #fdd0ef; color: #fef6e5; } /* サイドメニューの内容 */ .sideContents {margin:10px 0 10px 0;} .sideContents ul {margin: 0px; padding-left: 3px;} .sideContents li {margin: 0px; padding-left: 5px;} /* ---------------------------------------- Footer ---------------------------------------- */ #footer { background-image: url();/* ←背景 */ text-align:center; margin:20px 0 0 0; background-color: #fee5f6; } #copyright { font-size:12px; padding:10 0 10 0; text-align:center; font-weight: bold; } a,#copyright a:link,#copyright a:visited,#copyright {color:#f542a9;text-decoration:none;} /* アマゾン*/ #amazon_body { background-image: url();/* ←商品背景 */ margin: 0px auto; padding: 0px; text-align: center; width: 910px; height: 93px; overflow: auto; background-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-face-color: #f8c8f2; scrollbar-3dlight-color: #f3f3f3; scrollbar-darkshadow-color: #d5d5d5; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #f3f3f3; scrollbar-arrow-color: #ffffff; background-color: #eeeeee; } .amazon_text{ margin: 0px; padding: 0px; display: none; } .amazon_pict a:link, .amazon_pict a:visited, .amazon_pict a:hover, .amazon_pict a:active { background-color: #ffffff; color: #ffffff; border: none 0px #ffffff; } .amazon_pict { background-color: #ffffff; float: left; margin: 5px; padding: 0px; width: 80px; height: 80px; text-align: center; overflow: hidden; border: solid 1px #ffffff; } .amazon_pict img { vertical-align: middle; border: solid 1px #ffffff; } /* CALENDAR */.calendar { font-family: "Verdana"; font-size: 12px; line-height: 140%; margin: 1px 10px 20px 0px; padding: 3px 0px 10px 0px; width: 230px; } .cell { /*background: url() no-repeat;*/ height: 13px; padding: 1px; width:30px; } .weekday { text-align: center; width:30px; height: 13px; padding: 1px; background-color: #f6239e; color: #ffffff; } .emoji { margin: 3px; padding: 0px; } .line{ background-image:url(http://img.firebird.mintcream.moo.jp/20100917_456896.jpg); background-repeat:repeat; height: 2px; color: #ffffff; padding: 0px; } /* Lightbox 画像のスムーズ拡大 */ #lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption{ float: left; } #keyboardMsg{ float: right; } #closeButton{ top: 5px; right: 5px; } #lightbox img{ border: none; clear: both;} #overlay img{ border: none; } #overlay{ background-image: url(http://img-cdn.jg.jugem.jp/d77/92614/20100715_1296295.png); } * html #overlay{ background-color: #333; back\ground-color: transparent; background-image: url(blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://img-cdn.jg.jugem.jp/d77/92614/20100715_1296295.png", sizingMethod="scale"); }
高品質デザイン選び放題で、あなた好みのブログに。今すぐブログ作成!
今すぐ
無料ブログ
をはじめよう! ≫
ブログ作成
利用規約
|
プライバシーポリシー
|
推奨環境
|
会社概要
|
サイトマップ
Copyright © 2003-2021 株式会社メディアーノ All Rights Reserved.
ページの先頭へ↑