-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
カテゴリ:スキン編集( 49 )
|
2004年 12月 24日 |
スキンを作った時、私はMacのSafari、IE、Netscape、Firefoxの四種で確認します。
で、気付いた事をメモ。

  1. Safariでは、tableタグに対してmargin指定を入れた場合、何故だか効かないことがあり(^^;
    効く場合があるのか、ないのか、効かないのはどういう条件の時か定かではないのですが、今日作ったスキンでは効きませんでした。
    仕方ないのでtable全体をdivで括ってpadding指定をいれるという間抜けなことに。

    またSafariでは、<B>や<I>のフォントタグが無視されます。

  2. IEではcenter指定やtext-align:center; あるいは right;が効きません。
    中身がテキストだけなら効きますが、中にdivやtableが入れ子だと無視して左寄せになります。
    この場合、センターにしたい時は中に入るdivやtableにmargin:auto;を入れておくとセンタリングされます。
    右寄せにしたい場合は、table組むとか姑息な技を使うしかありません_| ̄|○

  3. Netscapeでは、tableのtdに対して、背景画像を指定し、なおかつbackground-attachment:fixed;を指定した場合、セルの中身が途中で終わっていると、そこまでしか背景が出てきません。
    例えば右メニューの部分を縦に全部画像を入れたい時など、左側本文部分がメニューより長くなっている場合、メニューの入ったセル(TD)の中身は途中で終わり、下に空白ができます。
    そこに背景色なら全部その色になるのに、背景画像の場合はfixed(背景画像はスクロールせずに固定)を指定していると、空白部分は背景まで空白に(^^;
    従ってattachmentの指定は入れないようにしなくてはいけません。
    スクロールしたくないという時はNetscapeでは途中で切れるのは諦めるしかありません。

  4. Firefoxでは、ページや中身の一番外側のdivやtableに幅の指定を入れていない、あるいは100%を指定している場合(私はよくやります。モニタやウィンドウのサイズにあわせて変わってくれるからです)、何故か、プレビューで見た時に突然横スクロールが発生します。
    あれ、間違えたかな?と思って編集画面に入り、もう一度プレビューするときちんとウィンドウの幅に収まっていて、???と思いつつ何も変えずに閉じ、もう一度マイスキンの一覧の方からプレビューすると今度は収まっていたりします。
    100%というのをモニタ全体に対してか、ウィンドウに対してか、解釈が不安定なのだと思われます(普通ウィンドウに対してで、モニタ全体に対して指定するなんてアホな話がとは思うんですが)

  5. おまけにWin IEについて。
    divやtableに対して、背景画像を位置指定して固定したい場合。
    一番上、左端や上端だけ繰り返しならいいんですが。
    下一列や下端のどこかに繰り返さずに固定したい場合、位置指定を100%あるいはbottomとするのですが、この解釈がMacと異なります。
    Macだと、どのブラウザでもウィンドウの下端を100%と解釈し、常にウィンドウの下端には画像が出てます。
    しかしWin IEだと、tableあるいはdivの下端と解釈します。
    従って、縦に長いページでスクロールしないとtableやdivの最後が出てこない場合、背景画像もそれまで出てきません(^^;
    かなり悪戦苦闘しましたが、諦めました。
    bodyに対してなら大丈夫なんですが、背景をいくつも重ねたい場合はdivを使って重ねていくしかなく、つまりお手上げってことです...( = =) トオイメ
    それで私は一つスキンの公開を諦めております。
    (全体に障子柄を繰り返し、ページ下端にだけ畳を繰り返し、その畳の上一カ所に火鉢の画像を固定して和室のような背景とするスキンなんです)
    もしどなかた良い方法知っておられたら教えて下さい。

  6. 更に判明_| ̄|○
    Operaで見てみたところ、やはりdivやtableに対して、背景画像の指定にfixedを入れていると、切れているどころか、最初の状態、つまり一切スクロールしない状態で出た範囲にしか背景画像が出ませんでした。
    なのでちょっとでも画面をスクロールさせると、背景画像が途切れて、しまいには消え去ります...( = =) トオイメ
    本日の教訓。body以外には背景画像の余計な指定はいれない。
    attachmentは禁忌。多分、positionも入れない方が賢い。repeatだってない方がいいかも_| ̄|○


[PR]
2004年 12月 23日 |
作ったけどまだ公開していないスキンは今二つあります。
他にも、作ろうと思えば、素材や色を変えて色々思い浮かぶので、これからも順に作っては公開していけばよいのですけど。
一方で、何がつまったかといえば、レイアウト。
見やすく崩れにくいと思えば、レイアウトで出来る変更は限られており、二列にするか三列にするか、あるいは、メニューを右にするか左にするかといったレベルの変更ばかり。
その程度なら、何も配布しなくたって、これまで配布したものやエキサイトのオリジナルを元に色、背景画像だけ修正すれば、いくらでも自由に好きなデザインが作れるわけで、実際、最近作ったスキン、色や素材は変わっても、構成は殆ど同じになってきています。
いちいち公開するのも何やら馬鹿馬鹿しいのではないかという気がしてきたり。

いえ、やろうと思えば、メニュータイトルの背景に画像を使ったり、記事を画像の枠で囲ったりもできます。
画像を指定して崩れないようにしようと思うと確かに少し面倒にはなるので、これはスキンとして公開し、そのままコピーペーストすればよいというのは意味があると思うのですが。
それでもブラウザによっては崩れているという危険は高くなりますし、画像の使いすぎはページの読み込みが明らかに遅くなります。
また読みやすさという点でも落ちますし、しかも最初はよくても結構すぐ飽きます(^^;
なので、あまり画像を色々使うのはしたくないのです。

でも、そういうスキンもこれからは作って公開していくか、それとも画像はやはり使わず、似たようなのばかりになるから公開は変わったパターンを思いつくまで止めておくかなどと迷っていたりします。
まあ、どうせ自己満足で公開してるんですから、これまで通り、似たり寄ったりでごめんね、でいいかという気もしますが(笑)
[PR]
2004年 12月 14日 |
ブログの説明文に改行を入れたい場合。
設定欄に改行タグやコードを入れても綺麗に無視され、そのまま出てしまいます。
そこで、スキンに直接書き込む事に。
メインページHTML中の<$description$>
この部分がブログ説明が出る場所です。そこでその直下に
<br>ついでにスキン配布(改行させて付け加えたい文章)
と書き込みました。
何行も書きたい時も、これを繰り返せばOK↓
<br>ついでにスキン配布
<br>スキン編集小ネタも
<br>素材もつけてます
[PR]
2004年 12月 13日 |
おそらく手書きでHPを作ったことのある方なら、言われなくてもテキストエディタでスキン編集されていると思いますが、HTMLやCSSを弄るのは、ブログのスキンが初めてという方の場合、ブラウザのスキン編集画面で直接修正をしておられるかもしれません。
ですが、テキストエディタには大抵色々と便利な機能がついており、そちらにコピーしてから弄る方がかなり楽です。

エディタはMacでもWinでも腐る程フリーのソフトがありますので、それはご自分で使いやすそうだと思うものを探していただくか、もともと入っているメモ帳など使って下さい。
機能はソフトによって色々ですが、まず大抵入っているのが検索置換機能です。
これが、スキンを修正する時にはとても便利。

スキンで最も簡単に変更できて、なおかつ印象も随分と変えられる部分というと背景色や文字色ですが、スキンの場合、同色の指定があちこちに入っていたりします。
そういう時、変えたい色を一カ所見つけ出し、それを検索して全部新しい色に置き換えれば、見落としなく一発で変えられます。
これだけでも修正作業がかなり楽になると思いますので、これまでエディタを使っていなかった方は是非一度お試しあれ。
[PR]
2004年 12月 06日 |
スキンを自作する時に、思わぬところがずれちゃったということはよくあります。
そういう場合、すぐにどのCSS指定箇所のミスかわかればよいのですが、スキンの場合、カレンダーなど複雑な指定になっていて、直ぐにはどこが不味いのかわからない場合があります。
そういう時、どうやってチェックするか?
CSSを眺めてみて、それらしいところを弄ってみてもよいのですが、すぐ見つからない場合や、今度は他が崩れちゃった、そもそもこの指定、どこに効いているんだろう?ということも多く、結構苦労するものです。
そういう時、私は怪しいと思った場所に、border : 1px red solid ; という指定を付け加えて、プレビューでチェックしてみます。
背景色によってはもちろんred以外の色でもOK。
要するに、そのCSSの指定範囲を枠線を表示させることではっきりさせようということです。
そうすると、paddingがずれているのか、marginがずれているのか、あるいは他の場所がずれているのかわかりやすくなります。
複数の要素が重なっている時は、親要素にもblueなど別の色で指定を入れてみます。
CSSでなくて、HTMLの場合、tableにborder=1を入れてみてもよいです。
こうすると大抵、すぐにわかります。
もちろん、修正が終われば指定は外して枠線を消します。
実に簡単な方法ですが、結構これ有効ですよ。
[PR]
2004年 12月 04日 |
正月用のスキンを作っていたんですが(これは確認して、明日にでも配布します)
シンプルなスキンですし、既に慣れた手順で一つ一つCSSを指定していき。

???

DIV. URL A:LINK {COLOR: darkgreen; TEXT-DECORATION: NONE}
これが効かない。何故?

DIV.HEADER A:LINK {COLOR: darkgreen; TEXT-DECORATION: NONE}
こちらは効いていて、それをコピペし、クラス指定を変えただけなのに。
色々試しては失敗し、CSSでは、その場所より上で指定したタグに入れるべき;が抜けてるなどのミスがあると、そこから下が全部効かなくなることがあるので、目を皿のようにしてチェックし。
問題ない。
何故だ〜〜〜!?と頭を抱えた時。

あれ?
実はクラス指定をURLに変える時、カーソルを持って行ってダブルクリックで選択コピーし、HEADERも同じくダブルクリックで選択してペースト、入れ替えたんですが。
何故か、「.」と「URL」の間に半角のスペースが入ってしまっていたのでした。
それで効かなくなっていたのです_| ̄|○

気付いてしまえば、しょーもないミスですが、こういう入っちゃいけないところにスペースが入るというミスは、CSSだけじゃなくスクリプトを弄っている時なども、たま〜にやります。
;を忘れたなどは気付きやすいんですが、スペースは見逃しやすいんですよ。
何故か上手くいかない時は、スペースのことも頭に置いてチェックをしましょう(T^T)
[PR]
2004年 11月 30日 |
b0052317_115751.jpg正月用の和風スキン黒背景を作りました。
他に白背景のものと、グレーのものと作りましたが、今日は黒背景だけアップ。
白とグレーも、ほぼ出来上がってはいますが、まだ少し手を加えるかもしれないので。

More
[PR]
2004年 11月 28日 |
b0052317_215084.jpg先にブラウザ四種を使って四苦八苦というネタを書きましたが、それで何やってたかというと、つまりこういう和風のスキンを作ってたわけです。
このスキンは、最初から何度も何度も何度も!手を加えて、微妙に違うバージョンがたくさん出来てしまいましたが、これが現在のところの最終形です。
この画像では静止画像ですが、背景のグレーの部分はgifアニメで雪が降っております。
畳と火鉢は背景固定しております。位置は%で指定しているので、ウィンドウのサイズを変えると移動しますが。


b0052317_2165545.jpgで、同じデザインばっかで飽きたんで、もうちょっとシンプルな和風をと思って今日作ったのがこちら。
こちらは季節関係なしです。
どちらのスキンも、ロゴ画像がクリスマスバージョンのままなのが間抜けですが、これらを使う時は当然デザインにあうものに変えます。
なお使ってる素材は全部自作です。

次はお正月バージョンでも作ろうかと画策中。
エキサイトのデフォルトスキンって、どうして和風のものや季節もの(クリスマス風とか)がないんだろうとブツブツ言いつつw
[PR]
2004年 11月 28日 |
全部Mac OS10.3.6の話です。

私がデフォルトで使ってるブラウザはSafari。
ですが、シェアが増えてるらしいし、サイトの表示が崩れてないか確認はしておいた方がということで、Firefoxも落としました。
で、もちろん以前から確認用にはIE。
実際、忌々しいことにIEじゃないと見る事ができないサイトもあるし。

ところで、私は職場では OS9.2を使っており、従ってSafariもFirefoxも駄目なので、Operaを試したりもしましたが、トラブルが多くて断念。長らく不愉快ながらIEを使っておりました。
ですが、タブブラウザに慣れた身にはIEは耐え難いブラウザでして。
で、Netscape7をば落とした訳です。

More
[PR]
2004年 11月 25日 |
昨日作った自作スキン、NNで確認したところ、どこかにミスがありそうだったので、一旦撤去して、ちょうど季節でもあることだし、一時的にクリスマスカラーにしました。
シンプルで見やすいのは、こっちが見やすいでしょうし(^^;

クリスマスまでに、昨日作った和風スキンもなんとか修正して使えるようにしたいです。
[PR]
PageTop
XML | ATOM

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