kuu♪からのお知らせ

長年公開してきたカスタムスキンへの道ですが、
新しいサイト　Harbot's field内の「ssブログ（so-netブログ）のカスタマイズ方法」　へ引っ越しをします。

徐々に時間をかけて引っ越す予定で、今よりも見やすいサイトに変更しています。

今後ともよろしくお願いいたします。

カスタムスキン作成方法・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; } （クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

（クリックで拡大）

　　　に変更しました。

□それぞれの場所に、お好きな画像を入れましょう。
□矢印と文字の隙間は、それぞれ　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;
}


②”プレビュー”で確認

③ＯＫなら”保存”

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

---

【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件の下の線が消えます。
　　＊これを消して、自分の好きな画像を入れてもいいでしょう。
　　　

②color:#cccccc;　を変更すると、リンクしない部分の文字の色が変わります。
　　　
③以下のタグを挿入すればオリジナルなものができます。
　　ご自分でアレンジしてみてください。
　　□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; }

タグ：ソネブロ ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ links 記事上下の矢印

コメント 2

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

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

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

★薔薇少女さん

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

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

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

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