☆きまぐれ日記☆

スクロールで動く静止画像：猫

Sat, 02 Apr 2016 20:59:01 +0900

http://(http://blogs.c.yimg.jp/res/blog-78-13/hikaru_h_2007/folder/1760606/80/69244980/img_0_m?1459409300

静止画像に　縞模様の画像を重ねると　錯覚で　画像が動いてるように　見える画像を作ってみました。　ゆっくりスクロールして　縞模様を重ねていくと　猫が走ってるように見えます。

どうかな～

前進してるように作成したが　早く動きすぎて　前進してるのか後進してるのか　よく分からないな～　ゆっくりスクロールすると、ん～～　後進してるように見えるな～　回転系の画像のほうがいいのかな　皆さんのＰＣでは　画像が動いて　前進してるように見えますか？

久しぶりの投稿

Mon, 21 Mar 2016 20:28:22 +0900

すっかり　ご沙汰いたしまして　申し訳ありません。　元気にしておりました。　永い眠りから覚め　ようやく　投稿することができました。　たまにしか投稿しませんので　寝ているのと変わりませんが　これからも　よろしくお願いします。

簡モ：スクロールの回り込み

Fri, 28 May 2010 22:14:19 +0900

　かんたんモード　 http://x7.jougennotuki.com/bin/ll?09494681w

【スクロールの回り込み】

　　文字・画像の左側に、スクロールを設置する。　　　　　　　　　　　　　　　

ここにも文字や画像を設置することが出来ます。

スクロールの大きさを

変更しない場合は、

巾２３０ｐｘ以内の画像を

設置してください。

コレより大きいと

横スクロールが表示されます。

いろいろ

設置できます。

スクロールの周りに

１０ｐｘのスペースを

作っています。

ここにも文字や画像を設置することが出来ます。

　　文字・画像の右側に、スクロールを設置する。　　　　　　　　　　　　　　　

ここにも

文字

や

画像を

設置

出来ます。

　ここにも文字や画像を設置することが　　出来ます。

■　サンプル：スクロールの回り込み　　（コピペで使用できます。）

　※　スクロール大きさ　２５０ x ２５０ｐｘ　

　※　スクロールの大きさの変更は、□をドラッグして調整してください。

・左側スクロール

▼

文章

▲

・右側スクロール

▼

文章

▲

■　おまけ

・左右スクロール

▼

文章

▲

再配布行為・無断使用は、ご遠慮ください。

簡モ：便箋風ライン

Thu, 13 May 2010 21:57:32 +0900

　かんたんモード http://x7.jougennotuki.com/bin/ll?09494681u　

＜　便箋風ライン　＞

　くみさんから、便箋風のアイデアを頂きました。

　下記ラインを ▼ カラ ▲ マデを「コピー」して、かんたんモードの投稿画面へ

　「貼り付け」て使用してください。

　このラインは、改行(Enter)キーを押すと自動的に　ライン行が増えます。

　背景画像・スクロールバー・重ねファイル、にも貼り付けて使用できます。

　【　画像添付も行えます。　】

画像ボタンより配置しました。

左寄せ・右寄せで配置した場合は、

画像の横にもラインは表示されます。

（中央配置）

　　　　これは、　（挿入配置）

中央・挿入で配置した場合は、画像の横にはライン表示されません。

　背景画像へ設置　

背景画像にも貼り付けて使用できます。

　←　　　　　　　左右に余白ありを使用した場合は、　　　　　　　　→　

画像等を添付する際は、巾を通常時より３０ｐｘ狭くして

添付してください。

このラインは、余白なしのタイプです。

　スクロールバーへ設置　

ここにも

貼り付けできます。

余白ありのタイプです。

余白なしのタイプです。

■　点線　サイズ３ｐｘ　：　左右に余白あり (15px x 2)

▼

文章

▲

▼

文章

▲

▼

文章

▲

▼

文章

▲

■　点線　サイズ１ｐｘ　：　左右に余白あり (15px x 2)

▼

文章

▲

▼

文章

▲

▼

文章

▲

▼

文章

▲

■　二重線　サイズ４ｐｘ　：左右に余白あり (15px x 2)

▼

文章

▲

▼

文章

▲

▼

文章

▲

▼

文章

▲

■　点線　サイズ３ｐｘ　：　余白なし　

▼

文章

▲

▼

文章

▲

▼

文章

▲

▼

文章

▲

■　点線　サイズ１ｐｘ　：　余白なし　

