「日記はいつも三日坊主。」
ブログの使い方や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 31
最近の記事
10/15 半透明フィルターの代わりに…
10/12 エキサイトブログ・モバイル…
9/19 スキン編集 ―背景編― 改訂版
9/17 コメント入力欄を大きくする。
9/14 アクセス解析について その1
9/7 POSTTAILの自分のIDを消して…
9/3 模様替えしました。&スクロールバー
9/1 いくら三日坊主といっても
全体 ブログ MENU スキン
編集
素材
配布
日記 リンク 管理用 ・・・ ・・・
|
カテゴリ:スキン編集記( 33 )
スキン編集 ―背景編― 改訂版
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 | スキン編集記
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 | スキン編集記
CSSを使ってテーブルを飾ろう
 素材を使ったテーブルの構造

c0068715_1423330.gif1 左上 背景繰り返し無し
2 上 背景横方向に繰り返し
3 右上 背景繰り返し無し
4 左 背景縦方向に繰り返し
5 文字入れ部分
6 右 背景縦方向に繰り返し
7 左下 背景繰り返し無し
8 下 背景横方向に繰り返し
9 右下 背景繰り返し無し

c0068715_15193538.gif←使用例です。
影以外でも色々な小さい画像を指定すれば可愛いテーブルにも面白いテーブルにもなります。



注意:これはスキンに使うためのテーブルです。
exciteでは記事の中ににテーブルは使えませんのでお間違えなく。。。
(使えるようになると嬉しいんだけどな・・・(T。T))


では、CSSとHTMLの指定です。
[PR]
by umigasuki70 | 2005-07-17 22:38 | スキン編集記
今までのスキン一覧
頑張った記念に、アルバムとして残しておこうと思います。

画像をクリックするとプレビュー画面に変わります。
あとはブラウザの戻るボタンでお戻りください。
ver.6ver.5ver.4
ver.3ver.3-2ver.2ver.1

[PR]
by umigasuki70 | 2005-07-16 15:40 | スキン編集記
模様替えしました。
忙しかったり体調がすぐれなかったり、やる気がでなかったり太ったりで更新サボリまくりでした。
それでも来て下さっていたみなさま、ありがとうございます。


暑いので夏バージョンに。海に潜ってみました(笑)
背景の水中写真はゆんフリー写真素材集様からお借りしました。

CSSも変えたりしたので前に使ったCSSが消えているかもしれません(汗)
もし表示不具合等お気づきの点がありましたらお知らせいただけると助かります。
m(_ _)m


7/17追記
最新の記事を横向きにしたのはいいけど、件数が増えた時のことを考えるの忘れてた
Σ(⌒◇⌒;)
marqueeつかってスクロールさせました。うっとうしいけどごめんなさいm(_ _)m
[PR]
by umigasuki70 | 2005-07-14 17:37 | スキン編集記
複数の同じところに同じ画像を表示させる
以前のスキンを作っている時、メニュータイトルの頭に●を持っていきたかったのですが、画像を作るのが面倒で文字の●を貼りつけた事がありました(笑)
その方法を色んなところで使えるよ、という紹介です。


例えば、全ての記事の一番下に画像を置きたい時

固定背景として表示させる方法もありますが、これだとリンクが貼れません。
クリック出来る画像、つまり、リンクを貼った画像をつけたい場合、
記事を書くたびにタグを打たなくても、スキン編集のところで指定すれば自動で表示されるようになります。


■HTML編集の「本文」をクリック

<div class="POST">
<div class="POST_HEAD">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><$postsubject$></td>
<td width="20%" align="right"><$postadmin type=1$></td>
</tr>
</table>
</div>
<div class="POST_BODY">
<$postcont$></div>

<div><a href="http://~~"><img src="http://~~.gif" width="20" height="20" alt="見本" title="クリックしても飛ばないよ" border="0"></a> 文字もOK</div>
<div class="POST_TAIL" align="right"><$posttail$></div>
<$cmtjs$></div>


こんな風になります



本文




見本 文字もOK    ←赤枠はつきません

# by | 時間| カテゴリ | Trackback | Comments( )

<div class="POST_BODY"><$postcont$></div>
が記事の本文で
<div class="POST_TAIL" align="right"><$posttail$></div>
が記事の下にある部分です。

なので、POST_BODY(記事本文)の最後とPOST_TAIL(記事下部分)の間に表示させたい画像のIMGタグやリンクのAタグを書きこみます。
文字を入れたい場合も同じです。

メニュータイトルにも使えるよ♪
[PR]
by umigasuki70 | 2005-06-19 12:32 | スキン編集記
テーブル素材の使い方 (記事部分に使う場合)
ここの記事が参考になればどうぞご利用ください。
ただし失敗等の責任は一切負えませんのでスキン編集は全て自己責任においてお願いしますネ。(*’-’*)b




周り(上下左右)に画像を置く場合、3列3段のテーブルを使いますが、ここでは左と下方向に影を付けるテーブルを使っています。
テーブルの縦横サイズの変化に対応します。

c0029209_1444554.gif

まずスキン 編集のページで

■ HTML編集の「本文」のほうをクリック。

この中に2列2段のテーブルを作ります。
<table cellpadding="0" cellspacing="0">
<tr>
<td class="HI" valign="top"></td>

<td class="POST">
<div class="POST_HEAD">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="POST_TTL" width="80%"><$postsubject$></td>
<td width="20%" align="right"><$postadmin type=1$></td>
</tr>
</table>
</div>
<div class="POST_BODY"><$postcont$></div>
<div class="clear"></div>
<div class="POST_TAIL" align="right"><$posttail$></div>
<$cmtjs$>
</td>

</tr>
<tr>
<td class="HISI"></td>
<td class="SI" align="right"></td>
</tr>
</table>


こんな形のテーブルができます(実際には枠線はありません)
赤字の部分が下の画像にある<$post$>部分の中身です。
(<$post$>は記事部分全体です。HTML編集の全体画面の中にあります。その<$post$>の中身---タイトル・日付・カテゴリなど---が「本文」編集画面にあります。)c0029209_14393883.gif



(*^-^)b まだまだ続くよ  Σ( ̄□ ̄ )ノノえ゛~~
[PR]
by umigasuki70 | 2005-06-13 15:17 | スキン編集記
スキンに自分の好きな画像を使う
使いたい画像素材の上で右クリック→名前をつけて画像を保存 で
画像を一旦 自分のパソコンに保存します。


ログインして 設定→スキン変更→編集で編集画面を開きます。

■ HTML編集 と書いてある四角の中の右上にあるマイイメージアカウントにイメージ登録というところをクリックすると画像アップロードの画面が開きます。

イメージ追加の参照ボタンを押し、自分のパソコンに保存した画像ファイルを
開く送信でアップロードできます。

保存されたイメージリストの中にアップロードした画像ファイルが表示されます。
ファイル名をクリックするとイメージが表示されるので確認します。

アップロード方法の画像付き説明が
0.5caratさんの・画像アップロードの方法にあります。オススメ(^_‐)b


アップロードできたらこちら
[PR]
by umigasuki70 | 2005-06-12 11:21 | スキン編集記
|