2883.nobody.jp/ css:clover

CSS-CLOVER

↑クリックすると実物大の画像が開きます	ありきたりな毎日の中にも小さなハッピーはあふれてる。たとえば、今朝はなんだかゴハンが美味しく炊けたのよね～とかたとえば、近所の野良ネコさんに赤ちゃんが生まれたとかたとえば、洗ったジーンズのポケットの中に500円玉が入ってた! だとか。（笑）【CLOVER】はそんな、ほんのりハッピーなひと時をイメージして作りました。記事タイトルとポータルバーのリンク部分にカーソルを乗せるとアイコンが変わるようにして、新しくなった（・・・といっても他所では普通のことですが・笑）Doblogの機能を活かしてみました。 ↓タイトルのパターンは3種類。素材と基本のCSSは下からどうぞ。
■タイトル画像はサムネイルになっています。クリックして開いた画像をお持ち帰りくださいネ。
■基本のCSSは↓のテキストボックスからどうぞ。（タイトル画像を入れ替える場合は画像URLをご自分のブログへアップした画像URLと入れ替えてください） /=============================================/ /* 【 OFD-template : Clover 】 / / http://www.doblog.com/weblog/myblog/2883 / /=============================================/ /---------------------------------------------/ / 全体 / /---------------------------------------------/ body { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; color : #888888 ; background-color : #ffffff ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI4_1E.gif") ; text-align : center ; margin-top : 0px ; margin-bottom : 10px ; scrollbar-face-color:#ffffff; scrollbar-highlight-color: #999999; scrollbar-shadow-color: #999999; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #999999; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #ffffff; } .myblog-position { text-align : left ; width : 760px ; position : absolute ; left : 50% ; margin : 0px 0px 0px -380px ; border-left : solid 1px #999999 ; border-right : solid 1px #999999 ; background-color : #ffffff ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI6_1E.gif") ; background-repeat : no-repeat ; background-position : top center ; } .myblog-contents { margin : 50px 10px 0px 10px ; } .footer { font-family: "verdana", Arial, Helvetica, sans-serif; color : #ffffff ; font-size : 8pt ; font-weight : bold ; width : 100% ; background-color : #9cd55e !important; background-image : url("") ; background-repeat : no-repeat ; background-position : center ; } i { color : #666666 ; font-size : 10px ; text-decoration : none ; font-style : normal ; } u { color : #990000 ; font-size : 12px ; text-decoration : none ; font-style : normal ; } /---------------------------------------------/ / リンク / /---------------------------------------------/ a:link { color : #888888 ; } a:active { color : #888888 ; } a:visited { color : #888888 ; } a:hover { color : #990000 ; } .blog-scene img { border : dotted 0px #cccccc ; } /---------------------------------------------/ / フォーム / /---------------------------------------------/ form { margin : 0px ; } input { color : #999999 ; border: 1px solid #ccc; background-color : #ffffff ; margin: 2px; height :18px ; } form table input { color : #bcdd77 ; border: 1px solid #bcdd77; background-color : #ffffff ; height: 18px; } textarea { border: 1px solid #999; margin: 2px; } /---------------------------------------------/ / Doblogヘッダー / /---------------------------------------------/ .myblog-position form table { color : #ffffff ; position: absolute; width : 760px ; right: 10px; top : 100px ; background-image : none ; height : 80px ; } .myblog-position form td { padding-top : 10px ; text-align : right ; } .myblog-position A.portalbar:link { color : #93c33c ; line-height : 200% ; text-decoration : none ; padding-left : 26px ; padding-top : 5px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_4E.gif") ; background-repeat : no-repeat ; } .myblog-position A.portalbar:active { color : #93c33c ; line-height : 200% ; text-decoration : none ; padding-left : 26px ; padding-top : 5px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_4E.gif") ; background-repeat : no-repeat ; } .myblog-position A.portalbar:visited { color : #93c33c ; line-height : 200% ; text-decoration : none ; padding-left : 26px ; padding-top : 5px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_4E.gif") ; background-repeat : no-repeat ; } .myblog-position A.portalbar:hover { color: #93c33c ; line-height : 200% ; background-color : transparent ; text-decoration : none ; padding-left : 26px ; padding-top : 5px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_5E.gif") ; background-repeat : no-repeat ; } /---------------------------------------------/ / ページタイトル / /---------------------------------------------/ .myblog-header { background-color : ; width : ; height : 151px ; padding-top : 50px ; padding-left : 150px ; voice-family : "\"}\""; voice-family : inherit; } .myblog-header-text { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size: ; font-weight : bold ; line-height : ; color : #333333 ; } .myblog-header-text a:link { color : #000000; text-decoration: none;} .myblog-header-text a:visited { color :#000000; text-decoration: none;} .myblog-header-text a:active { color : #000000; text-decoration: none;} .myblog-header-text a:hover { color :#990000; text-decoration: none;} .myblog-header img { vartical-align : text-bottom ; margin : 0px 0px 0px 0px ; } /---------------------------------------------/ / メニュー / /---------------------------------------------/ .menu { width : 180px ; float : right ; background-color : transparent ; padding-top : 110px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI4_5E.gif") ; background-repeat : no-repeat ; background-position : top center ; } .menu-header { font-family: "verdana", "ＭＳＰゴシック", Osaka, sans-serif ; font-size : 75% ; line-height : 135% ; color : #93c33c; font-weight : bold ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI4_2E.gif"); background-repeat : no-repeat ; background-position : right ; padding : 10px 0px 0px 0px ; margin : 0px 10px 0px 10px ; border-bottom : 2px dotted #cccccc ; voice-family : "\"}\""; voice-family : inherit; } .menu-contents { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : 65% ; line-height : 150% ; padding : 5px 0px 0px 5px ; margin : 0px 0px 30px 10px ; word-break : break-all ; } .menu-contents p { margin : 0px 0px 3px 0px ; } .menu-contents hr { color : #cccccc ; background-color : transparent ; width : 95% ; height : 1px ; border : none ; padding : 0px 0px 0px 0px ; margin : 0px 0px 0px 0px ; } .menu input { width : ; } .menu table { text-align : center ; font-size : 11px ; color : #999999 ; width : 160px ; } /---------------------------------------------/ / カレンダー / /---------------------------------------------/ .calender { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : 85% ; line-height : 150% ; } .calender-focus { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : 85% ; font-weight : bold ; line-height : 150% ; color : #bcdd77 ; } /---------------------------------------------/ / 記事　 / /---------------------------------------------/ .blog { width : 530px ; background-color : ; border : none ; float : left ; voice-family : "\"}\""; voice-family : inherit; } .blog-header { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : ; line-height : 150% ; font-weight : bold ; color: #888888 ; padding : 0px 0px 0px 0px ; margin : 0px 10px 0px 0px ; border-bottom : 1px dotted #cccccc ; voice-family : "\"}\""; voice-family : inherit; display : none ; } .blog-contents { padding : 0px 0px 0px 0px ; margin : 0px 0px 0px 10px ; voice-family : "\"}\""; voice-family : inherit; } .blog-number { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : 65% ; line-height : 150% ; text-align : left ; padding : 5px 0px 0px 0px ; } .blog-category { } .blog-genre { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : 75% ; line-height : 150% ; padding : 5px 0px 4px 5px ; margin : 5px 0px ; border : 1px dotted #cccccc ; } .blog-search { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : 75% ; line-height : 150% ; padding : 5px 0px 4px 5px ; margin : 5px 0px ; border : 1px dotted #cccccc ; } .blog-pageselect { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : 65% ; line-height : 150% ; text-align : left ; padding : 5px 5px 10px 5px ; margin : 5px 0px ; border : 0px dotted #cccccc ; } .blog-date { font-size : 75% ; color : #99cc33 ; font-weight : bold ; padding : 5px 5px 0px 0px ; margin : 20px 0px 5px 0px ; clear : both ; background-image : url("") ; background-repeat : no-repeat ; background-position : center ; } .blog-entry { margin : 0px 0px 0px 0px ; } .blog-title { padding : 0px 0px 0px 0px ; margin : 0px 0px 0px 0px ; } .blog-scene { margin : 5px 0px ; overflow : visible ; width : 100% ; } .blog-title-time { font-size : 65% ; color : #999999 ; float : left; padding-left : 5px ; } .docolog-icon { background-image : url("/image/mypage/icon_gps001.gif") ; width : 64px ; height : 16px ; text-align : right ; cursor : hand ; float : right ; } .blog-title-title { font-weight: bold; font-size : 85% ; color : #444444 ; border-bottom : dotted 2px #cccccc; padding : 3px 0px 5px 0px ; margin : 0px 0px 5px 0px ; } .blog-title-title a:link { color : #666666 ; text-decoration: none; padding-left : 30px ; padding-bottom : 3px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_2E.gif") ; background-repeat : no-repeat ; } .blog-title-title a:visited { color : #666666 ; text-decoration: none; padding-left : 30px ; padding-bottom : 3px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_2E.gif") ; background-repeat : no-repeat ; } .blog-title-title a:active { color : #666666 ; text-decoration: none; padding-left : 30px ; padding-bottom : 3px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_2E.gif") ; background-repeat : no-repeat ; } .blog-title-title a:hover { color : #000000 ; text-decoration: none; padding-left : 30px ; padding-bottom : 3px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_3E.gif") ; background-repeat : no-repeat ; } .blog-title-slide { font-size : 65% ; text-align : right ; } .blog-image { overflow : visible ; margin : 10px 0px 10px 5px ; float : right ; } .blog-text { padding : 10px 0px 10px 5px ; font-size : 75% ; color : #555555 ; line-height : 150% ; word-break : break-all ; } .blog-text-url { margin-top : 1em ; word-break : break-all ; } .blog-entry-footer { font-size : 70% ; line-height : 150% ; padding-bottom : 2px ; padding-top : 2px ; font-size : 65% ; } .blog-update { text-align : right ; margin-bottom : 5px ; clear : both ; display : none ; } .blog-showmap { margin : 10px 0px ; } .blog-showmap-text { / font-size : 75%; line-height : 125%;/ font-family : "verdana", "ＭＳＰゴシック", "Osaka"; border : dotted 1px #cccccc ; padding : 5px ; } .blog-linkurl { font-size : 85% ; padding : 5px 5px 5px 15px ; margin : 0px ; } .blog-trackback { padding : 7px 5px 7px 13px ; font-size : 85% ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI4_3E.gif") ; 　　　　　background-repeat : no-repeat ; background-position : right ; } .blog-pagetop { text-align : right ; margin-top : 1.5em ; padding-bottom : 5px ; font-size : 85% ; } /---------------------------------------------/ / ポップアップ / /---------------------------------------------*/ .blog-popup { text-align : left ; padding : 5px ; margin : 5px ; border : 0px dotted #cccccc ; background-color : transparent ; clear : both ; } .blog-popup-text { font-family : "verdana", "ＭＳＰゴシック", "Osaka", "sans-serif" ; font-size : 75% ; line-height : 125% ; } .blog-popup-text .blog-title-title { border : none ; } .blog-popup-text .list-pagenumber { display : block ; border-bottom : solid 1px #cccccc ; padding-bottom : 8px ; margin-bottom : 5px ; } .blog-popup-text input { width : 450px ; border : solid 1px #999999 ; background-color : #ffffff ; } .blog-popup-text textarea { width : 450px ; margin-bottom : 10px ; background-image : url("http://img.doblog.com/72000/u71664/1000/FI4_4E.gif") ; background-repeat : no-repeat ; background-position : right bottom ; }

メニューフレームが表示されていない場合は→ HOME