「日記はいつも三日坊主。」
ブログの使い方やCSSを勉強していましたが休止中です。
コメント欄・トラックバックの怪しげなURLにはご注意ください。
(たまーにスパムのチェックはしますが消しきれませんのでm(_ _)m)
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
最近の記事
10/15 半透明フィルターの代わりに…
10/12 エキサイトブログ・モバイル…
9/19 スキン編集 ―背景編― 改訂版
9/17 コメント入力欄を大きくする。
9/14 アクセス解析について その1
9/7 POSTTAILの自分のIDを消して…
9/3 模様替えしました。&スクロールバー
9/1 いくら三日坊主といっても
全体 ブログ MENU スキン
編集
素材
配布
日記 リンク 管理用 ・・・ ・・・
|
<   2005年 09月 ( 6 )   > この月の画像一覧
スキン編集 ―背景編― 改訂版
BACKGROUNDというのは背景のことですが、CSSで指定すれば背景画像を全面に敷き詰めるだけではなく、縦方向のみ・横方向のみに並べたり、1つだけを好きな場所に固定することもできるのです。
1つだけ表示させることで背景でなくワンポイントに見せて使うこともできます。

BACKGROUNDの指定の仕方にはこんなのがあります。


A 背景色の指定をする。
BACKGROUND:#☆☆○○△△;

B 背景を透明にする
(BACKGROUNDを記述しなければ透明になる場合もありますが、
指定しないと画像が反映されないこともあります)
BACKGROUND:TRANSPARENT;

画像を使う

