デザインを変更する

2004年1月26日 22:23 ani | 個別ページ | コメント(6) | トラックバック(0)

さっきコバに聞かれたので一応書いておきます。

手っ取り早くblogの画面デザインを変更するにはMovableTypeのサイトにあるDefault Styleからスタイルシートをコピーして、各自のメニューにある「テンプレートの編集」からStylesheetを選んでそのままペーストして保存。再構築をするとページに反映されます。
色んなblogサイトでテンプレートを公開してたりするので感謝しつつダウンロードしてくるのも手ですな。

今anilogで使っているスタイルシートはこんな感じです。
最後の方におまけで、スティッキーズっぽいクラスを追加してあります。

body {
		margin:20px 20px 20px 20px;
		background:#DDD;		
		}
	A 			{ color: #3366FF; text-decoration: none; }
	A:link		{ color: #3366FF; text-decoration: none; }
	A:visited	{ color: #3366FF; text-decoration: none; }
	A:active	{ color: #003366; }
	A:hover		{ color: #003366; }
	
	h1, h2, h3 {
		margin: 0px;
		padding: 0px;
	}

#banner {
		font-family:verdana, arial, sans-serif;
		color:#CC9933;
		font-size:x-large;
		font-weight:bold;
  		background:#DDD;
  		padding-left:15px; 					
		}
		
	#banner a,
        #banner a:link,
        #banner a:visited,
        #banner a:active,
        #banner a:hover {
		font-family:verdana, arial, sans-serif;
		font-size: x-large;
		color: #CC9933;
		text-decoration: none;
		}

.description {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:bold;
  		background:#DDD;	
  		text-transform:none;	
		letter-spacing: none; 		
		}	
				
	#content {
		float:left;
		width:65%;
		background:#DDD;
		margin-right:15px;
		margin-bottom:20px;
		}

#links {
		background:#DDD;
		color:#333;
		margin-top:35px;				
		}
		
	.blog {
  		padding-left:15px;
  		padding-top:15px;
  		padding-right:15px;					
		}	
	
	.blogbody {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;		
  		border-left:1px solid #666;			
  		border-right:1px solid #666;
  		border-bottom:1px solid #666;	  			  		
  		padding:10px;
		}

.category {
		font-size : x-small ;
		text-align : right ;
		margin : 0 ;
		padding : 0 ;
		}
		
	.blogbody a,
	.blogbody a:link,
	.blogbody a:visited,
	.blogbody a:active,
	.blogbody a:hover {
		font-weight: normal;
		text-decoration: underline;
	}
	
	.title { 
		font-family: verdana, arial, sans-serif; 
		font-size: small; 
		color: #333; 
		/*text-transform: uppercase;*/
		font-weight:bold;	
		}			
		
	#menu {
  		margin-bottom:10px;
		background:#DDD;
		font-family: verdana, arial, sans-serif;
		font-size:small;
		font-weight:bold;  							
		}	
		
	.date	{ 
		font-family:verdana, arial, sans-serif; 
		font-size: normal; 
		color: #999; 
		font-weight:bold;
		text-transform:uppercase;
		margin-top:10px;		
  		border-bottom:1px solid #666;	
		}			
		
	.posted	{ 
		font-family:verdana, arial, sans-serif; 
		font-size: x-small; 
		color: #333; 
		}
		
		
	.calendar {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:x-small;
		font-weight:normal;
  		padding:5px;				
		}
	
	.calendarhead {	
		font-family:verdana, arial, sans-serif;
		color:#CC9933;
		font-size:x-small;
		font-weight:bold;
  		background:#DDD;
  		line-height:140%;				
		}	
	
	.side {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:x-small;
		font-weight:normal;
  		background:#DDD;
  		line-height:140%;				
		}	
		
	.sidetitle {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:x-small;
		font-weight:bold;
  		background:#DDD;
  		line-height:140%;
  		padding:2px;
  		margin-top:10px;
  		border-bottom:1px solid #666;
  		text-transform:uppercase;
		letter-spacing: .2em;  					
		}		
	
	.syndicate {
		font-family:verdana, arial, sans-serif;
		font-size:xx-small;
		font-weight:bold;		
  		line-height:140%;
  		padding:2px;
  		margin-top:10px;
  		text-align:center;
  		background:#DDD;  		
 		}	
		
	.powered {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:xx-small;
		font-weight:bold;
		border-top:1px solid #666;
		border-bottom:1px solid #666;		
		line-height:140%;
		text-transform:uppercase; 
		padding:2px;
		margin-top:10px;
		text-align:center;
		letter-spacing: .2em  					
		}	
		
	
	.comments-body {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#DDD;
  		line-height:140%;					
		}

