日記はいつも三日坊主。

エキサイトブログ・モバイルβ版を試してみる

エキサイトブログ・モバイルβ版開始のお知らせ

お久しぶりです。
忙しくてなかなか更新できないなぁ・・・なんて思ってたらまた今月も半月近く過ぎている事に気がつきました。日記だけでなくブログ自体が三日坊主になってしまってるＵＭＩです。

Excite blogトップのお知らせを見ると、
なんとまあ、携帯から見られるようになったのですねー。
(気づくのおそっ)

私の携帯でも無事、見ることができました。
でもあれですね、こういう内容のブログって・・・携帯で見る人いないかも（笑）
記事一つ一つが長いから読みにくいですね。ＣＳＳ記述とかもあるし。

携帯対応を意識して作るなら、もっと短めの記事で、
できれば日記等の読み物サイトがいいですね。


画像も小さく表示されて一瞬嬉しいのですが、これはサムネイルという扱いなのでしょうか？
パケット使い放題じゃない私はそのへんが気になります（笑）
それと、画像が２つ横に並んでいると左の分しか表示されないようです。

ま、ここのブログを携帯ブロガーさんに見て頂いてもつまらないし役にも立たないと思うのでいいんですけど、写真載せてらっしゃるブログでは並んだ画像も全部表示されるといいですね。

それと、携帯ページトップにタイトルが並びますが、そこにコメント(件数)、ＴＢ(件数)も表示されると携帯ユーザーさんにはとっても使いやすいんじゃないでしょうか？
そんなところがスタッフさんに届けばいいな・・・とトラックバックさせていただきます。

・・・うっ・・・スタッフブログからトラックバックする(会員専用)を開いて書くとプレビューって出来ないんですね。知らなかった・・・

スキン編集 ―背景編― 改訂版

BACKGROUNDというのは背景のことですが、ＣＳＳで指定すれば背景画像を全面に敷き詰めるだけではなく、縦方向のみ・横方向のみに並べたり、１つだけを好きな場所に固定することもできるのです。
１つだけ表示させることで背景でなくワンポイントに見せて使うこともできます。

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

色

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

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

画像を使う

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

背景画像の並べ方

D　縦方向にのみ繰り返し
BACKGROUND-REPEAT:REPEAT-Y;

E　横方向にのみ繰り返し
BACKGROUND-REPEAT:REPEAT-X;

F　１つだけ表示してワンポイント風に
BACKGROUND-REPEAT:NO-REPEAT;

位置指定

G　１つだけ表示する場合の場所指定
BACKGROUND-POSITION:LEFT TOP; (左上に表示)
BACKGROUND-POSITION:350PX 100PX; (左から350PX、上から100PXの位置に表示)

H　スクロールしても背景を固定させる
BACKGROUND-ATTACHMENT:FIXED;

青枠内のソースと下の赤枠内の画像を比べてみてください。

赤枠内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;

コメント入力欄を大きくする。

この方法はあちこちのブログで紹介されていますが
私の失敗談もさらけ出してみましょう　（#ノ。ノ）


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

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

TEXTAREA.TXTFLD{
HEIGHT:10EM;　
}
EMというのは、その部分に指定されている文字の１文字分に値する大きさなので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{ }を入れ替えた場合はこうなります。

分かりにくいですが名前・パスワード・ＵＲＬ部分と入力欄の枠線が違いますよね？