Pelogoo! ブログの使用方法　　スタイルシート編集

スタイルシート編集

ここではスタイルシートを使って自由にブログのデザインを編集したい方の為に簡単にスタイルシートを紹介します。
紹介するのはスタイルシートのほんの一部です。
いろいろと変更をしてみたい方は専門の書籍やWebサイトでスタイルシートの知識を得ることをお勧めします。

※スタイルシート編集は上級者向けの機能です。サポートも対象外となりますのであらかじめご了承いただきますようお願い申しあげます。
サポートにご質問をいただいてもご返答することはできません。

※スタイルシートを変更するとデザインがくずれる場合がありますので編集にはご注意ください。
また、デザインが崩れたり、表示されなくなったりした場合はリセットボタンを押し、保存をして再構成することで初期状態に戻すことが可能です。

スタイルシート変更前

下の画像がスタイルシートを変更する前の初期状態のデザインです。

---------------------------------------------------------------------------------------------------------------
下記の文字列が初期状態のスタイルシートです。これらを変更することによって色などを変える事ができます。

body {
background-color:#FFFFFF;
color:#000000;
font-family: Osaka,Verdana,"ＭＳＰゴシック",Arial,Helvetica,sans-serif;
font-size: 12px;
}
td,tr,p,ol,ul {
font-size: 12px;
color:#000000;
}
a:link {
color: #666666;
text-decoration: none;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover,a:active{
color: #FF0000;
text-decoration: none;
background: none;
}
form {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
}
input {
font-size:12px;
}
textarea {
font-size:12px;
}
blockquote {
border-bottom:#CCCC99 1px solid;
border-top: #CCCC99 1px solid;
border-right: #CCCC99 6px solid;
border-left: #CCCC99 1px solid;
padding:1em;
}
.richtextbox p {
margin:0px;
}
.title {
font-size: 25px;
font-weight: bolder;
color: #000000;
margin: 60px 0px 0px 20px;
}
.title a:link {
color: #666666;
text-decoration: none;
}
.title a:visited {
color: #666666;
}
.title a:hover,a:active{
color: #FF0000;
text-decoration: underline;
background: none;
}
.subtitle {
font-size: 13px;
color:#666666;
font-weight: bold;
font-size: 12px;
margin: 5px 0px 0px 20px;
}
.frame {
background-color: #FFFFFF;
}
.frame_left{
background-color: #FFFFFF;
border-right: #CCCCCC 2px solid;
}
.frame_right{
background-color: #FFFFFF;
border-left: #CCCCCC 2px solid;
}
.head {
background-color:#CCCCCC;
background-image: url("../_img/head.jpg");
height:120px;
}
.sidemenu_left {
margin: 0px 0px 0px 0px;
width:180px;
}
.sidemenu_right {
margin: 0px 0px 0px 0px;
width:180px;
}
.contents_left {
margin: 0px 0px 0px 0px;
width:480px;
}
.contents_right {
margin: 0px 0px 0px 0px;
width:480px;
}
.main {
}
div.sidemenu_caption {
background-color:#CCCCCC;
color: #000000;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
margin: 15px 0px 5px 0px;
padding: 4px 0px 4px 5px;
text-align:left;
}
div.sidemenu_caption_bg {
}
div.sidemenu_body {
color: #000000;
font-size: 9px;
font-weight: bold;
line-height: 160%;
letter-spacing: 1px;
margin: 0px 0px 0px 0px;
padding: 0px 5px 0px 5px;
text-align:left;
}

div.calendar_caption {
background-color:#CCCCCC;
color: #000000;
font-size: 12px;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px 0px 5px 0px;
text-align:center;
}
div.calendar_caption_bg {
}
table.calendar {
border-collapse: collapse;
}
div.calender_bg {
}
td.calender_head_bg {
border:1px solid #CCCCCC;
background-color:#FFFFFF;
padding: 3px 0px 3px 0px;
}
td.calender_body_bg {
border:1px solid #CCCCCC;
background-color:#FFFFFF;
padding: 5px 0px 5px 0px;
}
td.calender_body_bg_mark {
border:1px solid #CCCCCC;
background-color:#EFEFEF;
padding: 5px 0px 5px 0px;
}
.calender_weekday {
color:#333333;
font-size: 10px;
}
.calender_saturday {
color:#3366CC;
font-size: 10px;
}
.calender_sunday {
color:#FF6600;
font-size: 10px;
}
.calender_day_mark {
}
.date {
border-collapse:collapse;
}
div.date_caption {
color:#666666;
font-size: 12px;
font-weight: bold;
margin: 2px 0px 3px 0px;
}
.article {
border-collapse:collapse;
margin: 0px 0px 10px 0px;
}
td.article_head {
background-color: #EFEFEF;
border-top: #CCCCCC 1px solid;
border-bottom: #CCCCCC 1px dotted;
border-left: #CCCCCC 1px solid;
border-right: #CCCCCC 1px solid;
padding: 4px 3px 4px 3px;
}
td.article_body {
border-left: #CCCCCC 1px solid;
border-right: #CCCCCC 1px solid;
padding: 2px 4px 0px 4px;
}
td.article_foot {
border-left: #CCCCCC 1px solid;
border-right: #CCCCCC 1px solid;
border-bottom: #CCCCCC 1px solid;
padding: 2px 6px 3px 0px;
}
div.article_subject {
color: #000000;
font-size: 16px;
font-weight: bold;
}
div.article_text {
font-size: 12px;
color:#000000;
}
div.article_date {
color:#000000;
font-size: 10px;
}
.restb {
border-collapse:collapse;
margin: 1px 0px 2px 0px;
}
td.restb_head {
border-left: #CCCCCC 8px solid;
border-right: #CCCCCC 1px solid;
border-top: #CCCCCC 1px solid;
padding: 2px 0px 0px 4px;
}
td.restb_body {
border-left: #CCCCCC 8px solid;
border-right: #CCCCCC 1px solid;
padding: 0px 0px 0px 4px;
}
td.restb_foot {
border-left: #CCCCCC 8px solid;
border-right: #CCCCCC 1px solid;
border-bottom: #CCCCCC 1px solid;
padding: 0px 4px 2px 4px;
}
div.restb_subject {
color:#000000;
font-size: 11px;
font-weight: bold;
}
div.restb_text {
font-size: 11px;
color:#000000;
}
div.restb_date {
color:#000000;
font-size: 10px;
}

スタイルシート変更後・色の設定について

簡単にスタイルシートを変更してみました。ここでは色のみを変更しています。
下記に紹介するスタイルシートを参考にしてどこを変更するとどのように変化するのか確認してください。

---------------------------------------------------------------------------------------------------------------
赤字の箇所が今回変更した所です。
青字の箇所は今回変更はしませんでしたが色を指定することによってデザインに反映される箇所です

スタイルシート

説明

body {
background-color:#FFCC99;
color:#000000;
font-family: Osaka, Verdana, "ＭＳＰゴシック", Arial, Helvetica, sans-serif;
font-size: 12px;
}

background-color:#FFCC99;

#FFCC99

ブログの背景色（background-color）を設定します
#FFCC99（#の後の6桁の数字は色によって変わります）は色を意味しています。

参考用に色の一部を掲載します。

黒 #000000	灰色 #999999	薄灰色 #CCCCCC
ピンク #FF00FF	赤 #FF0000	オレンジ #FF9900
茶色 #990000	オリーブ #999900	緑 #009900
青 #0000FF	白 #FFFFFF

td,tr,p,ol,ul { font-size: 12px;
color:#990033;
}

bacolor:#990033;

#990033

文字の色（color）を設定します

a:link {
color: #666666;
text-decoration: none;
}

全体の未訪問のリンク色の設定です

a:visited {
color: #666666;
text-decoration: none;
}

全体の訪問済みのリンク色の設定です

a:hover,a:active{
color: #FF0000;
text-decoration: none;
background: none;
}

カーソルが上に乗っている状態の時のリンク色です

form {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
}

input {
font-size:12px;
}

textarea {
font-size:12px;
}

blockquote {
border-bottom:#CCCC99 1px solid;
border-top: #CCCC99 1px solid;
border-right: #CCCC99 6px solid;
border-left: #CCCC99 1px solid;
padding:1em;
}

<BLOCKQUOTE>タグを使用した際の囲み線の設定です

.richtextbox p {
margin:0px;
}

.title {
font-size: 25px;
font-weight: bolder;
color: #000000;
margin: 60px 0px 0px 20px;
}

ブログタイトルの設定をします。

.title a:link {
color: #666666;
text-decoration: none;
}

ブログタイトルの未訪問のリンク色の設定をします。

.title a:visited {
color: #666666;
}

.title a:hover,a:active{
color: #FF0000;
text-decoration: underline;
background: none;
}

.subtitle {
font-size: 13px;
color:#666666;
font-weight: bold;
font-size: 12px;
margin: 5px 0px 0px 20px;
}

.frame {
background-color: #FFFFFF;
}

.frame_left{
background-color: #0033CC;
border-right: #CCCCCC 2px solid;
}

background-color: #0033CC;

#0033CC

背景色（background-color）を設定します

.frame_right{
background-color: #6633CC;
border-left: #CCCCCC 2px solid;
}

background-color: #6633CC;

#6633CC

背景色（background-color）を設定します

.head {
background-color:#FF9933;
background-image: url(../_img/head.jpg);
height:120px;
}

background-color:#FF9933;

#FF9933

背景色（background-color）を設定します

.sidemenu_left {
margin: 0px 0px 0px 0px;
width:180px;
}

.sidemenu_right {
margin: 0px 0px 0px 0px;
width:180px;
}

.contents_left {
margin: 0px 0px 0px 0px;
width:480px;
}

.contents_right {
margin: 0px 0px 0px 0px;
width:480px;
}

.main {
}

div.sidemenu_caption {
background-color:#66CC99;
color: #CC33CC;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
margin: 15px 0px 5px 0px;
padding: 4px 0px 4px 5px;
text-align:left;
}

background-color:#66CC99;

#66CC99

背景色（background-color）を設定します

color: #CC33CC;

#CC33CC

文字の色（color）を設定します

div.sidemenu_caption_bg {
}

div.sidemenu_body {
color: #000000;
font-size: 9px;
font-weight: bold;
line-height: 160%;
letter-spacing: 1px;
margin: 0px 0px 0px 0px;
padding: 0px 5px 0px 5px;
text-align:left;
}

div.calendar_caption {
color: #33CC00;
font-size: 12px;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px 0px 5px 0px;
text-align:center;
background-color: #339999;
}

color: #33CC00;

#33CC00

文字の色（color）を設定します

background-color: #339999;

#339999

背景色（background-color）を設定します

div.calendar_caption_bg {
}

table.calendar {
border-collapse: collapse;
}

div.calender_bg {
}

td.calender_head_bg {
border:1px solid #CCCCCC;
background-color:#FFCC00;
padding: 3px 0px 3px 0px;
}

background-color:#FFCC00;

#FFCC00

背景色（background-color）を設定します

td.calender_body_bg {
border:1px solid #CCCCCC;
background-color:#FFFFFF;
padding: 5px 0px 5px 0px;
}

td.calender_body_bg_mark {
border:1px solid #CCCCCC;
background-color:#99CC99;
padding: 5px 0px 5px 0px;
}

background-color:#99CC99;

#99CC99

背景色（background-color）を設定します

.calender_weekday {
color:#333333;
font-size: 10px;
}

.calender_saturday {
color:#3366CC;
font-size: 10px;
}

.calender_sunday {
color:#FF6600;
font-size: 10px;
}

.calender_day_mark {
}

.date {
border-collapse:collapse;
}

div.date_caption {
color:#339999;
font-size: 12px;
font-weight: bold;
margin: 2px 0px 3px 0px;
}

color:#339999;

#339999

文字の色（color）を設定します
上の全体画像では表示されていませんが記事の日時の設定になります。

.article {
border-collapse:collapse;
margin: 0px 0px 10px 0px;
}

td.article_head {
background-color: #9999CC;
border-top: 1px solid #CC6633;
border-bottom: 1px dotted #CC6633;
border-left: 1px solid #CC6633;
border-right: 1px solid #CC6633;
padding: 4px 3px 4px 3px;
}

background-color: #9999CC;

#9999CC

背景色（background-color）を設定します

border-top: 1px solid #CC6633;

#CC6633

border-bottom: 1px dotted #CC6633;

#CC6633

border-left: 1px solid #CC6633;

#CC6633

border-right: 1px solid #CC6633;

#CC6633

線の色、太さ、線種を指定できます。
上部の線（border-top）
下部の線（border-bottom）
左側の線（border-left）
右側の線（border-right）
線の太さ（1px）
実線（solid）
点線（dotted）

td.article_body {
border-left: 1px solid #CC6633;
border-right: 1px solid #CC6633;
padding: 2px 4px 0px 4px;
}

border-left: 1px solid #CC6633;

#CC6633

border-right: 1px solid #CC6633;

#CC6633

線の色、太さ、線種を指定できます。
左側の線（border-left）
右側の線（border-right）
線の太さ（1px）
実線（solid）
点線（dotted）

td.article_foot {
border-left: 1px solid #CC6633;
border-right: 1px solid #CC6633;
border-bottom: 1px solid #CC6633;
padding: 2px 6px 3px 0px;
}

border-left: 1px solid #CC6633;

#CC6633

border-right: 1px solid #CC6633;

#CC6633

border-bottom: 1px solid #CC6633;

#CC6633

線の色、太さ、線種を指定できます。
下部の線（border-bottom）
左側の線（border-left）
右側の線（border-right）
線の太さ（1px）
実線（solid）
点線（dotted）

div.article_subject {
color: #993300;
font-size: 16px;
font-weight: bold;
}

color: #993300;

#993300

文字の色（color）を設定します

div.article_text {
font-size: 12px;
color:#999933;
}

color:#999933;

#999933

文字の色（color）を設定します

div.article_date {
color:#000000;
font-size: 10px;
}

.restb {
border-collapse:collapse;
margin: 1px 0px 2px 0px;
}

td.restb_head {
border-left: 8px solid #FFCC00;
border-right: 1px solid #FFCC00;
border-top: 1px solid #FFCC00;
padding: 2px 0px 0px 4px;
}

border-left: 8px solid #FFCC00;

#FFCC00

border-right: 1px solid #FFCC00;

#FFCC00

border-top: 1px solid #FFCC00;

#FFCC00

線の色、太さ、線種を指定できます。
上部の線（border-top）
左側の線（border-left）
右側の線（border-right）
線の太さ（1px）
実線（solid）
点線（dotted）

td.restb_body {
border-left: 8px solid #FFCC00;
border-right: 1px solid #FFCC00;
padding: 0px 0px 0px 4px;
}

border-left: 8px solid #FFCC00;

#FFCC00

border-right: 1px solid #FFCC00;

#FFCC00

線の色、太さ、線種を指定できます。
左側の線（border-left）
右側の線（border-right）
線の太さ（1px）
実線（solid）
点線（dotted）

td.restb_foot {
border-left: 8px solid #FFCC00;
border-right: 1px solid #FFCC00;
border-bottom: 1px solid #FFCC00;
padding: 0px 4px 2px 4px;
}

border-left: 8px solid #FFCC00;

#FFCC00

border-right: 1px solid #FFCC00;

#FFCC00

border-bottom: 1px solid #FFCC00;

#FFCC00

div.restb_subject {
color:#000000;
font-size: 11px;
font-weight: bold;
}

div.restb_text {
font-size: 11px;
color:#000000;
}

div.restb_date {
color:#000000;
font-size: 10px;
}

使用方法TOP	1 ブログの設定	2 パスワードの設定	3 記事の新規登録	4 記事の修正と削除	5 コメントのある記事一覧	6 トラックバックのある記事一覧	7 ファイルのアップロード	8 カテゴリ登録
9 リンク管理	10 オリジナルデザイン設定	11 デザインの設定	12 登録情報の設定	13 プロフィールの設定	14 マイフォトアルバム	15 マイムービーアルバム	16 携帯電話からの投稿設定	17 ブログの再構成