.comments-post {
		font-family:verdana, arial, sans-serif;
		color:#999;
		font-size:x-small;
		font-weight:normal;
  		background:#DDD;
 		margin-bottom:25px;
  		border-top:1px dashed #666;
		}	
		
	.comments-head	{ 
		font-family:verdana, arial, sans-serif; 
		font-size: small; 
		color: #333; 
		font-weight:bold;
		text-transform:uppercase;
		border-bottom:1px solid #666;		
		}

.trackback-body {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#DDD;
  		line-height:140%;	
  		padding-top:15px;				
		}

.trackback-url {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:small;
		font-weight:normal;
  		background:#DDD;
  		line-height:140%;	
  		padding:5px;
  		border:1px dashed #999; 				
		}

.trackback-post {
		font-family:verdana, arial, sans-serif;
		color:#333;
		font-size:x-small;
		font-weight:normal;
  		background:#DDD;
  		margin-bottom:20px;
		}

#banner-commentspop {
		font-family:verdana, arial, sans-serif;
		color:#CC9933;
		font-size:large;
		font-weight:bold;
  		background:#DDD;
  		padding-left:15px; 
		}

.gray_note {
    background-color:#EEE;
    color:#666;
    border-bottom:1px solid #999;
    border-left: 10px solid #999;
    border-right: 1px solid #999;
    border-top: 1px solid #999;
    padding:10px;
}

.pink_note {
    background-color:#FFCCFF;
    color:#333;
    border-bottom:1px solid #FF66FF;
    border-left: 10px solid #FF66FF;
    border-right: 1px solid #FF66FF;
    border-top: 1px solid #FF66FF;
    padding:10px;
}

.blue_note {
    background-color:#CCCCFF;
    color:#333;
    border-bottom:1px solid #9999FF;
    border-left: 10px solid #9999FF;
    border-right: 1px solid #9999FF;
    border-top: 1px solid #9999FF;
    padding:10px;
}

トラックバック(0)

このブログ記事を参照しているブログ一覧: デザインを変更する

このブログ記事に対するトラックバックURL: http://hogelab.net/mt4/mt-tb.cgi/311

コメント(6)

いわし :

変える事が出来ました。
で、StyleSheetの中にコメント行を書くにはどうするか知ってますか？

2004年1月26日 23:25

ani :

コメントはね、
/*これでいいのだ*/

2004年1月26日 23:57

shika :

今更って感じかもしれませんが、ここのサイトのURLにあるスタイルシートをコピーして自分のスタイルシートにコピーすると、どうしてもプレビューのようにはならないのですが、どうしてなんでしょう？
よかったら教えてくださいm(_ _)m

2004年7月31日 18:23

ani :

背景に絵を使ってるからかな？
どの辺がうまくいかないのでしょーか？

2004年8月 3日 20:48

ani :

ああ、そうか。
上のスタイルシートを貼ったのね。
これは昔のなのでイメージは違います。

2004年8月 3日 20:50

shika :

MovableTypeのサイトにあるDefault Styleのところに４つくらいサンプルがありますよね？あれってあのどれかをクリックしてそこに出るスタイルシートを自分のところに貼るとOKかと思っていたのですが、張るとテキストや「.syndicate」の部分(?)が全部真ん中によってしまって驚きました。
ちなみに、とりあえずテンプレートを使わずに頑張ってみましたのでひとまずは今のままでOKです。

2004年8月 4日 09:41

コメントする

このページは、aniが2004年1月26日 22:23に書いたブログ記事です。

ひとつ前のブログ記事は「iCompositions.com」です。

次のブログ記事は「夢日記第三夜」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

デザインを変更する

カテゴリ:

トラックバック(0)

コメント(6)

コメントする

このブログ記事について

検索