ブログ記事本文部分の修正 | 「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい!」そんな方の思いにも答えられるサイトを目指しています

テーマタイトルそのまま。記録のページです。

いくつかスタイルを追加・修正しているので、忘れないうちに登録。CSS修正前(変身前)の画像と、修正部分のCSSソースコードを貼りつけてゆきます。日付の近い記事と連動していることになります。

修正前の部分キャプチャー画像

CSS修正前のブログ部分キャプチャー111220

修正部分のソースコード


/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*


 (4) その他、拡張


*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/

div.skinArticleHeader2  h1 {
 letter-spacing: 0.2em;
}

/* ■■■■■■■■■ブログ本文の設定■■■■■■■■ */

/* general */
div.articleText { /* 文字のフォントを等幅に。元の設定は1.4の行間を少し広く。 */
 font-family:Verdana,Arial,Helvetica,Geneva,'MS Gothic',"MS ゴシック","MS UI Gothic","Osaka-等幅","ヒラギノ角ゴ Pro W3",monospace,sans-serif;
 line-height: 160%;
}
div.articleText p {
 margin-bottom:10px;
}

/* heading(見出し文字) */
div.articleText h2 { /* エントリータイトルに次ぐ見出し */
 padding: 4px 5px 2px 5px; 
 background: #f7f7f7;
 border: 1px dashed #e4e4e4;
 font-size: 1.2em; /* 標準の文字の大きさの1.2倍にする */
}

/* emphasis(強調文字) */
div.articleText strong { /* 文字強調。emより重要度大 */
 color: #ff3333;
 font-size: 1.2em;
 font-weight: bold;
}
div.articleText em { /* 文字強調 */
 border-bottom: 1px dotted #ff99cc;
 font-style: normal;
 color: #f62290;
}

/* list(リスト) */
div.articleText dl { /* 定義付きリストブロック */
}
div.articleText dt { /* リストの項目 */
 border-top: 1px dotted #e4e4e4;
 border-bottom: 1px dotted #e4e4e4;
 font-weight: bold;
}
div.articleText dd { /* 項目の説明 */
 padding-bottom: 10px;
 color: #666666;
}

/* text(その他の文字) */
div.articleText code { /* キーボードから入力された内容 */
 padding: 0 2px;
 color: #45519d;
}
div.articleText pre { /* スペースや改行など入力した通りに表示する */
 margin: 0 0 10px 0;
 padding: 10px;
 background: #45519d;
 color: #fff;
}

div.articleText pre code { /* キーボードから入力された内容 */
 padding: 0;
 color: #fff;
}
div.articleText kbd { /* キーボードから入力された内容 */
 padding: 0 2px;
 background: #000000;
 color: #ffffff;
}
div.articleText kbd:before { /* キーボードから入力された内容 */
 content: "[";
}
div.articleText kbd:after { /* キーボードから入力された内容 */
 content: "]";
}
div.articleText .note {
 font-size: 90%;
 color: #7f7f7f;
}
div.articleText .note:before {
 content: "※ ";
}
div.articleText div.free_column {
 margin: 0 0 10px 0;
 padding: 5px 10px;
 border: 1px solid # 666666;
 background: #dbf8ff;
}
div.articleText div.free_column a {
 overflow: visible;
 padding-left: 40px;
 background: url('http://stat001.ameba.jp/user_images/20111221/15/jalan2-net/b9/eb/g/t00290017_0029001711684528893.gif') left bottom no-repeat;
 font-size: 120%
}

デザインさていないプレーンな状態からの調整。エントリータイトルが弱く見えるようになってきたので、次はその微調整ですかね。ヘッダー含めてデザインを考える際には、全体的に手を入れることになると思います。