==教えることは自分育て==

<   2007年 05月 ( 8 )   > この月の画像一覧
|TOPに戻る
画像URLで投稿
すでに、どこかにUP済みの画像をエキサイトブログに貼る場合は、「画像URL」を活用しましょう。

篠栗霊場巡り

上の写真は、以前貼り付けていた私のHP「勿忘草」のTOP画像です。
これをブログに貼る時は、

 「勿忘草」のTOP画像の上で右クリック→プロパティ→アドレス(URL)→コピー。

b0018441_20512032.jpg(投稿の)をクリック。


 画像URLを選択。 
b0018441_22292128.jpg
 URLを貼り付け→送信。 
 
b0018441_22405621.jpg

 投稿欄の内容には下のようにタグが記述されています。

b0018441_22343829.jpg


【注意】チェックは中央に付いてますが、このままですと左寄せになります。ご承知のように、左寄せは3/4の幅に縮小されますので、<center></center>で挟んで、中央揃いにしましょう。 これは、エキサイトのバグですね、きっと。
[PR]
by otomi7771 | 2007-05-21 10:31 | ├画像URLで投稿 |TOPに戻る
サイドメニューのスクロールバー
さて、カスタマイスで一番難問のサイドメニューのスクロールバーになりました。
メモ帳もサイドメニューの一つですから、当然スクロールバーがつきます。
overflow:auto の意味は、テキストをご覧下さい。

<HTML編集>

<DIV CLASS=scroll MNBODY><$mnbody$></DIV>

<CSS編集>

div.scroll{ width: 160px;height:270px; overflow:auto;}

特にスクロールバーは、ご使用スキンのサイドバーのサイズにより、微調整が必要になってきます。メモ帳が一括で纏まってスクロールバーが付くのが残念ですね。これがを解消するには、HTML編集を使う必要があり、講座では対応できません。申し訳ありません。
[PR]
by otomi7771 | 2007-05-13 23:26 | ├スクロールバー |TOPに戻る
記事タイトルの背景に色をつけ、フィルタータグでぼかす。
記事タイトルのCSS編集の場所は、DIV.POST_HEAD です。
オレンジ色のタグを追加してください。

<CSS編集>

DIV.POST_HEAD {
MARGIN-BOTTOM : 15PX;
PADDING-TOP : 0PX;
BORDER-TOP : 1PX #BBB DASHED;
OVERFLOW : HIDDEN;
background-color:#ccffcc;
padding:5px 10px;
filter:alpha(opacity100,finishopacity=0,style=1,startx=30);
width:95%;

}

【注意】filterタグはインターネットエクスプローラ限定です。
fireffoxでは、下の様になります。

b0063421_16113673.jpg

[PR]
by otomi7771 | 2007-05-13 22:42 | ├記事タイトルの変更 |TOPに戻る
画像の拡大表示(ロールオーバー)
画像の上にマウスを載せてみてください。(オンマウス)


このスキルは「ぽっとの陽だまり研究室」さん提供です。
もともとは1枚の画像の拡大表示として案内されてます。
2枚の画像を使って同じサイズにすると、あたかもロールオーバーのようになります。
しかし、ジャバスクリプトではないのですよ。
詳しくは→「ぽっとの陽だまり研究室」のサイトへ

<投稿欄>
画像は参考例です。ご自分の画像に変えてください。

<div class="popup"><a href="http://otomi7771.exblog.jp/">
<!- 始めに表示しておく小さな画像 -><img src="http://pds.exblog.jp/pds/1/200705/21/21/b0063421_0411275.jpg" class="small"><!- マウスを乗せて大きく表示する画像 -><img src="http://pds.exblog.jp/pds/1/200705/21/21/b0063421_0413578.jpg" class="zoom" width=360 height=240 alt="マリンワールドのイルカショーです。"></a></div>


<CSS編集>

/*ロールオーバー*/
.popup a:link img.zoom,
.popup a:visited img.zoom,
.popup a:active img.zoom,
.popup a:focus img.zoom{
display:none;
border-style:none;
text-decoration:none;
}

