So-net無料ブログ作成
検索選択
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

記事タイトルに小さな画像を入れてみよう [記事]

【記事タイトルに小さな画像を入れてみよう】

スタンダード1〕と〔スタンダード2〕でやり方が違います。
ここでは書き込む順番が大切です。
タグを書き込む順番に気をつけましょう。

変える部分を  で書いています。


 

/* Articles */ とあります。
〔スタンダード1〕の場合

.articles-title {
margin:0 0 15px 0;
padding:3px 10px;
background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif) no-repeat left center;
background-color:#BBC6FE;
background:#003366;
font-size:small;
color:#ffffff;
}


padding:3px 10px;の数字を変えましょう
3pxの方が上下の幅 10pxの方が左からの幅です。
左からの幅を広げて画像を入れる隙間を作りましょう

background:url(/blog/_images/blog/_▲▲▲/*****/1234567.gif) no-repeat left center;
こんな風なタグを入れます。
入れたい画像をアップロードしてクリックすると 
background:url(/blog/_images/blog/_***/*****/1234567.gif) no-repeat; こう入ります。
それに、 left centerを書き加えます。
leftは画像を左に入れるという意味(右に入れたいときは right)
centerは上下の真ん中に画像を入れるという意味

background-color:#BBC6FE; と書き換えます。
最初の状態では background:#BBC6FE; となってるはずですが、これではCSSの反応がありません。




〔スタンダード2〕の場合

.articles-title {
margin:0 0 15px 0;
padding-bottom:5px;
padding-left:20px;
background:url(/blog/_images/blog/_bc9/dayan/6533121.gif) no-repeat left center;
background-color:#BBC6FE;
border-bottom:1px solid #cccccc;
font-size:small;
}


padding-left:20px;
 を付け加えます。
あとは上記②③を付け加えましょう。


nice!(10)  コメント(4) 
共通テーマ:blog

nice! ありがとう 10

コメント 4

コメントの受付は締め切りました
□はる□

こんばんわ。またまたすみません。あの・・kuuさんの記事の一番上に、記事の訂正が一応終了しました。と書いてありますよね。それみたいにお知らせなどを載せたいんですがやり方教えてくれますか?お願いします。
by □はる□ (2008-11-05 18:36) 

kuu

★□はる□さん

http://simu.blog.so-net.ne.jp/2008-04-16

ここをご覧ください[ニコッ]
by kuu (2008-11-06 11:19) 

みけ

はじめまして^^
スキンをいじってみたくてたどりつきました♪
記事タイトル&サイドバータイトルに小さい画像入れることができました。
とっても分かりやすく書いていただいてうまくできてとっても嬉しいです。
またちょこちょこ変えたいので今後も参考にさせていただくと思います。
ありがとうございました^^
by みけ (2008-11-26 22:31) 

kuu♪

★みけさん

かわいらしいスキンができてますね♪
これからも素敵なスキンを作ってくださいね。

by kuu♪ (2008-12-01 14:41) 

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。