CSS編集メモ書き
関連記事:「カラム変更とCSS編集 」 「行間設定 」
以前行ったCSS編集部分も含め(どこをどう弄ったのかメモ書きを残してなかったので)、
おさらいの意味も兼ねて以下全部まとめていっちゃいます。
注意:CSS編集前には必ずCSS全文のバックアップを取りましょう。
・ブログタイトル文字の色・大きさ・位置の変更
・サブタイトル文字の色・大きさ・位置の変更
・ブログタイトル部分背景の大きさ変更
・記事タイトルと本文の文字色変更
・記事の日付の大きさと文字色の変更
・両サイドのカラムの文字の色・大きさの変更
デザインの変更 → CSS編集 を開き、下記の部分を変更する。
※スキンによっては変わらないので注意
(実際今ウチのとこで使ってるスキンだと変わらない…)
/* ----------------------- header ----------------------- */
#header{
display: block;
width: 804px; /*←ブログ名のあるトップ部分の幅を調節 ※上記注*/
height: 80px; /*←ブログ名のあるトップ部分の高さを調節*/
} /*(数字が大きいほど広く、小さいほど狭くなる)*/
#header h1,
#header h2 {
padding: 0px;
margin: 0px;
}
#header h1 {
padding-top: 20px; /*←ブログ名の上下位置の変更はココ*/
margin-left: 26px; /*(数字が大きいほど位置が下がる)*/
margin-right: 26px;
margin-bottom: 5px;
text-align: center; /*←ブログ名の位置調節はココ*/
} /*(右よせはright 中央配置はcenter 左よせはleft)*/
#header h2{
margin-left: 26px;
margin-right: 26px;
text-align: center; /*←サブタイトルの位置調節はココ
} /*(右よせはright 中央配置はcenter 左よせはleft)*/
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body {
color: #000000; /*←記事本文の色変更はココ*/
font-size: 11px;
}
#header h1 {
font-size: 20px; /*←ブログ名の大きさ変更はココ(数字が大きい程文字が大きくなる)*/
font-weight: normal;
line-height: 1;
}
#header h1 a {
color: #EC6A00; /*←ブログ名の色変更はココ*/
}
#header h2 {
color: #000000; /*←サブタイトルの色変更はココ*/
font-size: 13px; /*←サブタイトルの大きさ変更はココ*/
font-weight: normal;
}
.menu_title {
font-size:12px;
font-weight: bold;
}
.mainMenu {
font-size: 10px; /*←両サイドカラムの文字の大きさ変更はココ*/
line-height: 1.7;
}
#reader dd {
}
#reader p.contents {
font-size: 12px;
}
#calendar table {
color: #000000; /*←カレンダーの数字の色変更はココ*/
font-size:11px;
line-height:1.3;
}
#calendar table a {
}
(中間省略)
}
.entry .date {
color: #3F4880; /*←記事の日付部分の色変更はココ*/
font-size: 12px;/*←記事の日付部分の大きさ変更はココ*/
font-weight: bold;
letter-spacing: 0.2em;
}
.entry .name {
color: #192653;
font-size:10px;
}
.entry .contents,
#message .contents{
font-size: 10px;
line-height: 1.5; /*←メッセージボードの行間設定はココ*/
}
.entry .theme{
color: #192653;
font-size:10px;
}
.entry .title{
color: #000080; /*←記事タイトルの色変更はココ*/
font-size:14px; /*←記事タイトルの大きさ変更はココ*/
font-weight:bold;
}
(以下省略)
◆参考ブログ様と記事 またはwebサイト様
・ちょいギャグおやじ さんの「ぷちテク」CSS編集
CSS編集をする上で大変参考になりました、ありがとうございました!