.popup a:hover{background-color:transparent;}

.popup a:hover img.zoom{
border-style:none;
display:block;
text-decoration:none;
}

.popup a:link img.small,
.popup a:visited img.small,
.popup a:active img.small,
.popup a:focus img.zoom{
border-style:none;
display:block;
text-decoration:none;
}
.popup a:hover img.small{
border-style:none;
display:none;
text-decoration:none;
}

[PR]
by otomi7771 | 2007-05-13 22:39 | ├ロールオーバー |TOPに戻る
コメント欄の変更
コメント本文欄を拡大し、ポイント画像を貼ってみましょう。
CSS編集に、TEXTAREA.TXTFLD として追加してください。オレンジ色のタグをコピペしてください。

<CSS編集>

TEXTAREA.TXTFLD{
height:10em;background-image:url("http://pds.exblog.jp/pds/1/200705/06/21/ayame.jpg");
background-position:0% 100%;background-repeat:no-repeat;}



サンプル画像(右クリック→名前を付けて画像を保存→マイイメージアカウントに保存してからお使い下さい)
b0063421_2205193.jpgb0063421_21543650.jpg
b0063421_215547.jpgb0063421_21553245.jpg

[PR]
by otomi7771 | 2007-05-13 21:49 | ├コメント欄の変更 |TOPに戻る
記事タイトルにGIF画像を貼る
テキストP20(2)は、タグを見ればお分かりと思います。
上のようなgifアニメーションも貼ることができますね。
その場合、左のpaddingは適当に広げる必要があります。
positionもスキンにより、微調整なさってくださいね。
[PR]
by otomi7771 | 2007-05-13 21:46 | ├記事タイトルの変更 |TOPに戻る
クラス名の付け方(1)

.waku2img.waku4の違い

.waku2 はテキストP12要素のバリエーション(2)にあるように、「すべての要素に適用可能」なクラス名の付け方です。<div>でも<h2>でもすべての要素に適用されます。
因みに<h2>に適用してみましょう。

タイトル

文字に適用する時は、幅(文字数)がかわりますので、保存スタイルには幅を入れません。
インラインで幅を設定しましょう。
<投稿画面>
<h2 class="waku2" style="width:90px">タイトル</h2>

img.waku4 は、img限定のスタイルになります。親の性格を継承しつつ、子ども独自の性格を付け加えるという形です。テキストP12要素のバリエーション(1)に当たります。

ポラロイド風は写真の周りに付けるスタイルですから、img.waku4がいいでしょう。写真のサイズは問いません。
[PR]
by otomi7771 | 2007-05-04 14:47 | ├クラス名の付け方 |TOPに戻る
クラス名の付け方(2)

.waku4img.waku4の違い

★ポラロイド風写真のスタイルを.waku4で保存してみました。

【タグ】<img src="http://pds.exblog.jp/pds/1/200704/23/21/b0063421_1153778.jpg" class="waku4"> 結果は同じです。


何が違うかというと、
.waku4はすべての要素に適用可能ですので、divに適用できます。
ああああああああああああああ
【タグ】<div class="waku4">ああああああああああああああ</div>


★次にblockquoteに適用してみました。
ああああああああああああああ
【タグ】<blockquote class=waku4>ああああああああああああああ</blockquote>

Q. divとblockquoteが何故同じスタイルになってしまったのか?

A. blockquoteがもともと持っている3文字分の左右のmarginをmargin:5pxにかえてしまったからです。imgというインライン要素はwidth、heightを最初から設定しますが、divとblockquote要素の場合は、幅一杯の枠を持っていますので、文字の長さにふさわしいwidthを設定する必要があります。

しかし、いずれにしても上二つはポラロイドのスタイルになっていないので失敗ですね。中が文字ですから適用されないのです。丸いGIF画像もできません。【結論】矩形の画像にしか使えませんので、img.waku4 がいいということです。

[PR]
by otomi7771 | 2007-05-04 13:10 | ├クラス名の付け方 |TOPに戻る