テーマ集のJapanese-Styleのcssをもとに、このBlogをイメージチェンジしました。
変更ポイントとは4点です。
1.トップの画像を変えること。
2.文字を少し大きくすること。
3.文字の行間を少し広げること。
4.全体の配色を黒ベースから紺ベースに変更すること。
cssなど全くいじったこともありません。仕事を終えての深夜作業となりましたが、結構パズルを解くような思いで、おもしろかったです。
パンパでガウチョさんのBlogを大いに参考にさせていただきました。
トップの画像を変えること、cssのアレンジ、検索窓の件など、大変感謝しています。
ところで、blog提供者(ここではlivedoor)のblogのcssを改変して、私のようなものが使うのは、blogの世界では著作権問題は発生しないのでしょうか?少し心配です。どなたかご教授ください。。
あまり参考にならないと思いますが、ほっとメール@ひたちのcssを付記します。
変更ポイントとは4点です。
1.トップの画像を変えること。
2.文字を少し大きくすること。
3.文字の行間を少し広げること。
4.全体の配色を黒ベースから紺ベースに変更すること。
cssなど全くいじったこともありません。仕事を終えての深夜作業となりましたが、結構パズルを解くような思いで、おもしろかったです。
パンパでガウチョさんのBlogを大いに参考にさせていただきました。
トップの画像を変えること、cssのアレンジ、検索窓の件など、大変感謝しています。
ところで、blog提供者(ここではlivedoor)のblogのcssを改変して、私のようなものが使うのは、blogの世界では著作権問題は発生しないのでしょうか?少し心配です。どなたかご教授ください。。
あまり参考にならないと思いますが、ほっとメール@ひたちのcssを付記します。
@charset "EUC-JP";
/* ------------------------------------------------------- */
/* Yoshihiro IDE allright-reserved */
/* 7.Feb.2004 */
/* テーマ集のJapanese-Styleのcssをもとに書き直してあります */
/* 変更のポイントは */
/* 1.トップの画像を変えること */
/* 2.文字を少し大きくすること */
/* 3.文字の行間を少し広げること */
/* 4.全体の配色を黒ベースから紺ベースに変更すること */
/* ------------------------------------------------------- */
body{
color:#000;
margin:0;
padding:0;
background:#fff url('040207back.jpg') no-repeat scroll 50% 0;
text-align:center;
}
/* background:#fff url('040207back.jpg') no-repeat scroll 50% 0; */
/* 一番上に表示される画像(雲の画像)を指定しています */
a{color:#000;text-decoration:underline;}
a:link{color:#000;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#fff;background:#ee0817;text-decoration:none;}
a.acalendar{color:#ee0817;text-decoration:underline;}
a.acalendar:link{color:#ee0817;text-decoration:underline;}
a.acalendar:visited{color:#ee0817;text-decoration:underline;}
a.acalendar:active{color:#ee0817;}
a.acalendar:hover{color:#fff;background:#ee0817;text-decoration:none;}
a.acontinues{color:#ee0817;text-decoration:underline;}
a.acontinues:link{color:#ee0817;text-decoration:underline;}
a.acontinues:visited{text-decoration:underline;}
a.acontinues:active{}
a.acontinues:hover{color:#999;text-decoration:none;}
a.amenu{color:#666;text-decoration:underline;}
a.amenu:link{color:#666;text-decoration:underline;}
a.amenu:visited{text-decoration:underline;}
a.amenu:active{}
a.amenu:hover{color:#999;text-decoration:none;}
a.aposted{color:#666;text-decoration:underline;}
a.aposted:link{color:#666;text-decoration:underline;}
a.aposted:visited{text-decoration:underline;}
a.aposted:active{text-decoration:underline;}
a.aposted:hover{color:#999;text-decoration:none;}
a.atrackback-post{color:#666;text-decoration:underline;}
a.atrackback-post:link{color:#666;text-decoration:underline;}
a.atrackback-post:visited{text-decoration:underline;}
a.atrackback-post:active{text-decoration:underline;}
a.atrackback-post:hover{color:#999;text-decoration:none;}
a.arss{color:#fff;text-decoration:underline;}
a.arss:link{color:#fff;text-decoration:underline;}
a.arss:visited{text-decoration:underline;}
a.arss:active{}
a.arss:hover{color:#fff;text-decoration:none;}
#container{
margin:0 auto 0 auto;
width:748px;
text-align:left;
border-left:1px solid #666;
border-right:1px solid #666;
}
#banner,#subbanner{
}
#banner a{color:#00003E;text-decoration:none;}
#banner a:link{color:#00003E;text-decoration:none;}
#banner a:visited{color:#00003E;text-decoration:none;}
#banner a:active{color:#00003E;}
#banner a:hover{color:#00003E;text-decoration:underline;}
#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#fff;text-decoration:none;}
#subbanner a:visited{color:#fff;text-decoration:none;}
#subbanner a:active{color:#fff;}
#subbanner a:hover{color:#fff;text-decoration:underline;}
.blogtitle{
color:#00003E;
font-size:26px;
font-weight:bold;
text-indent:-1000px;
text-decoration:none;
padding:100px 10px 0 0;
text-align:left;
}
/* text-indent:-1000px; */
/* タイトル文字を左に飛ばしています */
/* livedoor-blogではタイトル文字を省略することは出来ません */
.description{
color:#fff;
font-size:small;
font-weight:bold;
margin:0 10px 0 0;
text-align:right;
}
/* font-size:small; */
/* オリジナルのテーマより文字を大きくしました。 */
/* x-smallをsmallにxx-smallをx-smallに変更しています。 */
#content{
float:right;
width:530px;
}
.blog{
margin:0;
padding:50px 25px 25px 25px;
text-align:left;
}
.date{
color:#000;
font-size:small;
font-weight:bold;
margin:5px 0 5px 0;
}
.blogbody{
margin:25px 0 0 0;
}
.titlebanner{position:absolute; top:85px; left:62%;}
/* .titlebanner{position:absolute; top:85px; left:62%;} */
/* タイトルに画像「ほっとメール@ひたち」を使っています */
/* その画像タイトルの位置を指定しています */
.title{
color:#fff;
font-size:small;
font-weight:bold;
padding:5px 0 3px 10px;
height:22px;
background:#00003E url('040206line.gif') repeat-y scroll 100% 0;
}
h1,h2,h3{
margin:0;
padding:0;
}
div.main{
font-size:small;
color:#00003E;
line-height:150%;
margin:25px 0 30px 0;
}
/* line-height:150%; */
/* 本文の文字段落をいくぶん広げ読みやすくしました */
/* オリジナルでは135%、150%に広げてあります */
.main-continues{
font-size:small;
}
.posted{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
.menu{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
.comments-head{
color:#fff;
font-size:small;
font-weight:bold;
padding:5px 0 3px 10px;
height:22px;
background:#00003E url('040206line.gif') repeat-y scroll 100% 0;
}
.comments-body{
font-size:small;
line-height:135%;
margin:25px 0 30px 0;
}
.comments-post{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
.trackback-url{
color:#ee0817;
font-size:small;
font-weight:bold;
margin:25px 0 30px 0;
}
.trackback-body{
font-size:small;
line-height:135%;
margin:25px 0 30px 0;
}
.trackback-post{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
table.form{margin:25px 0 0 0;}
label{
font-size:small;
font-weight:bold;
}
#author{width:200px;border:1px solid #ee0817;}
#email{width:200px;border:1px solid #ee0817;}
#url{width:200px;border:1px solid #ee0817;}
#text{width:500px;height:200px;border:1px solid #ee0817;}
.pagetop{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
#links{
float:left;
width:216px;
margin:0;
padding:50px 0 50px 0;
text-align:center;
}
.calendarhead{
color:#ee0817;
font-size:small;
font-weight:bold;
letter-spacing:5px;
margin:0 15px 5px 25px;
text-align:center;
}
.calendartable{
margin:0 auto 20px auto;
border-right:15px solid #fff;
border-left:25px solid #fff;
}
.calendarweek{color:#fff;font-size:small;font-weight:bold;padding:0 2px;}
.calendarwd{background:#00003E;}
.calendard{empty-cells:show;}
.calendardbg{background:#fff;}
.calendar{
font-size:small;
padding:0 2px;
}
.sidetitle{
color:#fff;
font-size:small;
font-weight:bold;
letter-spacing:5px;
margin:0 15px 10px 25px;
padding:5px;
background:#00003E;
text-align:center;
}
.side{
font-size:small;
line-height:115%;
margin:0 15px 20px 25px;
padding:5px;
text-align:right;
}
.sidebody{padding:0 0 5px 0;}
.photo{text-align:right;}
.nickname{color:#ee0817;font-size:small;font-weight:bold;margin:10px 0;}
.message{font-size:small;}
.quotetable{background:#00003E;}
.quote{color:#000;font-size:small;padding:1px;background:#fff;}
.blogtimes{margin:0 0 10px 0;text-align:center;}
.powered{
margin:10px 15px 5px 25px;
text-align:center;
}
.syndicate{
font-size:small;
margin:0 15px 0 25px;
text-align:center;
}
/* ------------------------------------------------------- */
/* Yoshihiro IDE allright-reserved */
/* 7.Feb.2004 */
/* テーマ集のJapanese-Styleのcssをもとに書き直してあります */
/* 変更のポイントは */
/* 1.トップの画像を変えること */
/* 2.文字を少し大きくすること */
/* 3.文字の行間を少し広げること */
/* 4.全体の配色を黒ベースから紺ベースに変更すること */
/* ------------------------------------------------------- */
body{
color:#000;
margin:0;
padding:0;
background:#fff url('040207back.jpg') no-repeat scroll 50% 0;
text-align:center;
}
/* background:#fff url('040207back.jpg') no-repeat scroll 50% 0; */
/* 一番上に表示される画像(雲の画像)を指定しています */
a{color:#000;text-decoration:underline;}
a:link{color:#000;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#fff;background:#ee0817;text-decoration:none;}
a.acalendar{color:#ee0817;text-decoration:underline;}
a.acalendar:link{color:#ee0817;text-decoration:underline;}
a.acalendar:visited{color:#ee0817;text-decoration:underline;}
a.acalendar:active{color:#ee0817;}
a.acalendar:hover{color:#fff;background:#ee0817;text-decoration:none;}
a.acontinues{color:#ee0817;text-decoration:underline;}
a.acontinues:link{color:#ee0817;text-decoration:underline;}
a.acontinues:visited{text-decoration:underline;}
a.acontinues:active{}
a.acontinues:hover{color:#999;text-decoration:none;}
a.amenu{color:#666;text-decoration:underline;}
a.amenu:link{color:#666;text-decoration:underline;}
a.amenu:visited{text-decoration:underline;}
a.amenu:active{}
a.amenu:hover{color:#999;text-decoration:none;}
a.aposted{color:#666;text-decoration:underline;}
a.aposted:link{color:#666;text-decoration:underline;}
a.aposted:visited{text-decoration:underline;}
a.aposted:active{text-decoration:underline;}
a.aposted:hover{color:#999;text-decoration:none;}
a.atrackback-post{color:#666;text-decoration:underline;}
a.atrackback-post:link{color:#666;text-decoration:underline;}
a.atrackback-post:visited{text-decoration:underline;}
a.atrackback-post:active{text-decoration:underline;}
a.atrackback-post:hover{color:#999;text-decoration:none;}
a.arss{color:#fff;text-decoration:underline;}
a.arss:link{color:#fff;text-decoration:underline;}
a.arss:visited{text-decoration:underline;}
a.arss:active{}
a.arss:hover{color:#fff;text-decoration:none;}
#container{
margin:0 auto 0 auto;
width:748px;
text-align:left;
border-left:1px solid #666;
border-right:1px solid #666;
}
#banner,#subbanner{
}
#banner a{color:#00003E;text-decoration:none;}
#banner a:link{color:#00003E;text-decoration:none;}
#banner a:visited{color:#00003E;text-decoration:none;}
#banner a:active{color:#00003E;}
#banner a:hover{color:#00003E;text-decoration:underline;}
#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#fff;text-decoration:none;}
#subbanner a:visited{color:#fff;text-decoration:none;}
#subbanner a:active{color:#fff;}
#subbanner a:hover{color:#fff;text-decoration:underline;}
.blogtitle{
color:#00003E;
font-size:26px;
font-weight:bold;
text-indent:-1000px;
text-decoration:none;
padding:100px 10px 0 0;
text-align:left;
}
/* text-indent:-1000px; */
/* タイトル文字を左に飛ばしています */
/* livedoor-blogではタイトル文字を省略することは出来ません */
.description{
color:#fff;
font-size:small;
font-weight:bold;
margin:0 10px 0 0;
text-align:right;
}
/* font-size:small; */
/* オリジナルのテーマより文字を大きくしました。 */
/* x-smallをsmallにxx-smallをx-smallに変更しています。 */
#content{
float:right;
width:530px;
}
.blog{
margin:0;
padding:50px 25px 25px 25px;
text-align:left;
}
.date{
color:#000;
font-size:small;
font-weight:bold;
margin:5px 0 5px 0;
}
.blogbody{
margin:25px 0 0 0;
}
.titlebanner{position:absolute; top:85px; left:62%;}
/* .titlebanner{position:absolute; top:85px; left:62%;} */
/* タイトルに画像「ほっとメール@ひたち」を使っています */
/* その画像タイトルの位置を指定しています */
.title{
color:#fff;
font-size:small;
font-weight:bold;
padding:5px 0 3px 10px;
height:22px;
background:#00003E url('040206line.gif') repeat-y scroll 100% 0;
}
h1,h2,h3{
margin:0;
padding:0;
}
div.main{
font-size:small;
color:#00003E;
line-height:150%;
margin:25px 0 30px 0;
}
/* line-height:150%; */
/* 本文の文字段落をいくぶん広げ読みやすくしました */
/* オリジナルでは135%、150%に広げてあります */
.main-continues{
font-size:small;
}
.posted{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
.menu{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
.comments-head{
color:#fff;
font-size:small;
font-weight:bold;
padding:5px 0 3px 10px;
height:22px;
background:#00003E url('040206line.gif') repeat-y scroll 100% 0;
}
.comments-body{
font-size:small;
line-height:135%;
margin:25px 0 30px 0;
}
.comments-post{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
.trackback-url{
color:#ee0817;
font-size:small;
font-weight:bold;
margin:25px 0 30px 0;
}
.trackback-body{
font-size:small;
line-height:135%;
margin:25px 0 30px 0;
}
.trackback-post{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
table.form{margin:25px 0 0 0;}
label{
font-size:small;
font-weight:bold;
}
#author{width:200px;border:1px solid #ee0817;}
#email{width:200px;border:1px solid #ee0817;}
#url{width:200px;border:1px solid #ee0817;}
#text{width:500px;height:200px;border:1px solid #ee0817;}
.pagetop{
color:#666;
font-size:x-small;
text-align:right;
margin:0 0 25px 0;
}
#links{
float:left;
width:216px;
margin:0;
padding:50px 0 50px 0;
text-align:center;
}
.calendarhead{
color:#ee0817;
font-size:small;
font-weight:bold;
letter-spacing:5px;
margin:0 15px 5px 25px;
text-align:center;
}
.calendartable{
margin:0 auto 20px auto;
border-right:15px solid #fff;
border-left:25px solid #fff;
}
.calendarweek{color:#fff;font-size:small;font-weight:bold;padding:0 2px;}
.calendarwd{background:#00003E;}
.calendard{empty-cells:show;}
.calendardbg{background:#fff;}
.calendar{
font-size:small;
padding:0 2px;
}
.sidetitle{
color:#fff;
font-size:small;
font-weight:bold;
letter-spacing:5px;
margin:0 15px 10px 25px;
padding:5px;
background:#00003E;
text-align:center;
}
.side{
font-size:small;
line-height:115%;
margin:0 15px 20px 25px;
padding:5px;
text-align:right;
}
.sidebody{padding:0 0 5px 0;}
.photo{text-align:right;}
.nickname{color:#ee0817;font-size:small;font-weight:bold;margin:10px 0;}
.message{font-size:small;}
.quotetable{background:#00003E;}
.quote{color:#000;font-size:small;padding:1px;background:#fff;}
.blogtimes{margin:0 0 10px 0;text-align:center;}
.powered{
margin:10px 15px 5px 25px;
text-align:center;
}
.syndicate{
font-size:small;
margin:0 15px 0 25px;
text-align:center;
}
トップバナーのロゴの処理がきれいですね。参考にしていただいて光栄です。
デザインを好きなように変えられるのは、ここのセールスポイントのひとつのようです。その意味では、魅力的なBlogが出てくるのはlivedoorの方でも歓迎なのではないかと思っていますが…(笑)。
ではでは…。