amebaブログを改造したい。

質問

僕はブログにamebaを使っています。

それで最近BLOGの投稿などには慣れてきたので
スキンを弄ろうと思っています。

そこで質問です。

現在使っているスキンはスタンダードのグレイなのですが
このスキンで一つ一つの記事を罫線で囲むには
CSSをどう弄ればよいのでしょうか?

また、現在の状態では投稿日時が灰色に囲まれて
目立っているのですがそこを記事のタイトルにするには
どうすれば良いのでしょうか?

最後にそのタイトル部分の頭の部分にアイコンを付けるには
どうすれば良いのでしょうか?

教えてください。

回答No.2

Muller3 · ベストアンサー

＞罫線
widthの数値を調整し、.entryに以下を追加
border:*px 罫線のスタイル 色;（例　border:1px solid #000000;）
padding:*px;

＞記事のタイトル
.entry .dateが日付部分のデザイン記述。ここから以下削除
width:99%;
background-color:#F5F5F5;
padding:5px 0 2px 5px;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
display:block;

.titleがタイトル部分。以下追加
width:**%;　←適当に調整
background-color:#F5F5F5;
padding:5px 0 2px 5px;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
（できなかったら".entry"部分を".entry .title"に書き換え）

＞アイコン
タイトルの頭の右を空け、背景として画像を入れる。
.title部分の「padding:5px 0 2px 5px;」の一番右の数値が、タイトル左の空きを示す。今5pxなので、この数値を画像の幅に合わせて変える。
画像は以下のような感じで指定。
background-image: url("画像URL");
background-repeat: no-repeat;
background-position: left center;

カスタマイズするのでしたら、HTMLの構造・CSSの書き方の基本を覚える必要があります。「;」一つ抜けても、スペルが一つ違っても、変なところにスペースが入るだけでも思った表示ができません。
また、borderを使う場合、ブラウザによって解釈の違いが起こる（IE6にバグがある）ので、まずFirefoxを使ってカスタマイズを行い、最終的にIE6でもおかしくないように調整を行う必要があります。

回答No.1

noname#58628

アメブロスキンをカスタマイズ！CSS編集

http://ameblo.jp/about4u/