スキン変更。。。 [カスタムスキン]
久しぶりにスキン替えてみました♪
今回は凄く簡単だったのでそれほど時間はかかりませんでしたが
普段から作業してないと、ここどうやってたんだっけ?って感じで自分で
編集していたのに忘れてる事も。。。(^_^;)
すぐ思い出せるように前回のスキン(新緑)内容を記録~( ..)φメモメモ
前記事はこちら。
使っていた画像は3つ
後はこんな感じ。
@charset "UTF-8";
/*-----Common-----*/
a:link{ text-decoration:none; color:#40A730; }
a:visited{ text-decoration:none; color:#191970; }
a:active{ text-decoration:none; color:#191970; }
a:hover{ text-decoration:underline; color:#ff0000; }
body {
background: url("/_common/skins/412/images/bg.gif") repeat;
background-color: #E2F9FE;
}
blockquote {
margin: 12px;
padding: 6px;
border: 1px solid #dddddd;
}
#container {
width :1000px;
margin:0 auto;
background: url("/_common/skins/412/images/banner-bg.jpg") no-repeat top right;
line-height:1.4;
text-align:left;
color:#333333;
}
#banner {
height:140px;
padding-top:30px;
background: url("/_common/skins/412/images/main.jpg") no-repeat center top;
clear:both;
}
#banner h1{
margin: 40px 0px 0px 20px;
padding: 0px 0px 0px 0px;
font-size:40px;
font-family:HGP創英角ポップ体,serif;
}
#banner h1 a{
color: #3cb371;
}
#lead{
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 0px;
font-size:12px;
font-family:Arial,sans-serif;
color:#40A730;
}
/*-----Content-----*/
#content {
width:1000px;
overflow:hidden;
}
/* Links */
.archive-title{
color:#888888;
margin-bottom:3px;
}
.archive-bottom{
color:#888888;
margin-bottom: 6px;
}
.archive-name{
float:left;
}
.previousLink{
padding-left:14px;
background:url(/_common/skins/412/images/arrowL_small.gif) no-repeat left center;
}
.nextLink{
padding-right:14px;
background:url(/_common/skins/412/images/arrowR_small.gif) no-repeat right center;
}
.archive-links{
float:right;
padding-left:14px;
background:url(/_common/skins/412/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
white-space:nowrap;
}
/* Articles */
#main {
width:560px;
}
.articles {
width:540px;
background: #ffffff url("/_common/skins/412/images/article_bg.gif") repeat-y left top;
padding: 1px 10px 1px 10px;
overflow:hidden;
}
.articles a:link{ text-decoration: none; color:#40A730; }
.articles a:visited{ text-decoration: none; color:#191970; }
.articles a:hover{ text-decoration: underline; color:#ff0000; }
.articles-top {
background: url("/_common/skins/412/images/article_top.gif") no-repeat left bottom;
height: 10px;
font-size: 1px;
margin-top:3px;
}
.articles-bottom {
background: url("/_common/skins/412/images/article_bottom.gif") no-repeat left top;
height: 10px;
font-size: 1px;
margin-bottom:15px;
}
.articles-title {
margin:0;
margin-bottom:15px;
font-size:small;
line-height:1.4;
}
.articles-body {
line-height:1.6;
margin-bottom:20px;
}
.articles-body img {
margin-right: 6px;
margin-bottom: 6px;
}
.posted{
padding-top: 10px;
font-size:x-small;
color:#40A730;
}
/*-----Entry-----*/
.entry {
margin-top:15px;
padding:12px;
border: 1px #b1c9f7 solid;
}
.entry h4 {
margin:0 0 10px 0;
padding:0;
font-size:small;
}
.entry ul, .entry li, .entry dl, .entry dt, .entry dd, .entry form {
margin:0;
padding:0;
}
/* nice! */
#nice h4 {
background:url("/_common/skins/412/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
}
#nice form {
margin:12px 0;
}
#nice li {
float:left;
width:65px;
padding:5px 0;
font-size:x-small;
line-height:1.2;
text-align:center;
list-style:none;
overflow:hidden;
white-space:nowrap;
display:block;
}
/* Comments */
#comments form {
margin:12px 0;
}
.each-comment {
margin:20px 0;
clear:both;
}
.each-comment img {
float:left;
margin:0 10px;
}
.each-comment input {
margin:0;
padding:0;
_margin-bottom:-2px;
}
.comments-body {
margin:0 0 0 60px;
}
#comments .delete {
margin-left:60px;
}
/* Comment Write */
#comment-write dt {
float:left;
clear:both;
}
#comment-write dd {
margin:0 0 3px 80px;
line-height:1.5;
}
#comment-write textarea {
height:150px;
}
.comment-input {
width:420px;
}
/* Trackback Write */
#trackback-write p {
margin:0;
}
#trackback-write form {
margin:12px 0;
}
.each-trackback {
margin:15px 0;
}
.trackback-url input {
width:98%;
}
/* Related */
#related ul {
padding-left:20px;
}
#related li {
padding:1px 0;
}
/*-----Side-----*/
#side-a, #side-b {
width:200px;
overflow:hidden;
}
.sidebar {
width:200px;
overflow:hidden;
}
.sidebar-title {
margin:0;
color:#ffffff;
font-size: x-small;
padding: 8px 10px 5px 15px;
background: url("/_common/skins/412/images/side_title.gif") no-repeat left top;
line-height: 150%;
}
.sidebar-title a:link{ text-decoration: none; color:#FFF; }
.sidebar-title a:visited{ text-decoration: none; color:#FFF; }
.sidebar-title a:active{ text-decoration: none; color:#FFF; }
.sidebar-title a:hover{ text-decoration: underline; color:#FFF; }
.sidebar-end {
background: url("/_common/skins/412/images/side_bottom.gif") no-repeat left top;
height: 15px;
font-size: 1px;
}
.sidebar-body {
margin:0;
padding:5px 12px 1px 12px;
background: url("/_common/skins/412/images/side_bg.gif") repeat-y left top;
}
.sidebar-body ul, .sidebar-body li, .sidebar-body dl, .sidebar-body dt, .sidebar-body dd, .sidebar-body form {
margin:0;
padding:0;
}
.sidebar-body li {
padding-bottom: 3px;
margin-bottom: 9px;
border-bottom: #cecece dotted 1px;
list-style-type:none;
line-height:1.3;
}
.new {
margin-left:6px;
color:#f00;
font-weight:bold;
}
/*--Profile--*/
#profile .sidebar-body {
padding-top:8px;
}
dt.profile-img {
float:left;
}
dd.profile-status{
margin-left:85px;
line-height:1.8;
}
#profile .profileLink{
padding-left:12px;
background: url("/_common/skins/412/images/arrowR_small.gif") no-repeat left center;
line-height:1.2;
}
.nice {
margin:0;
padding:0 2px;
background:#ffd900;
border:1px solid #0090ff;
color:#0090ff;
}
/*--Calendar--*/
.calendar-date {
text-align:center;
}
#calendar table {
margin:0px auto;
text-align:center;}
#calendar th {
height:21px;
width:21px;
font-weight:normal;
}
#calendar td{
height:21px;
width:21px;
font-size:10px;
line-height:1;
}
#calendar td.link {
color:#0066cc;
background: url("/_common/skins/412/images/calendar_bg_link.gif") no-repeat center center;
}
#calendar td a:link{ text-decoration:none; color:#fff; }
#calendar td a:visited{ text-decoration:none; color:#fff; }
#calendar td a:active{ text-decoration:none; color:#fff; }
#calendar td a:hover{ text-decoration:underline; color:#fff; }
/*--Search--*/
#search .sidebar-body {
padding-bottom:6px;
}
.search-tbox {
width:67%;
}
/*--RSS Regist--*/
#rssRegist {
width:190px;
margin: 6px auto;
padding:4px 0;
_padding-top:3px;
line-height:1;
background: #6AC75C url("/_common/skins/412/images/arrowR_large.gif") no-repeat left center;
text-align:center;
font-weight:bold;
}
#rssRegist a:link{ text-decoration:none; color:#fff; }
#rssRegist a:visited{ text-decoration:none; color:#fff; }
#rssRegist a:active{ text-decoration:none; color:#fff; }
#rssRegist a:hover{ text-decoration:underline; color:#fff;}
/*--So-net--*/
#powered img {
margin:0 12px;
}
#rssfeed {
margin:12px 12px 0 12px;
}
/*--Tag--*/
.tag-word{
margin:10px 0 0 0;
}
.tag{
padding:0 5px;
}
#tag_cloud{
border:1px solid #cccccc;
margin-bottom:10px;
padding:12px 10px;
text-align:left;
}
#tag_cloud a {
padding:2px;
}
.tag-title{
padding-top:5px;
font-size:16px;
text-align:left;
font-weight:bold;
}
.tag-body{
margin:10px 0;
}
.tag-service{
text-align:left;
font-weight:bold;
border-bottom:1px solid #cccccc;
padding:0 0 3px 0;
clear:left;
position:relative;
}
.tag-search{
text-align:right;
padding:5px 0;
margin-bottom:10px;
}
.tag-article{
padding:2px 10px;
text-align:left;
}
.tag-article-title{
text-align:left;
padding:0 0 5px 0;
}
.tag-article-posted{
}
.tag-article-summary{
padding:0px 10px;
line-height:1.4em;
}
.tag-more{
text-align:right;
margin:10px 0;
clear:left;
}
.tag-photos{
float:left;
margin:0px 10px;
width:140px;
height:200px;
}
.tag-photos-title{
line-height:1.4em;
padding:5px 0;
text-align:left;
}
.tag-audios{
margin:2px 10px;
}
.tag-audios-title{
text-align:left;
padding:0 0 5px 0;
}
.tag-audios-posted{
}
.tag-videos{
float:left;
margin:0 10px;
}
.tag-videos-title{
line-height:1.4em;
padding:5px 0;
text-align:left;
}
.tag-navi{
clear:left;
text-align:center;
margin:10px 0;
}
.archive-name,
.archive-name {
display: block;
}
.archive-title .archive-links,
.archive-title .archive-links {
display: none;
}
.archive-bottom .archive-name,
.archive-bottom .archive-name {
margin-bottom: 5px;
}
.postDate,
.postDate {
display: block;
}
#comment-write dt,
#comment-write dt {
float: none;
}
#comment-write dd,
#comment-write dd {
margin-left: 0;
}
/*-----Footer-----*/
#footer{
width:780px;
margin:0 auto;
padding:20px 0;
}
.copyright{
margin:0;
font-size:x-small;
text-align:right;
}
#main {
float:right;
}
#side-a {
float:left;
}
.archive-title,
.archive-bottom {
width:412px;
font-size:x-small;
}
#main {
float:left;
width:632px;
padding:0;
margin-left:8px;
}
.articles {
width:612px;
background: #ffffff url("/_images/blog/_769/gooverability/article_bg_03-04289.GIF") repeat-y left top;
}
.articles-top {
background: url("/_images/blog/_769/gooverability/article_top_01-5d1dd.gif") no-repeat left bottom;
}
.articles-bottom {
background: url("/_images/blog/_769/gooverability/article_bottom_01-ad61b.gif") no-repeat left top;
}
#nice li {
width:60px;
}
.comment-input,
#comment-write textarea {
width:355px;
}
.search-tbox {
width:62%;
}
#side-a {
float:left;
}
#side-b {
float:right;
}
#side-a,
#side-b,
.sidebar {
width:176px;
}
.sidebar-body {
padding:5px 8px;
}
#rssRegist {
width:160px;
}
.sidebar-title {
background: url("/_common/skins/412/images/side_title_w.gif") no-repeat left top;
}
.sidebar-body {
background: url("/_common/skins/412/images/side_bg_w.gif") repeat-y left top;
}
.sidebar-end {
background: url("/_common/skins/412/images/side_bottom_w.gif") no-repeat left top;
}
違う方のブログに来てしまったのかと思いました。
暑い季節に、淡い色づかいも似合いますね。
by 馬子 (2008-08-13 21:40)
馬子さん、こんばんは。
今回のスキン選択、他のが今一ピンとこなかったので嫁さんが選びました。
見慣れてくると、これはこれでありかなと感じているところです (^o^)
by Ten (2008-08-13 22:02)
な・・・長い!
単にスキンの設定と言ってもこうして見ると複雑ですね~~C言語のコーディングみたい。
たまには雰囲気変えるのもいいですね・・・自分のブログも・・・やってみようかな
by 達也 (2008-08-13 22:54)
達也さん、こんばんは。
この中で理解出来てる部分は多分5行ぐらいです。。。(^_^;)
なんとなくでも必要なところさえ分かっていればカスタマイズは出来るもんですね。
by Ten (2008-08-13 23:23)
コンドーさんぐらいしか知りません ^_^;
by まさみ (2008-09-05 23:51)
まさみさん、おはよう御座います。
ベースがあれば変更は割と楽にできますね。
最初からはまず作れません。。。(^_^;)
by Ten (2008-09-06 07:49)