FFXI FreaQ-Ency -341ページ目

以前行った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編集

・.net XP さんのCSS編集

・とほほのｗｗｗ入門さんのスタイルシート（CSS）

CSS編集をする上で大変参考になりました、ありがとうございました！

カラム変更とCSS編集

記事を眺めていてふと思う。「これ別に３カラムに分けなくてもよくね？」

よくよく見てみれば３カラムに分けるほどサイドに色々配置してあるわけでもないので、

２カラムタイプに変更することにした。ただ、２カラムタイプにスキンを変更すると、

CSS編集で変えたトコロが全部リセットされてしまうようなので、

比較的時間の取れるこの土日でやることにした。

とりあえずCSS全文のバックアップは取っておく。

編集する部分があちこちにわかれていて大変でしたが、

３カラム→２カラムになっても以前と同様な感じのままになってるんではないでしょうか。

多少出来たものを眺めつつ気に入らない部分を変えたところもありますけど。

それにしても、記事部分の幅が広くなったなぁ。

で、また次にスキン変更やCSS編集をしたくなった時のため

メモ書きを残しておく事にする。

ただ、長いので２つに分割。

■ブログTOP部分とカラム部分のすき間の調整
　（どこの事を言ってるのかはスクリーンショット１を参考の事）

/* ----------------------- background-color-control ----------------------- */
body {
background-color: #DFE0E2;
}
#frame {

}
#subFrame {
}
#header {
background-image: url(http://～～);
background-repeat: no-repeat;
background-position: center top;
}
#main {
background-color: #FFFFFF;
padding-top: 15px; /*←ブログTOP部分と記事本文間の上下のすき間の調整はココ*/
}
#sub_main{
}
#firstContentsArea {
}
#subFirstContentsArea {
}

#sub_a,#sub_b {
background-color: #F4F8F8;
padding-top: 15px; /*←ブログTOP部分と両サイドカラム間の上下のすき間の調整はココ*/
}　　　　　　　　　　　/*数字が小さいほど狭く、大きいほど広くなる*/

※参考スクリーンショット１

実際、このSSと比べて狭くなってるでしょ？今のウチのとこ

※同日18時半追記

■タイトルとテーマの行間の設定（「マージン」と「パディング」の設定）
（どこの事を言ってるのかはスクリーンショット２参照）
※「マージン（margin）」と「パディング（padding）」については、
　とほほのｗｗｗ入門さんのスタイルシート（CSS）を参照されたし。
/* ----------------------- MainColumn ----------------------- */
（上文省略）
.entry .theme{
display: block;
margin-bottom: 20px; /*←テーマ下部のすき間の設定はココ*/
padding-top: 5px; /*←テーマ上部のすき間の設定はココ*/
padding-bottom: 5px;
padding-left: 20px;
}
.entry .title{
margin-top: 10px; /*←タイトル上部のすき間の設定はココ*/
margin-bottom: 5px; /*←タイトル下部のすき間の設定はココ*/
padding-left: 12px;
margin-left: 20px;
border-left: 5px solid #4572C1;
}
entry .contents{
margin-top: 15px;
margin-bottom: 15px;
padding-left: 20px;
}
.entry .contents p {
line-height: 1.5; /*←記事本文の行間設定はココ*/
}
（以下省略）