Top

usa*log 晴れ。ときどき、うさぎ王国

ブログスキンをいじってみたよ。

しばらく替えてなかったので、ちょっとピンク色に♡

勝手に触っていいところと、変えられないところ、いろいろあって面倒ではありますが、勉強になりますね。
border-radius使えるのかな?と思って試したみたらイケました!

(エキサイト提供スキン 2列のロマンフラワー)というのを元にしています。

DIV#LEFT {
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 25PX;
PADDING : 15PX;
BACKGROUND : #FFFFFF; 
BORDER : 2PX #f780bb SOLID; ←好みで色とか太さとか
TEXT-ALIGN : LEFT;

-webkit-border-radius: 12px; ←足すのはここから
-moz-border-radius: 12px; ←この数値で角丸サイズが決まる
border-radius: 12px;
}

DIV.PROFILE {
WIDTH : 190PX;
BACKGROUND : #ffffff;
BORDER-top : 2PX #f780bb SOLID;
BORDER-LEFT : 2PX #f780bb SOLID;
BORDER-RIGHT : 2PX #f780bb SOLID;
BORDER-BOTTOM : 2PX #f780bb SOLID;
LINE-HEIGHT : 140%;
MARGIN-BOTTOM : 20PX;
PADDING-BOTTOM : 6PX;

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

DIV.MN {
WIDTH : 190PX;
BACKGROUND : #ffffff;
BORDER-TOP : 2PX #f780bb SOLID;
BORDER-LEFT : 2PX #f780bb SOLID;
BORDER-RIGHT : 2PX #f780bb SOLID;
BORDER-BOTTOM : 2PX #f780bb SOLID;
LINE-HEIGHT : 150%;
MARGIN : 20PX 0PX;
PADDING-BOTTOM : 30PX;

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

これだとプロフィールのてっぺんの画像が残ってしまうので消します。すると段違いになってしまうので、後に空の透過gif(png)を入れて強制的に処理しています。

DIV.PROFILE_HEAD {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/画像フォルダ/spacer.gif); ←空のgifを作ってアップロード
WIDTH : 192PX;
HEIGHT : 15PX; 
}

書き換えること自体よりも、どの行がなんなのか...探すのが一番面倒だったり(いやいや、wordpressに比べれば少ない行数w)。トップページをダウンロードして手元のエディタで開きつつ、ひとついじってはプレビューという...HTMLのhead部分に書き出されてる部分が自分用CSSなので、ダイレクトに編集するよりはずっと安全です。他のデータは絶対パスになってるから勝手に読み込みに行ってくれるので。

可愛いスキン探しちゃった方がぜったい速い(笑)これはもう職業的修行みたいなもんですね。

それとタイトルの頭につく飾り(?)がいつの間にか画像データを消してしまったらしく、無地になっていたのを復活させました。

h2.POST_TTL {
FONT-SIZE : small; 
margin : 0;
       BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/任意の画像をアップロード);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING : 0PX 0PX 0PX 20PX;   ←画像サイズによって変動
}

やっぱ、こういうのどこかにまとめておきたいな。


それと、次はスマホ用スキンのカスタマイズも望んじゃいます。種類まだまだ少ないし、レイアウトはいじれなくていいから、カラー、背景、ボタンくらいは作ってみたいですよね。
[PR]
by usa-log | 2013-02-04 01:36 | うさぎ王国 | Comments(0)
<< ちょっと大きめの背景画像を付け... うさぎ王国/2月のうさぎカレンダー >>