2006'05.24.Wed

スクロールバーの色

スクロールバーに色をつけたいというかたがいらっしゃったので。
スクロールバーに色をつけたい場合は下のスタイルシートを追加してくださいませ。
body {
scrollbar-face-color:#fff; /*-- 全体 --*/
scrollbar-track-color:#ccc; /*-- バーのレール--*/
scrollbar-highlight-color:#fff; /*-- ハイライト --*/
scrollbar-shadow-color:#fff; /*-- シャドウ --*/
scrollbar-3dlight-color:#fff; /*-- 外ハイライト --*/
scrollbar-darkshadow-color:#fff; /*-- 外シャドウ --*/
scrollbar-arrow-color:#ccc; /*-- 上下矢印 --*/
}
色は適当なんでかえてください(・ω・

このスタイルシートはIE、IEのコンポーネントを使用したブラウザ以外では適応されません。
…Firefoxは………。・゚・(ノ∀`)・゚・。
(だからデフォでは入れてないんです…orz)
ブログカスタマイズトラックバック(0)  コメント(0) 
2006'05.23.Tue

アマゾン用CSS追加しました。

アマゾン用CSSを現在公開してるテンプレート全部に追加しました。
登録中テンプレート全部修正更新済みです。
(dot_combination用は一つ下のエントリーを参照してください。)
以下のスタイルシートをそれぞれコピー&ペーストで追加するか、新しくテンプレートをダウンロードしなおして下さいませ。
アマゾンに飾りなどいらぬのだ!と言う方はなにもしなくてもそのまま使えます。
質素なスタイルシートになってるので、ゴージャスに変更してくださってもかまいません〜色々やってみてください
ちなみにウチのテンプレート以外でも使えます。

parent_and_child用


shootingstar用

※注:同じくランキング用のタグは趣味で入れてません(・ω・`
マイリストから選んだ商品にのみ装飾がつきます。
ブログカスタマイズトラックバック(0)  コメント(0) 
Tag: カスタマイズ 
2006'05.22.Mon

dot_combinationにCSS追加しました

配布テンプレート【tmp_dot_combination】にアマゾンアソシエイトサイドバー用のスタイルシートを追加しました。
以下のスタイルシートを追加するか、新しくダウンロードしなおして下さいませ。
表示にちょっと飾りと枠がつく程度なので、飾りなどいらぬ!と言う方はそのままで
.plugin-catamazon {
text-align: center;
font-size:10px;
padding: 0;
margin : 0 0 5px 0;
border: 1px solid #eee;
background-color: #fff;
background-image: url(http://blog58.fc2.com/tmpblog/file/6_enbody.gif);
}
.plugin-catamazon a {
font-weight : bold;
}
.plugin-catamazon img {
border: none;
margin : 3px 0 0 0;
}
.plugin-newamazon {
text-align: center;
font-size:10px;
padding: 0;
margin : 0 0 5px 0;
border: 1px solid #eee;
background-color: #fff;
background-image: url(http://blog58.fc2.com/tmpblog/file/6_enbody.gif);
}
.plugin-newamazon a {
font-weight : bold;
}
.plugin-newamazon img {
border: none;
margin : 3px 0 0 0;
}
スタイルシートの追加は最下部にしてありますので、ダウンロードしたテンプレートがCSS入りのものかわからない方はスタイルシートの設定の最下部をご確認下さい。
入ってるやつは思いっきり「アマゾン」と書いてあります(笑)

あと2つ配布してるテンプレート用のも素材ができたら更新します〜。(タブン!)
↑のでも使えます。

※注:ランキング用のタグは趣味で入れてません(・ω・`
マイリストから選んだ商品にのみ装飾がつきます。
ブログカスタマイズトラックバック(0)  コメント(0) 
2006'05.17.Wed

画像の回りこみタグ

すっかり書くのを忘れてたのですが…【parent_and_child】以降にはスタイルシートに以下のものが入っていたりします。
img.left {
float:left;
clear:left;
margin:5px 10px 5px 0px;
padding:0px;
border: none;
}
これは画像の回りこみをして記事を書きたい場合に使用できるように入れた回りこみ用のタグです。(使用しない場合は削除しちゃってもOKです)
※回り込みとは、1個下(↓)の記事のように画像の横に文字が並ぶような設定のことです。このタグでは画像の右横に文字がくるようになってます。

画像と長い文章を組み合わせたりするのに相性がよいと思うのですが、使いたくないという方も多そうなので、普通に画像を記事に入れた場合は回り込みはしないようにしてあります。

回り込みをさせたい場合は、通常記事に挿入される画像のタグに
「left」というクラスを設定して頂ければ、クラスを設定された画像のみ回り込みをします。

【やりかた】
記事に画像を使うと通常挿入されるタグに
<a href="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" target="_blank"><img src="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" alt="" border="0"></a><br clear="all">

<a href="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" target="_blank"><img src="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" alt="" border="0" class="left"></a><br clear="all">
赤い文字の部分を追加するダケです。

その際重要なのが <br clear="all"> このタグが回り込みをしたい文章の一番下にくるように記事を書くと、画像の縦の長さより短く文章が終わっても、<br clear="all">以降の文章は回り込みが解除された状態(画像の下から)で表示されるようになります。

<a href="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" target="_blank"><img src="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" alt="" border="0" class="left"></a>ここに画像の横に表示されたい文章を書く感じです。<br clear="all">ここから画像の下に表示されたい文章〜…

(回り込み画像にはボーダーが出ないようになっていますので、表示したい方はborder: none;の一行を削除してください)

一見めんどくさそうですが…回り込みを使いこなすと色々できて便利かと思います。
よかったら一度試してみてくださいませ〜

ちなみに一番上のスタイルシートを追加すれば、どのテンプレートでも同じことができると思います。(できなかったらゴメンナサイ
ブログカスタマイズトラックバック(0)  コメント(7) 
2006'05.11.Thu

プラグイン*メールフォーム用CSS

公式プラグインで追加出来るメールフォーム用CSSです。
ワンタッチで追加できるのですごく便利なフォームですが、普通に追加しただけだと見た目が切ない場合があります。
そんな時の為のもの。
一応、今うちのブログに設置してあるメールフォームが見本です。

.plugin-mail input {
margin :1px;
background: #eee;
border : 1px solid #9DC9CC;
font-size: 85%;
color: #9DC9CC;
}
.plugin-mail textarea {
margin :1px;
background: #eee;
border : 1px solid #9DC9CC;
font-size: 85%;
color: #9DC9CC;
}


上記タグをCSSに追加するだけで、フォームがガチガチの見た目からマシになるかも!?
このタグでは色が青系になっているので自由に色とか変えて使ってくださいな〜。
ブログカスタマイズトラックバック(0)  コメント(0) 
Next |TOP