グー版・迷子の古事記

古事記の世界をあっちへふらふらこっちへふらふら
気になったことだけ勝手に想像して勝手に納得しています

透明テンプレート

2013年12月04日 | 日記
やっとブログのレイアウト終わりました
文字がすけて背景が見えるし…なんかいいかも
seesaaのテンプレートに、こんな感じのテンプレートないからもしかして需要あるかな?

とりあえずスタイルシート載せておきます。
と言っても…
デザインテンプレートさんに置いてあった3カラムテンプレートに手を加えただけのものです

背景画像はスタイルシートの…

http://maigonokojiki.up.seesaa.net/image/006-thumbnail2.jpg?1383649548570

の部分にファイルマネージャーで取り込んだ好きな画像のurlを上書きしてください。

タイトルの背景はスタイルシートの…

#banner {
background: #000020;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

の部分で調整できます。
タイトルの背景色は…

background: #000020;

の部分に好きな色フォントを指定してください。
タイトル背景の透明度は…

filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;

の部分の数値で調整できます。
良くはわかりませんが…
50→40ならば 0.5→0.4 0.5→0.4
…っとしたほうがいいかもしれません。

それからど素人なので…質問されても多分わからないと思います
もし使う人がいるならコメント残してくれたら嬉しいかも
↓スタイルシート



<a href="http://template.seesaa.net" target="_blank">http://template.seesaa.net

*/

/* font-size, color, line-height */

h1 {
font-size: 1em;
}
h1 a{
}
h2,h3{
font-size: 1em;
}

#banner, #content, #links-left, #links{
font-size: 0.95em;
color: #EEEEEE;
line-height: 140%;
}

a{
text-decoration: none;
color: #EEEEEE;
padding: 0px 0.2em 0px 0em;
}

a:hover{
color: #EEEEEE;
text-decoration: underline;
}

#calendar table td,#calendar table th, .calendarhead {
font-size: 12px;
line-height: 100%;
background: ;
}

/* layout color */

body {
background: ;

background-image:url("http://maigonokojiki.up.seesaa.net/image/006-thumbnail2.jpg?1383649548570");
background-repeat;
background-attachment:fixed;
background-position:center top;
}
#banner {
background: #000020;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
#content {
background: ;

}
#footer{
border-top: 2px solid #999999;
}
#copy {
font-size:12px;
color: #EEEEEE;
text-align:center;
margin-top:5px;
margin-bottom:5px;
padding:5px 5px 5px 5px;
border-top:dotted 1px #000;
clear:both;}
}

.calendarhead {
background: ;
color: ;
border-bottom: px solid #333333;
}
.sidetitle {
color: #FFFF11;
font-weight: bold;
border-bottom: px solid #9D8D64;
}
.side {
background: ;
border: px dotted #BBB095;
}
.posted, .comments-post{
border-top: 1px dashed #CCCCCC;
border-bottom: 1px dashed #CCCCCC;
background: ;
}
#calendar {
border: px solid #EEEEEE;
}
/* layout margin */

* {
margin: 0px;
}
.text, .navi, blockquote, .posted{
margin: 1em 20px 2em;
color:#EEEEEE;
}
.title {
margin: 0px 10px;
}
#comments, #trackback {
margin: 0px 35px 2em;
}

/* base layout */
body {
text-align: center;
}
#container{
text-align: left;
}
#banner {
text-align: center;
margin: 20px 220px 10px;
padding: 20px 0px 20px 20px;
}
#content {
margin: 0px 220px 20px;
padding-top: 20px;
}
#links-left {
width: 190px;
position: absolute;
margin: 0px;
left: 10px;
top: 20px;
}
#links {
width: 190px;
margin: 0px;
position: absolute;
right: 10px;
top: 20px;
}
#footer{
padding: 5px;
clear: both;
}
/* parts */
.description {
}
.navi {
border-bottom: 1px solid #CCCCCC;
padding: 3px 3px 5px;
}

.blog {}
.blogbody {}
.date{
margin: 1em 20px 0px;
text-align: right;
padding: 0px 0px 18px;
background: url(image/dateback01a.gif) no-repeat right bottom;
}

.title a{}
blockquote {
border: 1px solid #CCCCCC;
padding: 10px;
}
.posted{
padding: 5px;
}
.posted a{
}
#calendar {
margin: 0px 0px 1em;
}
#calendar table {
width: 188px;
}
.calendarhead {
padding: 5px 0px 3px;
}
.calendarday {
padding: 4px 0px;
}
.calendarday a{
font-weight: bold;
color: #00FFFF;
}
.sidetitle {
padding: 5px 0px 2px 3px;
margin: 0px 0px 2px;
}
.side {
padding: 10px;
}
.powered {
}
.syndicate {
}
.syndicate a{
}
#comments {
}
#comments textarea{

}
.comments-head{
font-weight: bold;
margin: 0px 0px 1em;
}

.comments-body {
}

.comments-post{
padding: 5px;
}
.comments-post a{
}
textarea {
width: 300px;
}
input {
width: 150px;
}
#trackback {
}
#trackback a {
}
.trackback-url {
}
.trackback-body {
}
.trackback-post {
}
.trackback-post a {
}
.copyright{
}
#diet-container{
}
.diet-title{
}
.diet-content{
}
#diet-foods{
}
.food-title{
}
.food-content{
}

(2013.11.6 迷子の古事記)