C 背景画像の指定
BACKGROUND-IMAGE:URL(http://~~~/○○.gif);

背景画像の並べ方

D 縦方向にのみ繰り返し
BACKGROUND-REPEAT:REPEAT-Y;
E 横方向にのみ繰り返し
BACKGROUND-REPEAT:REPEAT-X;
F 1つだけ表示してワンポイント風に
BACKGROUND-REPEAT:NO-REPEAT;

位置指定

G 1つだけ表示する場合の場所指定
BACKGROUND-POSITION:LEFT TOP; (左上に表示)
BACKGROUND-POSITION:350PX 100PX; (左から350PX、上から100PXの位置に表示)
H スクロールしても背景を固定させる
BACKGROUND-ATTACHMENT:FIXED;

青枠内のソースと下の赤枠内の画像を比べてみてください。
背景見本1
背景見本2
背景見本3

赤枠内1、2、4、8、のワンポイント画像・・・青枠内の C F Gを使います。
3・・・C D
5、6、7・・・C Eまたはフィルターを使う。
9・・・C F G H 記事部分にB
9はHを使わずに記事部分の高さを決めてその中でスクロールさせるようにして、背景固定に見せることもできます。ver.3 ver.3-2がそうです。

実際に書くとこうなります。青字部分を書き足します。
DIV.MNTTL {
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #AAA SOLID;
FONT : 9PT/150% VERDANA;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
BACKGROUND-IMAGE:URL(http://........**.gif) C
BACKGROUND-POSITION:RIGHT BOTTOM; G
BACKGROUND-REPEAT:NO-REPEAT;
F
}


BACKGROUND部分をまとめることもできます。
BACKGROUND:URL(http://........**.gif) RIGHT BOTTOM NO-REPEAT;
[PR]
by umigasuki70 | 2005-09-19 12:40 | スキン編集記
コメント入力欄を大きくする。
この方法はあちこちのブログで紹介されていますが
私の失敗談もさらけ出してみましょう (#ノ。ノ)


コメント入力欄の初めの大きさがこれ。右はログインしている時の表示です。
これだと何行にもわたるコメントが書きずらいですよね。
なので縦の高さを変えたいのです。(横幅は変えないほうが無難)

CSS編集のほうで TEXTAREA.TXTFLD{ }というソースを足します。

TEXTAREA.TXTFLD{
HEIGHT:10EM; 
}
EMというのは、その部分に指定されている文字の1文字分に値する大きさなので10行分取りたければ10EMにする。分かりやすいですね。


するとこのようになります。

ログインしていない人にはこのように見えます。

書いてあるとおりにすればできたので簡単でした。

工夫も何もしないで満足でき、妙に自信がつきます(笑)


そして次のスキンを作る時に失敗したのですねー。



CSS編集の中にこういうところがあります。

.SMALL { FONT-SIZE : 11PX; }
.DATE { FONT : BOLD 8PT/150% TAHOMA; }
.TIME { FONT : 8PT/150% TAHOMA; TEXT-ALIGN : LEFT; }
.AUTHOR { FONT : bold 8pt "TAHOMA"; }
.TXTFLD { FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }
.SUBMIT { FONT :9PT/140% ;COLOR:#000; }

青色部分です。
確かここを変えるんだったよね♪(^-^)b
とこの中に HEIGHT:10EX; を書き足したのです。

スキン編集を保存して(Exciteではコメント欄の確認はプレビュー画面ではできないので)
コメント欄を開いて確認しました。

おっけおっけ♪できたっと。


ところが翌日、ログインせずに自分のブログにきてコメント欄を開いてみると・・・





がびょ~~~ん!( ̄∀ ̄;)ノノ

たぶんこの失敗に気づいた人もいらっしゃったでしょう。(滝汗)

てなわけで教訓
  • .TXTFLD{}部分はいじらずに TEXTAREA.TXTFLD{ }を足しましょう。
    (入れ替えではありません。入れかえると枠線が変わってしまいます)
  • コメント欄の編集はログイン・ログアウト、両方で確認しましょう。


ちなみに.TXTFLD{}部分TEXTAREA.TXTFLD{ }を入れ替えた場合はこうなります。

分かりにくいですが名前・パスワード・URL部分と入力欄の枠線が違いますよね?
[PR]
by umigasuki70 | 2005-09-17 22:41 | スキン編集記
アクセス解析について その1
まず最初に申し上げておきます。
私がアクセス解析をここのブログに設置したわけ。

荒らしにあったわけでも嫌な思いをしたわけでもないのです。

ここにきてくれる人がどういう風に見てくれているのかを知りたかったから。

ここのカウンターはページを見るたびに増える設定をしておりません。
なので3時間のうち1人の人が1ページ見て下さっても10ページ見て下さってもカウンターは1しか増えないようにしています。なので同じ人はほぼ1つ増やして下さってる、というわけ。

何故なら・・・自分が投稿したり、スキン編集をするたびに何度もページの更新をするので、その度にカウンター増えてたら「なんだか自分1人で回してるべ・・・ヽ(´△`)ノ」な気分になりそうですもの(笑)

でもそうすると、どれだけ見て頂けているのか分からなくて、やる気がしぼんでいくのですね^^;
コメントをいただければ分かるのですが、私もレスポンスが遅かったりで申し訳無いし、それにコメントは強制するものではないと思うので。もし質問をされても完璧にお答えする自信もないし。

なのでどうぞご自由に見てください。使えるところがあったらどーぞお使い下さい。なスタイルなのです。

でもやっぱり「見てくれてるのかなぁ・・・?」という気持ちもあり・・・アクセス解析をつけています。

そうするとですね、カウンターはそんなに増えていなくても、同じホスト名の人が何ページも見て下さっていることが分かったりして、嬉しくなるわけですね。

それとか、「人気の記事(のURL)」を知ることも出来ます。
これはあくまでもアクセス数だけで、残念ながらそのページを何分かけて見てもらっているのかは分かりません。
exciteブログではscriptタグが禁止されているため、いくつかの機能が使えなくなるのです。
同じ人が何回訪れていても「訪問回数1回」だし、
リンク元は出ないし(検索サイトからの訪問は出ます)、
閲覧時間は全部「0秒」(これちょっと悲しいですヨ^^;)しか出ません。

それでも
あー、色んなページ(記事)を読んでもらってるんだ・・・とか
ここに来る人は殆どがIEユーザーで、Macの人はごく少数だな・・・とか
この時間帯にきてくれる人が多いなぁ・・・などが分かれば嬉しいもんです。

欲を言えば、閲覧時間は知りたいです。
だって時間がかかっていればじっくり読んでもらってる、という事でお役に立てたのかな?って解釈できるし、1秒で飛ばされてたら、既に読んだ、とか、興味がない、とかでしょ?

(時間がかかってても、お茶を入れて休憩してる場合もありますけどね(笑))

ま、そんな使い方をしております。

なのでご安心を・・・
というのはアクセス解析に抵抗を感じる人もいるので。

使える機能が限られている、というのはexciteブログの中、全部に言えることだと思うのですよ。


って書きたかったのはこれだけじゃなかったのだけど長くなるのでまた今度・・・(笑)
[PR]
by umigasuki70 | 2005-09-14 13:11 | brogあれこれ
POSTTAILの自分のIDを消してみました。
記事の下に表示される自分のID部分を変えてみました。

以前その方法を説明されているところを見かけたのですが、その頃は自分では消す気も変える気もなかったのでまともに読んでおらず・・・えーと、エキサイトブログ掲示板でもスレを前に見かけた気がするのですが、探してもわかりませんでした。(○_ _)=O

何故変える気になったかというと、今回のスキンはあまりデザインをあちこち変えていないので。  あ、パッと見は変わってると思いますけどね。
コメント欄とか画像もなくシンプルでしょ?(笑)
だから新しいのを入れてみようかな?というのと、私のIDが長いのでコメント下さるかたにもっと呼びやすいHNがあったほうがいいかな?と思いまして。
前に陽だまりさんがUMIさん、と書いて下さっていたので「これだ!」と思い(≧▽≦)ノ 使わせていただきます。
(あ、でも自分gasukiという意味のIDではありませんのであしからず(笑))

で、色々試してみました。

その1


IDのフォントの色を背景と同じにして見えなくしただけです。
赤色部分を足します
CSS編集の下のほう(DIV.CAL の上あたり?)にあると思います。
.AUTHOR {
FONT :BOLD 8PT/150% TAHOMA; 
COLOR:#FFF;
}


その2


ID部分を非表示にしました。byの後に間が空きません。
.AUTHOR {
FONT :BOLD 8PT/150% TAHOMA; 
DISPLAY:NONE;
}


その3


byも消してみました。
POSTTAILごとフォントの色を背景と同じにします。
IDとby以外の文字にはそれぞれリンクが指定されているので見た目は変わりません。
ただし仕切り棒 | も見えなくなります。
DIV.POST_TAIL{
FONT : 11PX/150% TAHOMA;
MARGIN-TOP : 10PX;
TEXT-ALIGN : RIGHT; WIDTH : 480px;
COLOR:#FFF;
}
.AUTHOR {
FONT :BOLD 8PT/150% TAHOMA; 
DISPLAY:NONE;
}

背景に画像を使っている人にはフォントの色を変えても見えてしまう可能性があるので「その2」がいいと思います。画像の色合いによっては「その1」「その3」も使えるかも?

さらにbyの左にHNを入れたければHTML編集の[本文]の中をを編集します。
赤色部分を足します
<div class="POST_TAIL">HN<$posttail$></div>


その4
別に名前はなくても私以外に誰も書かないのですが、HNを知っていただくためにもUMIを使いたい、どうせやるならby UMI にしたい、と画像を使って思考錯誤して作ってみました。

画像のように文字と重ならず表示されていますでしょうか? ちゃんと表示されているようでしたら後日追加記事を作ります。
もし変になっていたらどなたか教えてくださいませm(_ _)m
[PR]
by umigasuki70 | 2005-09-07 21:48 | スキン編集記
模様替えしました。&スクロールバーについて。
約2ヶ月ぶりですね。
夏の終わりのイメージにするか、秋らしいイメージにするか、夕日の写真使ってみたりコスモス探してみたり色々悩んだのですが、あれもこれも作業が進まず全部ボツにヽ(´ `)ノ

今回はスクロールバーの色も変えませんでした。このデザインなら変える必要もないと思い・・・

CSSでスクロールバーを変えることができます。
方法はこちらの記事で。

これには賛否両論ありますよね。
エントリーにも書いていますがIEだと色は変わりますが、NetscapeやFirefoxなんかだと色が変わりません。反対派の理由はこのへんでしょうか?

それでも自分はIE使ってるし、見に来る人も殆どIEだし・・・やっぱりデザインに合わせてスクロールバーも綺麗な色にしたいよー!
って思いますよね。

個人のブログなのでやっぱり自分の好きなようにしていいと思うんですヨ。基本的に。

ただ注意しないといけないのは
  • 上に書いたようにブラウザによっては色が変わらない点。なのであちこちにスクロールバーをつけるとページは長くならないし、IEだとデザインにマッチして素敵♪に見えても他のブラウザではやたらグレーのスクロールバーが目立つ、という事に・・・
  • スクロールバー自体を消してしまう(背景と同じ色に設定して見えなくする)とページがとってもスッキリして見えますが、これも他のブラウザではグレーでしっかり見えます。そしてIEユーザーの中にもスクロールバーが見えないのを嫌がる人が多いということです。
    私もスクロールバーの見えないページは苦手です。読みたかったのにスクロールがうまくできなくて途中でやーめた!ってよそに移動する事が多いです。マウスでスクロールすればいい、ということなのでしょうがやっぱりガリガリ忙しいし、スクロールバーでヒューっと滑らかに好みの速さでスクロールしたい。そう思いませんか?(笑)
    できれば背景と同じ色にしてもせめて枠だけ残して欲しいなぁ・・・ 個人的願望です(笑)
  • あと、色々技を入れたくてCSSを使いすぎると重いページになっちゃうみたいですね。背景を固定するのもIEだとスクロールするときに表示がカクカクすることありませんか?
    色んな技を駆使したあるブログでは、表示までにお茶を入れられ、スクロールすると酔いそうになり、別のエントリーを表示するまでにお茶が無くなり、しまいに固まる(T^T)・・・なんてところもあります。(お気に入りリンクの中にはありませんよ、念のため) Exciteではないのでたぶん他にもjava scriptとかFlashとか色々使っているんでしょうけど。


それでも自分の好みが優先だー!
それもアリでしょう。 だから作るのが楽しいんだもの。

私は自分の好みを入れながら一応NNでも確認して、「これなら許せる」と自分で納得して(笑)作っています。
Macでの表示とか持ってないから全然分からないし。 ここを見にきて下さる中で極少数派のMac使いさん、いかがでしょうか?表示が崩れていましたらそっと教えてほしいデス・・・|壁|゜゜)
[PR]
by umigasuki70 | 2005-09-03 15:27 | スキン編集記
いくら三日坊主といっても
約1ヶ月半更新してないなんて・・・アセアセ

久しぶりに開くと、このver.5は重いですね^^;
ちょくちょく見にきて下さっているかた以外の方には表示までにイライラさせてしまったかもしれませんねA^^;
あ、前に書き忘れていましたが、私のパソコンでネスケを使ってこのページを見ると、レイアウトが思いっきり崩れます。
タイトルをクリックして読みこみし直すと直るのですが、それが何故か分からないままでした。
ま、ここに来て下さるかたは、殆どがIEをお使いのようなので、このままにさせてもらってもいいかな、と。。。

さらに9月になっちゃうとカレンダーのところがSeptember 2005なんて横が長くなるので改行されてるし。(修正しました)
・・・ここまで考えていなかった・・・CSSは奥が深い・・・いや、私が浅過ぎる・・・

あれこれやろうとすると色々変なところが出てきちゃって挫折します。
しそうになる、っていうより、します、私は(笑)
ま、やらなければ不具合もないけど、反対に出来た時の喜びも味わえないので。
だからみなさん、思考錯誤しながらも自分らしくカスタマイズするんですよね。

さて、朝晩は結構涼しくなってきましたね。
そろそろ深い海の中も寒くなってきたし、陸に上がってきます。
では、いちおうカレンダーに更新マークを残した、ということで。。。
[PR]
by umigasuki70 | 2005-09-01 10:41 | 日記?
|