-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
カテゴリ:スキン編集( 49 )
|
2007年 06月 04日 |
風鈴スキンから、フォントサイズの指定のパターンを変更してみた。
今までは、記事本文のサイズを基準として、最初に、body、div、td、liなどにまとめて指定して、サイドメニューなどに個別指定を入れて、主に基準よりサイズを小さくしていた。

けれど、考えてみると、このパターンでは、サイドメニューや記事のタイトル、末尾など、変更する部分の方が多くなる。
その結果、フォントサイズの指定が面倒になる訳で。

逆に、基準の指定の方に、サイドメニューで表示したいサイズを指定することに。
そして、記事本文等、主に大きくしたいところにだけ指定を入れる形に。
こちらなら、つぶろぐやメモ帳など、サイドメニューの中の複雑な指定箇所も、フォントサイズは指定せずにいける。

大きくしたい箇所の新たな追加は、改めて見直してみると、タイトル部分などは更に大きいため、前から指定が入っているし、それを除けば、実は記事本文くらいしかなかった。
ううん、省いた心算でも、無駄って残ってるなあ。
[PR]
2007年 06月 01日 |
各記事に「つぶやくボタン」が設置できるようになりました。

このボタン画像の表示位置に対するCSSの指定方法です。
表示位置以外にも、マージンや枠線などの指定が可能だと思います。

私のスキンでは、記事末尾部分は、「posttale」というクラス名をつけていますので
.posttale img{vertical-align: middle;}
のように、そのクラス内のイメージに対して指定します。

エキサイトのスキンでは「tail」というクラス名ですので
.tail img{vertical-align: top;}
のように、指定します。

おまけ
[PR]
2006年 11月 29日 |
戌スキン
戌年用のこちらのスキンを、亥年用に変更できるようトップ部分の画像を上げました。

戌スキンのCSS中
.top{background: url(http://pds.exblog.jp/pds/1/200512/17/17/top.jpg) right top no-repeat;
この部分の画像URLを以下に書き換えて下さい。
http://pds.exblog.jp/pds/1/200611/29/17/top.jpg
[PR]
2006年 11月 26日 |
以前に配布したスキンのうち、背景が重ねになっているスキンにズレが生じる可能性があります。
この可能性があるのは、全体としての背景に、トップ部分のイラストが重なっているタイプのスキンです。

これは、エキサイトで自動的に挿入されるjavascriptのタグが、1px分、トップに場所をとってしまうことが原因です。
以前は、このような現象は生じていなかったので、最近仕様の変更があったのかもしれませんが、詳細は不明です。

この現象によって、古いスキンをご利用いただいた場合、上部のイラスト周辺が、1px分、全体の背景とズレてしまうことがあります。
これはプレビューでは確認できませんが、ブログに適用した時に、一番上に1px分の隙間があくことでわかります。

その場合は、以下のような方法をお試し下さい。

方法1)
スキンのCSS内でbodyに対する指定を見ます。
CSSの一番最初に、body指定はありますので、すぐ見つかると思います。
どのスキンも、bodyに対しては、margin : 0px;と指定されています。
例)
body { background : #ffffff url(*****) 0px 0px repeat;
margin : 0px ; padding : 0px; }

この中で、marginの指定を以下のように変更します。
margin : -1px 0px 0px ;

変更は、bodyに対する指定のみで、他は一切触れる必要はありません。

方法2)
方法1でもズレが修正できなかった場合、こちらの方法をお試し下さい。

まずスキンのメイン用HTML全体を<div class=body>と<div>で囲んでしまいます(HTML用フォームの一番上と一番下に挿入)

次にCSS内のどこでもいいので、下記の指定を追加します。
div.body { position:absolute; left:0px; top:0px; width:100%;}

これらの方法で、ズレを修正できます。
他は一切触れる必要はありません。
ズレが生じた場合はお試し下さい。
[PR]
2006年 05月 17日 |
このところ、またぞろtableレイアウトを止める準備とばかり、divとCSSでのレイアウトのスキンを試作していたのですが。
まあ、流石に慣れてもきて、Mac IEでも崩れず。
よし、今回は上手くいったかなーと思いきや。

やっぱWin IEがネックにorz

レイアウトを確認したところ、投稿記事中の画像に対する回り込み解除のための<br clear=all>が、画像に対するだけでなく、全体のfloat指定まで解除して、そこから記事が落ちることが判明。
これがスキンの問題ならまだ弄りようがあるけれど、投稿記事中のタグとなると、まさか過去記事全部書き直す訳にもいかず、挫折。
floatを使わず、position指定という手もあるにはあるが、試してみたところ、やはり思った以上にデザインに制限が生じてしまいまして。

なんというかね、うん、FFもね、Operaもね、全部いけたのにね。
IEでさえ、Mac版は持ちこたえてみせたのにね。

結局、作ったスキンは諦めて、毎度のtableレイアウトに修正しましたとさorz

あ、ちなみに。
IE6とIE7β。
どっちも崩れてましたが、違う崩れ方してました(にっこり)
いつになったらIEはCSSを「まともに」解釈するようになるんでしょうね?
とりあえずIE7は、まだ駄目ってことですね。
[PR]
2006年 05月 04日 |
現在作成中の新作スキンに思わぬところで大苦労してますorz

