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

kuu♪からのお知らせ

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

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

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

カスタムスキン作成方法・4 [Links編] [最初の一歩]

必要な部分のみ変更してください。 

カスタムスキンの始め方
カスタムスキン作成方法・1 [バナー編] 
カスタムスキン作成方法・2 [背景編]
カスタムスキン作成方法・3 [文字色編]
もご覧ください。


 
【8】記事上下の矢印を変えよう

①上下の画像を好きなものに変えます

/* Links */ 

.previousLink{
padding-left:10px;
background:url(/_common/skins/19/images/arrowL_small.gif) no-repeat left center;
}

.nextLink{
padding-right:10px;
background:url(/_common/skins/19/images/arrowR_small.gif) no-repeat right center;
}

.archive-links{
float:right;
padding-left:9px;
background:url(/_common/skins/19/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
}


sakusei-13.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

sakusei-14.PNG
(クリックで拡大)

soneburo-yajirusi-kuro-hidari.GIF soneburo-yajirusi-kuro-migi.gif soneburo-yajirusi-kuro-ue.GIF に変更しました。

□それぞれの場所に、お好きな画像を入れましょう。
□矢印と文字の隙間は、それぞれ padding で調整してください。
□私の使った矢印画像は【カスタムスキンのためのミニミニ素材】に置いてあります。

[ひとつ前]
.previousLink{
padding-left:10px;
background:url(/_common/skins/19/images/arrowL_small.gif) no-repeat left center;
}

[ひとつ後ろ] 
.nextLink{
padding-right:10px;
background:url(/_common/skins/19/images/arrowR_small.gif) no-repeat right center;
}

[ブログトップ]
.archive-links{
float:right;
padding-left:9px;
background:url(/_common/skins/19/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
}


②”プレビュー”で確認

③OKなら”保存

【参考】
記事上下の矢印画像を変えよう



【9】記事の上部分を変えよう

/* Links */ 
.archive-title{
padding-bottom:5px;
margin-bottom:12px;
background:url(/_common/skins/19/images/dotline.gif) repeat-x left bottom;
color:#cccccc;
}

background:url(/_common/skins/19/images/dotline.gif) repeat-x left bottom;
 を削除すると、前の1件の下の線が消えます。
  *これを消して、自分の好きな画像を入れてもいいでしょう。
   sakusei-15.PNG

color:#cccccc; を変更すると、リンクしない部分の文字の色が変わります。
   sakusei-16.PNG
③以下のタグを挿入すればオリジナルなものができます。
  ご自分でアレンジしてみてください。
  □border:1px solid #FF0000;
  □border-bottom: #FF0000 solid 1px;
  □background: #FF0000;

④数字を変えることによって余白が変わります。
   padding-bottom:5px;
   margin-bottom:12px;



【10】記事の下部分を変えよう

/* Links */ 
.archive-bottom{
color:#cccccc;
}

【9】を参考に自分でアレンジしてみてください。



【11】[ひとつ前・ひとつ後・ブログトップ]の文字リンク色を変えよう

下記タグを挿入すると文字リンク色が変わります。

[ひとつ前]

/* Links */ 
.previousLink a:link   { text-decoration:none; color:#FFA4A4; }
.previousLink a:visited  { text-decoration:none; color:#FFA4A4; }
.previousLink a:active  { text-decoration:none; color:#FFA4A4; }
.previousLink a:hover   { text-decoration:underline; color:#70a000; }

 

[ひとつ後ろ]

/* Links */ 
.nextLink a:link   { text-decoration:none; color:#FFA4A4; }
.nextLink a:visited  { text-decoration:none; color:#FFA4A4; }
.nextLink a:active  { text-decoration:none; color:#FFA4A4; }
.nextLink a:hover   { text-decoration:underline; color:#70a000; }

 

[ブログトップ]

/* Links */ 

.archive-links a:link   { text-decoration:none; color:#FFA4A4; }
.archive-links a:visited  { text-decoration:none; color:#FFA4A4; }
.archive-links a:active  { text-decoration:none; color:#FFA4A4; }
.archive-links a:hover   { text-decoration:underline; color:#70a000; }


nice!(4)  コメント(2) 

nice! ありがとう 4

コメント 2

コメントの受付は締め切りました
薔薇少女

何にもワカリマセンが、常々思う事は
記事によって、それぞれ、記事の内容に
合ったスキンが、選べないかなぁと、思います!
仮想の額縁の様なものだから、印刷しても
スキンは反映されないし、無理な事なんでしょうね。
自分で自分のブログをその時のスキンのまま
印刷して、残しておきたいのですが
可能なのでしょうか?
自分の言いたい事が上手く表現出来ません!
変な事書いてスミマセン!

by 薔薇少女 (2008-12-18 18:54) 

kuu

★薔薇少女さん

記事によって変えることは不可能ではないと思います。
ただ、ものすごくややこしいからお奨めはできません。

私はやったことがないからわからないのですが印刷するとスキンは出ないのでしょうか?
出るような気もしますけど^^
by kuu (2008-12-19 08:08) 

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

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

  

         

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

×

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