▼

文章

▲

▼

文章

▲

▼

文章

▲

▼

文章

▲

■　二重線　サイズ４ｐｘ　：　余白なし

▼

文章

▲

▼

文章

▲

▼

文章

▲

▼

文章

▲

再配布行為・無断使用は、ご遠慮ください。

簡モ：スクロールバーの応用

Sat, 08 May 2010 23:11:44 +0900

　簡単モード　

スクロールバーの応用

・下記サンプルの▼カラ▲マデを「コピー」して、

　簡単モードの投稿画面に「貼り付け」てから文章入力してください。

・スクロール枠のサイズ調整も行えます。（ □ をドラッグして調整します。）

＜　注意　＞

　　ＩＥ以外のブラウザには、反映しません。

■　スクロールバー　透明指定

※　サンプル　（コピーで使用可能です。）

▼

文章

▲

※　HTML　入力例

▼
<div style="overflow:auto;

scrollbar-arrow-color: none ;
scrollbar-face-color: #eeeeee;
scrollbar-track-color: #eeeeee;
filter:chroma(color=#eeeeee);
border:solid 1px #999999;
width:450px;height:150px;
font-size:12pt;color:#663333;
font-family:ＭＳＰゴシック;">
<div align="center">

<br>
文章

<br><br>
</div></div>
▲

scrollbar-arrow-color:     none   ;　　矢印（▼）の色を指定する。
scrollbar-face-color:      #eeeeee;　　透明指定により透明になる。
scrollbar-track-color:     #eeeeee;　　透明指定により透明になる。　　

filter:chroma(color=#eeeeee);　   　　　　透明にする色を指定する。

【注意】

文字や画像に透明指定と同じ色（#eeeeee）色が使用されていた場合は、文字や画像も透過処理されます。（画像は虫食い状態になります。）

■　スクロールバー　半透明指定

※　サンプル　：　不透明度70％　　（コピーで使用可能です。）

▼

文章

▲

※　HTML　入力例

▼
<div style="overflow:auto;
scrollbar-arrow-color: #ff0000;
scrollbar-face-color: #ffcccc;
scrollbar-track-color: #eeeeee;
filter:chroma(color=#eeeeee)alpha(opacity=70);
border:solid 1px #ffaaaa;
width:450px;height:150px;
font-size:12pt;color:#663333;
font-family:ＭＳＰゴシック;">
<div align="center">

<br>
文章

<br><br>
</div></div>
▲

scrollbar-arrow-color:　 #ff0000;　矢印（▼）の色を指定する。
scrollbar-face-color:　　　#ffcccc;　スクロールバーの表面の色を指定する。

scrollbar-track-color:　　 #eeeeee; 透明指定により透明になる。

filter:chroma(color=#eeeeee)alpha(opacity=70);　透明にする色を指定する。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　不透明度(%)を指定する。(0～100）

スクロールバーだけの半透明ができなかったー

【注意】

文字や画像に透明指定と同じ色（#eeeeee）が使用されていた場合は、文字や画像も透過処理されます。（画像は虫食い状態になります。）

スクロールバー内の文字や画像、全てが半透明になります。

ＨＴＭＬの作成方法

Ｆｉｌｔｅｒの機能説明

無断使用は、ご遠慮ください。

既に使用されている方もおられますが、記事に上げておきます。

Chｒｏｍａの別の使い方を試していますが、上手くいってません。

スクロールバーでは上手く反映しているのに、

別の場所に指定した場合、反映しないのはなぜだ～～～。

指定方法が間違っているのかなー？

出来そう思えたのに出来ないよ～～～～。

HTML文法一覧

Mon, 13 Aug 2007 00:46:03 +0900

記事の投稿にHTMLタグは使える？

記事を投稿する際に、以下のHTMLタグを使えます。HTMLタグを使えるのは、記事の本文部分のみです。

タグ　　　　詳細

<B>　　　　太字
<U> 　　　　下線付き
<I> 　　　　斜体　※Safariでは正しく表示されません。

<S> 　　　　取り消し線
<STRIKE>

<SUP> 　　　上付き文字
<SUB> 　　　下付き文字

<RB> 　　　　ふりがな（ルビ）
<RP>　　　　※FirefoxおよびSafariでは、ふりがな部分がカッコ付きで表示されます。
<RUBY>

<MARQUEE> 　文字のスクロール
<FONT> 　　　文字の大きさ（size）、色（color）

注意

・1つの記事のなかで、Wiki文法とHTMLの両方の利用はできません。

[Wiki文法使用]にチェックを入れた場合、HTMLタグは無効になり、入力したままの状態で表示されます。

Yahoo!ブログヘルプ（記事の投稿にHTMLタグは使える？）より。

タグの属性

【 <FONT> 】

【入力例】　<font size=7 color=#ff00ff>～文字を入力～</font>

属性
size= 　＿フォントのサイズを指定する。　１～７の整数（初期値は、３）
color= ＿フォントの色を指定する。　色指定値（#RRGGBB）の形式で指定する。
　　　　　　　　　 RR、GG、BBはそれぞれ赤、緑、青の16進数値である。
　　　　　　　　　　または、色名

【 <MARQUEE> 】

【入力例】　<marquee width=50 height=100 behavior=alternate direction=up loop=20 scrolldelay=100>　～　</marquee>

サイズ属性
width= ＿巾ピクセル
height= ＿高さピクセル
hspace= ＿左右の余白ピクセル
vspace= ＿上下の余白ピクセル

動きの属性
behavior= ＿動き方（初期値は、scloll）
　　　　　　　　　　scloll 　　テキストが片方から出てきてページを横切る動作。
　　　　　　　　　　alternate　テキストがスクロールする範囲の片端にくると、逆方向に動く。
　　　　　　　　　　slide　　　テキストがスクロールする範囲の片端にくると、停止する。

direction= ＿スクロールの方向（初期値は、left）
　　　　　　　　　　left , right , up , down

　
その他の属性
bgcolor= ＿背景色を指定する。　色指定値（#RRGGBB）の形式で指定する。
　　　　　　　　　 RR、GG、BBはそれぞれ赤、緑、青の16進数値である。
　　　　　　　　　　または、色名
loop= 　　＿スクロールの回数（初期値は、０：無限）
　　　　　　　　　　0　または、回数
scrolldelay= ＿再描画までの時間。　単位は、1/1000秒　（初期値は、８５）
scrollamount= ＿再描画までの距離ピクセル。（初期値は、６）
truespeedァ　　 scrolldelay属性で60より小さい値を指定したときに使用する。

これで全てかな？、ＨＴＭＬ文法は、利用できるタグが少ないよ～

ＴＯＰ

Fri, 15 Jun 2007 23:28:58 +0900

きまぐれ日記

ご訪問ありがとうございます。

文法・画像で

遊んでいるブログです。

　書　庫　一　覧

http://x7.jougennotuki.com/bin/ll?094946801

画像・リンク（Yahoo!推奨Wiki文法）

Wed, 07 Mar 2007 19:48:08 +0900

■■　画像

[[attached(,)]］　を利用する。

　　 ...「画像添付」で指定したアップロード画像の何番目を入力します。
　　 ... 画像を文字のどちらかに回り込ませるかを、
　　　　　　「right」「center」「left」で指定します。

　表示例　／　Wiki文法入力例

(1)

画像の前　　画像の後　　

画像の前　[[attached(1)]]　画像の後　[[attached(2)]]　[[attached(3)]]

(2) left

画像を左側に配置して、
右側に文章を回り込ませて表示します。
ＡＢＣＤＥＦＧ

[[attached(1,left)]]画像を左側に配置して、
右側に文章を回り込ませて表示します。
ＡＢＣＤＥＦＧ

(3) center

[[attached(1,center)]]

(4) right

画像を右側に配置して、
左側に文章を回り込ませて表示します。
ＡＢＣＤＥＦＧ

[[attached(1,right)]]画像を右側に配置して、
左側に文章を回り込ませて表示します。
ＡＢＣＤＥＦＧ

■■　画像

[[img(http://～)]］　を利用する。

　　1. まず、画像掲載用の「非公開記事」を投稿します。
　　　この記事に掲載したい画像を、他の記事にWiki文法で表示させます。
　　2. 画像掲載用の「非公開記事」を表示します。
　　　他の記事に表示させたい画像を右クリックして、
　　　表示されるメニューから「プロパティ」を選択します。
　　3. 「プロパティ」の「アドレス（URL）」欄のURLをコピーします。
　　4. 画像を表示したいところで、
　　　［[img( ～ )]] を使い、「～」にコピーした画像のURLを入力します.

　表示例　／　Wiki文法入力例

(1)

画像の前画像の後

画像の前 [[img(http:// ～ )]] 画像の後

■■　動画や音楽

[[item(http://,,)]］　を利用する。

　　　 ... 動画やファイルなどのソースURL
　　　 ... 幅（最大450、省略可能）
　　　 ... 高さ（省略可能）

　表示例　／　Wiki文法入力例

(1)

http://i.yimg.jp/i/topics/blogparts/topics.swf

[[item(http://i.yimg.jp/i/topics/blogparts/topics.swf,222,240)]]

(2)

http://i.yimg.jp/i/topics/blogparts/ticker.swf

[[item(http://i.yimg.jp/i/topics/blogparts/ticker.swf,220,50)]]

■■　リンク

[http://～］　を利用する。

　表示例　／　Wiki文法入力例

(1)

http://blogs.yahoo.co.jp/

[http://blogs.yahoo.co.jp/]

(1) 文字リンク

Yahoo!ブログ

[http://blogs.yahoo.co.jp/ Yahoo!ブログ]

文字・見出し・引用（Yahoo! 推奨Wiki文法）

Wed, 07 Mar 2007 19:46:03 +0900

■■　文字

　表示例　／　Wiki文法入力例

・斜体

斜体　ＡＢＣ

''斜体　ＡＢＣ''

・太字

太字　ＡＢＣ

'''太字　ＡＢＣ'''

・太字斜体

太字斜体　ＡＢＣ

'''''太字斜体　ＡＢＣ'''''

■■　見出し

文字の前後に半角スペースを入れてから、文字を「=」で囲む

　表示例　／　Wiki文法入力例

・見出し1

ＡＢＣＡＢＣ

= ＡＢＣ''ＡＢＣ'' =

・見出し2

ＡＢＣＡＢＣ

== ＡＢＣ''ＡＢＣ'' ==

・見出し3

ＡＢＣＡＢＣ

=== ＡＢＣ''ＡＢＣ'' ===

・見出し4

ＡＢＣＡＢＣ

==== ＡＢＣ''ＡＢＣ'' ====

・見出し5

ＡＢＣＡＢＣ

===== ＡＢＣ''ＡＢＣ'' =====

■■　引用

　表示例　／　Wiki文法入力例

・引用1

ＡＢＣＡＢＣ

{{{ＡＢＣ''ＡＢＣ''}}}

・引用2

ＡＢＣＡＢＣ

{{{:
 ＡＢＣ''ＡＢＣ'' 
}}}

・引用3

ＡＢＣ''ＡＢＣ''

{{{
 ＡＢＣ''ＡＢＣ'' 
}}}

☆きまぐれ日記☆

スクロールで動く静止画像：猫

久しぶりの投稿

簡モ：スクロールの回り込み

■ サンプル：スクロールの回り込み （コピペで使用できます。）

■ おまけ

簡モ：便箋風ライン

■ 点線 サイズ３ｐｘ ： 左右に余白あり (15px x 2)

■ 点線 サイズ１ｐｘ ： 左右に余白あり (15px x 2)

■ 二重線 サイズ４ｐｘ ：左右に余白あり (15px x 2)

■ 点線 サイズ３ｐｘ ： 余白なし

■ 点線 サイズ１ｐｘ ： 余白なし

■ 二重線 サイズ４ｐｘ ： 余白なし

簡モ：スクロールバーの応用

■ スクロールバー 透明指定

■ スクロールバー 半透明指定

HTML文法一覧

記事の投稿にHTMLタグは使える？

タグの属性

これで全てかな？、ＨＴＭＬ文法は、利用できるタグが少ないよ～

ＴＯＰ

画像・リンク（Yahoo!推奨Wiki文法）

文字・見出し・引用（Yahoo! 推奨Wiki文法）

ＡＢＣＡＢＣ

ＡＢＣＡＢＣ

ＡＢＣＡＢＣ

ＡＢＣＡＢＣ

ＡＢＣＡＢＣ

■　サンプル：スクロールの回り込み　　（コピペで使用できます。）

■　おまけ

■　点線　サイズ３ｐｘ　：　左右に余白あり (15px x 2)

■　点線　サイズ１ｐｘ　：　左右に余白あり (15px x 2)

■　二重線　サイズ４ｐｘ　：左右に余白あり (15px x 2)

■　点線　サイズ３ｐｘ　：　余白なし　

■　点線　サイズ１ｐｘ　：　余白なし　

■　二重線　サイズ４ｐｘ　：　余白なし

■　スクロールバー　透明指定

■　スクロールバー　半透明指定