今回、色の使い回しが自由にきくテーブル枠素材を使って、3種類のスキンを作ろうとしたのです。
どういうことかというと、記事やサイドメニューの右側と下に影がつくようなデザインで、素材は影の部分だけなので本分部分は好きな色や背景画像にできるというものです。

で、CSSの指定を楽にし、かつ無駄な余白を作らないためにも、最初、テーブルにcolspanとrowspanの指定をいれて作ったんです。
(HTMLがわからない方には何のことやらだと思いますが(^^;)

ところが、まずFFで確認して愕然。
素材が入るだけのセルには、スペースだけいれてたんですが、何故かその部分の影が出てない。
そこで内容を半角スペースから全角に変え、セルサイズを超えないようフォントサイズやライン高の指定までいれて漸くできた、と思ったら。
今度はOperaとIEで確認してやっぱり愕然。
それでも影が出てない!

これが同じテーブル枠を使ったスキンでも、藤スキンなどは綺麗に見えているので、要するにcolspanとrowspanに問題がある、というか、つまりこれをやってると、セルの幅指定が全く効いてないということが判明。
やむをえないので、もう一度半角スペースに戻した後、colspanとrowspanを外して、無駄な余白セルになるのはわかってましたが、テーブルを組み直し。
そして、一見、そこも本分部分に入って見えるように、背景の色や枠線の指定、果ては中身のmarginとpaddingの指定まで全部やり直し。
えっらい無駄な指定の多いスキンになってしまいましたorz
(しかも、その余白セルに指定した枠線が、どうやってもOperaでは色指定が有効にならずに枠が見えないことが判明。もう諦めた)

今回、SafariとFF、NN、IE、Operaと、それぞれが全く異なる挙動をしてくれたので、acid2クリアしているSafariだけが正しくて(中身やcolspan、rowspanに関わらず、ちゃんと各セルの幅指定や背景画像指定を効かせてくれたのは、確かにSafariだけだった)、残りのブラウザが全て問題ありなのか、あるいは、たまたまSafariが上手くいっただけで、私のしようとした指定の仕方がそもそも無茶だったのかはわからず仕舞い。

結局、素材を使い回して、好きな色にカスタマイズできるスキンという予定だったのだけど、この余白セルのお陰で、それをするには結構面倒なCSSの修正をしないと変えられないスキンということになってしまいました。

最近は、もう大抵のブラウザで崩れないソースを書けるようになってた心算だったのですが、本当に久しぶりにHTMLとCSSで苦労しました。
とりあえず、もう少しチェックしてから公開します。
[PR]
2006年 04月 13日 |
タグの数は、20個までと制限がありますが、これはどういうことかというと
  1. サイドバーに表示されるのが、最大で20まで
  2. 投稿時、タグのセレクトボタンに、記事数の多い順に20までしか出ない。

ということを意味します。

ですが、投稿の時に、フォームに手入力すれば、実は20個を越えた数のタグも入れることが可能です。
でも、折角タグをつけても、メニューに表示されないのは困りますよね。

その場合、記事数の少ないタグがメニューから落ちますので、その分をフリーエリアやメモ帳、あるいは専用のタグ一覧記事などを使って、リンクを貼っておくことで有効に使えます。
<a href="http://*****.exblog.jp/tags/○○○/">タグ:○○○</a>
リンクはこのように貼ります。
この時、*****の部分はご自分のブログのアカウントに、○○○の部分は、タグのキーワードに変えます。
タグ:○○○という部分は、好きな言葉に変更して構いません。

キーワード:タグ
こちらが記事に投稿した場合の見本です。クリックしてみて下さい。
キーワードは、タグとして使っていない「タグ」という言葉にしていますから、記事はありませんが、一覧ページは開きます。
[PR]
2006年 04月 13日 |
つけたい場所に以下のタグを入れます。
<$adminmenu type=2$> の直後などが良いでしょう。
<a href="http://www.exblog.jp/logout.asp">Out</a>
URLは変えません。
OutというテキストはLogout、ログアウトなど好きな言葉に変更できます。

複数のエキサイトブログを持っていて、ログイン、ログアウトを繰り返す方には便利です。
[PR]
2006年 04月 13日 |
先日から導入された新機能、タグについて。
記事本文中の、タグ表示部分のCSS指定です。

以下のように、div.TAGSに対して指定を入れることで、文字サイズや色、余白が指定できます。
div.TAGS{margin-top:10px; font-size:9pt;}

また、タグキーワードはリンクになっていますので、そちらの文字色等をタグ専用に指定したい場合は、以下のようにします。
div.TAGS a:link{color:#0000ff; text-decoration:underline;}
div.TAGS a:visited{color:#00ff00; text-decoration:underline;}
div.TAGS a:active{color:#ff0000; text-decoration:underline;}
div.TAGS a:hover{color:#ff0000; text-decoration:underline;}

いずれも指定値はお好きに変えられます。
[PR]
2006年 01月 20日 |
日頃、ご利用下さる方々への感謝を込めて、少し早いですが、バレンタイン用チョコケーキ素材です。
ダウンして、ロゴ用画像としてお使い下さい。
150*130 透過gif

  

それぞれ、黒背景、白背景、ピンク背景(Valentine Chocoスキンの背景色)で透過しています。
[PR]
PageTop
XML | ATOM

個人情報保護
情報取得について
免責事項
Blue Paper Skin by Sun&Moon