stroll [名] [C] ぶらぶら歩き,散歩.

  スポンサーサイト

一定期間更新がないため広告を表示しています

- | permalink | - | - | ↑top
Clip!! | Ranking |

  文字列をタイプライター風表示 ver 2.1

[修正履歴]
2004/06/20 Operaに対応。
2004/10/20 sbに対応。
2005/01/10 Macの場合、途中で止まってしまうため、実行しないように修正。

指定した id 要素の文字列をタイプライター風に表示するスクリプトです。

・HTMLタグに対応してます。
・id属性を指定するだけで簡単設置できます。
・JavaScriptがOFFの場合は、文字列をそのまま表示します。

TypeWriter Start!ボタンをクリックしてください。
+文字列をタイプライター風表示 サンプル+

↑をClick!こんな感じで表示されます。

以下は、blogのタイトルと説明文をタイプライター風表示する場合の例です。
設置するには、まず以下のスクリプトを</body>タグの上にコピー&ペーストします。
<script type="text/Javascript">
<!--
// 文字列をタイプライター表示 Ver 2.1
function typeWriter(e) {

var time = 150; // 表示速度:速=小

if (navigator.userAgent.toLowerCase().indexOf('mac') > 0) return;

var b = "";
if (document.all) {
b = document.all(e).innerHTML;
} else if (document.getElementById) {
b = document.getElementById(e).innerHTML;
} else {
return;
}
if (b == undefined) return;

var m = b.match(/"[^"]+"/g);
if (null != m) {
for (var i = 0; i < m.length; i++) {
b = b.replace(m[i], m[i].replace(/¥"/g, '¥''));
}
}

doTypeWriter(e, b.replace(/&quot;/g, '"'), time, 0, 0);
}

function doTypeWriter(e, b, t, n, c) {
var i = b.indexOf('<', c);
if(i > -1 && n >= i) {
n = b.indexOf('>', c) + 1; c = n;
} else {
n++;
}
var id = setTimeout('doTypeWriter("' + e + '", "' + b.replace(/¥"/g, '¥¥"') + '", ' + t + ', ' + n + ', ' + c + ')', t);
var s = (n == b.length) ? b : b.substring(0, n) + '_';

if (n > b.length) {
clearTimeout(id);
} else if (document.all) {
document.all(e).innerHTML = s;
} else if (document.getElementById) {
document.getElementById(e).innerHTML = s;
}
}

// タイプライター表示したい id 属性を指定
// 複数表示したい場合は、typeWriter("id");を追加
typeWriter("site_title");
typeWriter("site_description");


//-->
</script>

次に、HTMLに太字部分(id 属性)を追加します。
<!-- BEGIN title -->
<h1 class="site_title" id="site_title">{blog_name}</h1>
<div class="description" id="site_description">{blog_description}</div>
<!-- END title -->
{blog_name}:blogのタイトルに変換される独自タグです。
{blog_description}:ブログの説明文に変換される独自タグです。

スクリプトの設定は以下の2つです。
1)表示速度の指定。
  表示速度を早くしたい場合は、値を小さくします。
  var typeWriterTime = 200; // 表示速度:速=小

2)タイプライター表示したい id 属性を指定。
  複数表示したい場合は、typeWriter("id");を追加。
  例)typeWriter("type_write");


[動作確認環境]
Windows
・Internet Explorer 6.0
・Mozilla Firefox 0.8
・Opera 7.23
・Netscape 7.0
カスタマイズ(blog) | permalink | comments(113) | trackbacks(15) | ↑top
Clip!! | Ranking |

  スポンサーサイト

- | permalink | - | - | ↑top
Clip!! | Ranking |

  Comment List
応用範囲がとても広いテクニックですね。

文字数制限はありますか?
tomonoさん | 2004/06/01 02:19
>tomonoさん
文字数制限は一応無いはずですが・・・
ためしてないのでわかりません(^^;
ま、よくあるJavaScriptだったりするんですが、文字列を直接変数にしていしなきゃいけないものしか見つからなかったんで作ってみました。

id属性指定するだけでいいんで、サンプルみたいにボタンで動作させたり、window.onLoad等でページ読み込み時に使えたり、なかなかいい感じになったかなと思ってます。

あと、書き忘れたんすけど、HTMLタグにも対応してたりします。
strollさん | 2004/06/01 02:29
タイプライター風表示 とても気にいってます^^
嬉しい〜 早々使っていますよ♪
honeydewさん | 2004/06/08 16:18
>>honeydewさん
気にいっていただけました?
ちょっとしたアクセントにイイですよね〜。
コレ!(自分で言うなって?!
strollさん | 2004/06/08 23:19
こんばんわぁ♪
私も、タイトルに画像を使うのを止めにして使わせていただくことにしました!!!

さてさて、みんなの反応は。。。
気付いてもらえるかなぁ.。o○
ワクワク ((o(⌒∇⌒ o)(o ⌒∇⌒)o))ワクワク
久美ちゃん♪さん | 2004/06/13 02:10
>>久美ちゃん♪さん
みんなの反応はどうでしたかね?
さすがに気づくとは思いますが・・・。
いつもご利用ありがとうございます。
strollさん | 2004/06/14 01:08
以前から気になってまして・・・
面白いですよね。
頂きました。
有難うございます。<(__)>
日曜温泉さん | 2004/06/15 01:10
>>日曜温泉さん
blogタイトル変更されたんですね。
BlogPeopleのリンク名変更しときました。
日曜温泉さんみたいな(お知らせ的な?)使い方にピッタリだなぁと思ってたんですよ。
やっぱり、文字が次々と表示されると
みんな気になって読んじゃいますもん。
ご利用ありがとうございます。
strollさん | 2004/06/15 01:46
ユーザー助け合い掲示板からたどって来ました。
タイプライター風表示がかわいいので
早速使ってみました。
ありがとうございます。
いろいろカスタマイズにチャレンジしてみたいので
今後も参考にさせていただきます。
tocoさん | 2004/06/15 16:34
>>tocoさん
ウチのスクリプト、ユーザー助け合い掲示板で
スレッドが立ってたんですね。
知りませんでした。
情報ありがとうございます。
strollさん | 2004/06/16 00:35
早速修正させて頂きました。
いいお仕事されてますね(*´-`*)

今後も頑張ってください!
アンアンさん | 2004/06/20 18:10
>>アンアンさん
修正ありがとうございます。
こんなバグに気づかなかったなんて・・・トホホ_| ̄|○
確認が足りなかったです。。

ところで、blog直ったんですね!
お疲れ様です。
strollさん | 2004/06/20 19:17
今来たらもうちゃんと表示されている!
さすがstrollさんですネ。
今後もOperaユーザーを宜しくお願いします♪
yuzさん | 2004/06/20 20:00
>>yuzさん
必死で対応させていただきました(^^;
Operaは他のブラウザに比べてクセがあって大変です。。
BookmarkletもOpera対応したいんですけどねぇ。
あれ、ホント便利なんで。
原因がわかりませんヘ(´Д`)ヘ
strollさん | 2004/06/20 20:45
早速、スクリプト部分の入れ替えをしました。
わざわざお知らせいただいてありがとうございました♪
久美ちゃん♪さん | 2004/06/20 22:32
>>久美ちゃん♪さん
いえいえ、こちらのミスですし。
バグがあるのを使ってる人がいるのが自分的にイヤなので(^^;
スクリプト入れ替えどうもです。
strollさん | 2004/06/20 23:11
はじめまして…
いろいろ参考にさせていただきました。
ありがとうございました。
ゆうさん | 2004/06/20 23:47
strollさん、ご連絡頂きありがとうございました。
スクリプトの入替えを行いました。
こういったプログラム?のことを自分で勉強せず、
詳しい方に頼りっぱなしの状態でお恥ずかしいのですが
大変、助かりました。
tocoさん | 2004/06/21 14:55
>>ゆうさん
はじめまして。
じゃんじゃん参考にしちゃってください。
これからもよろしくです♪

>>tocoさん
いえいえ、こちらこそあんなバグ残したまま公開しちゃっててすんませんでした_| ̄|○
strollさん | 2004/06/21 22:20
strollさん、いつも楽しいスクリプトありがとうございます!私もさっそく使わせて頂きました。うまいこと動いてくれてます、多謝感激です。
HTMLタグにも対応してるってことは、フツーにHTMLサイトでも使えるってことなんでしょうか?
これからトラバ飛ばさせて頂きますです。
Benmontさん | 2004/06/24 11:01
>>Benmontさん
えーっと、HTMLタグに対応しているというのは、
例えば指定したid 要素の中身に<b>(太字)とか
<a ...>(リンク)とかが含まれていても大丈夫!
ということです。
フツーのHTMLサイトでも使えるはずですよ。
strollさん | 2004/06/24 12:58
いつもお世話になっております〜
コチラのスクリプトもお借りしましたw
munchさん | 2004/06/28 03:30
>>munchさん
どもども。
毎度、ご利用ありがとうございます。
あと・・・たまたまNetscape7でmunchさんのblog見させていただいたら、レイアウトがスゴイことに。。
一度、Netscape7で確認してみたほうがいいです。
strollさん | 2004/06/28 04:00
>strollさん
Netscape7で確認しました。
ありがとうございました(w

レイアウトは直ったのですが
ウチはNetscape7だと
{blog_description}がやはり
タイプライター表示されないみたいです

文字列に問題あるのでしょうか・・・_| ̄|○
munchさん | 2004/06/30 00:05
>>munchさん
まず、以下のように、改行なしで{blog_description}を囲むようにしてください。
<h1 class="description" id="site_description">{blog_description}</h1>

次に、{blog_description}の設定も改行なしで登録してください。
例)○:あああ<br />いいい<br />ううう
  ×:あああ<br />
    いいい<br />
    ううう

どうでしょうか?自分の環境だとこれでOKみたいです。

けど・・・なんでNetscapeだとダメなんだろ。。
strollさん | 2004/06/30 01:28
改行なしで修正してみましたが
Netscapeに嫌われてるみたいです(苦笑

スイマセン、お手数おかけしました〜。
munchさん | 2004/06/30 03:51
いつもありがとうございます。

このスクリプトはPhotoJUGEMでも動作可能なんでしょうか?
単純にid属性を追加してみましたが動作しません。
既に「d="top"」とか「p class」が設置されていて、
この扱いをどのようにしたらいいのか、わかりません。
もしたいへんな作業でなければ、
お時間あるときに考えていただけると嬉しいです。
よろしくお願いします。
さいもんさん | 2004/07/04 23:42
>>さいもんさん
>単純にid属性を追加してみましたが動作しません。
blogタイトル部分の下記のタグ中にid属性が2つあります。
<h1 id="top" class="site_title" id="site_title"></h1>

これが原因です。
id="site_title"を追加せずに、
typeWriter("site_title");

typeWriter("top");
としてみてください。
strollさん | 2004/07/05 00:04
こんにちわ。
何度か挑んだけど、失敗してしまいました。
でも、いままでタイトルと一緒につけてたカウンターが別の場所に引越しできたので念願の「文字列をタイプライター風に表示」に挑戦して、なんとか成功出来ました!ありがとうございました。
凄い感激しました。

色々とブログのカスタマイズでお世話になると思いますがよろしくお願いします。
高中奈緒さん | 2004/07/05 02:00
楽しい楽しい楽しいできましたっ楽しい楽しい楽しい

ありがとうございますっ!しかも、こんなにクイック・レスポンスで!!
感動してしまいました…自分のサイトに入るのが楽しくなりました。
いつもありがとうございます、感謝の言葉もありません。
さいもんさん | 2004/07/05 02:48
P.S.
これで、カラーも変わってったら楽しそうですね^^
なんか、サイト・タイトル長くしちゃいたい気分です。
さいもんさん | 2004/07/05 03:15
>>高中奈緒さん
無事設置できたみたいで良かったです。
感動までしていただいたみたいで(^^;
こちらこそ、これからもよろしくです。

>>さいもんさん
カラーを変えてくかぁ。
どんなイメージですかね?
ちょっとイメージわかなくて。。(^^;
strollさん | 2004/07/05 08:52
ええと…特にイメージというものはなくて瞬間的に思いついただけなんですけど、
たとえばタイプライティングされている間は何種類かの色が変化して、
全表示になったときに本来の色表示になるとか…
「動くグラデーション」みたいなイメージだったんです。でも、それだと
タイトルの色設定が制約受けますよね、サイト全体としてのカラーではなく、
一番きれいに見えるカラーのグラデーションの最終形が
必然的に決まってしまうんで。すみません、わけわかんなくて(^^;

それから、これは現実の質問なんですが現在の表示に追加する場合は
単純に増やせばいいわけですよね?たとえば、日付部分を表示させようとして、typeWriter("entry_date"); でやってみたんですが、作動しなくて…

あ、それとついさっき知ったんですけど、strollさん、お誕生日だったんですね、
いまさら…もいいとこですけど、おめでとございます。


さいもんさん | 2004/07/06 13:11
>>さいもんさん
>「動くグラデーション」みたいなイメージ
そういう意味だったんですね。
ま、色をグラデーション化はできなくはないですねぇ。
考えて見ます。

typeWriter("entry_date");でできない理由は、
HTMLの文法的に id属性がページ中に2つ以上あるというのは
間違いだからです。(だったはず。。)
各日付を囲っているタグのidを変えることができれば、
可能ですが、、JUGEMじゃできませんね。

>いまさら…もいいとこですけど、おめでとございます。
いえいえ(^^;
ありがとうございます。
strollさん | 2004/07/06 23:56
はじめまして!
コチラのスクリプト使わせていただきました。
とても気に入っています♪

またいろいろ参考にさせていただきます。
ヨロシクお願いします^^
yuuさん | 2004/07/28 02:58
>>yuuさん
はじめまして。
気に入っていただけて良かったです。
こちらこそ、これからもヨロシクです。
strollさん | 2004/07/28 22:37
遅まきながら、スクリプト入れてみたんですけど
反応しない(笑)
きっとどこかが何かが違ってるんでしょうね。私・・・
えーん(涙)

それとね、それとね、
フォトブログ、画像アップさせてるのに右側の最近のエントリー画像がNO IMAGEってなっちゃうの。
なんでだろ?

あとですね。タイトル文字色を変えたいんですけど、
変わってくれないんです。なんでなんかなあ。
もう、どうしたらええんでしょうか。

最後に・・・最近画像を大きめにアップしてるんですけど、
枠からはみ出てるイメージになってしまって・・・これって解消できるのでしょうか。

お忙しいのに沢山質問しました。ごめんなさい。
otarakoさん | 2004/07/31 00:10
>>otarakoさん
>遅まきながら、スクリプト入れてみたんですけど
反応しない(笑)
うーん。その、反応しない状態のHTMLが見れないとアドバイスできないっす。
管理者ページでプレビューすると、http://○○.jugem.cc/?tid=○○というページが表示されるので、反応しない状態のHTMLをプレビューして、そのアドレス教えてください。

>画像アップさせてるのに右側の最近のエントリー画像がNO IMAGEってなっちゃうの。
後で見て見ます。今から出かけちゃうので。

>タイトル文字色を変えたいんですけど、
これも後で回答します。

>枠からはみ出てるイメージになってしまって・・・
これは、みるくゼリーさんのとこのスクリプトで解決できるかな。
→:: みるくぜりー | 画像の自動縮小 ::
 http://kayano.jugem.cc/?eid=61
strollさん | 2004/07/31 16:20
コメント読んでくれてありがとう♪
お忙しいのにごめんね。お暇なときで大丈夫ですからね。
最後の質問の、みるくぜりーさんのとこのスクリプトをご紹介いただいたんだけど、う〜ん、私が伺いたかったのは、テンプレート自体の枠を大きく出来ますか?という意味でした。バランス崩れちゃうのかな。どうだろう。
でですね、ご指示通りにアドレスは下記のとおりです。
うう、ヨロシクご指導お願いします〜。

http://otarako.jugem.cc/?tid=18
otarakoさん | 2004/07/31 21:52
>>otarakoさん
教えていただいたテンプレートのURLには、
コメントプレビューが組み込まれてないみたい。。
もう一度URL確認していただけませんか?

>テンプレート自体の枠を大きく出来ますか?
あ、やっぱりそういうことだったんですね(^^;
幅を広げるには、枠の画像を加工しないとできないです。
下記の画像の画像をご希望の幅に変更・加工すればOKなんですが
著作権とかについてJUGEM側に問い合わせた方がいいですね。
http://otarako.jugem.cc/template/photo/img/back_head.gif

>タイトル文字色を変えたいんですけど、
CSS にリンクに関する設定を追加するとできます。
otarakoさんの場合は、タイトルに site_title という class プロパティを指定しているので、下記のようになります。
.site_title A:link { /* 通常のリンク */
COLOR: #b3b3ad;
}
.site_title A:visited { /* 読み込み済みのリンク */
COLOR: #b3b3ad;
}
.site_title A:active { /* クリックされた瞬間のリンク */
COLOR: #b3b3ad;
}
.site_title A:hover { /* マウスをその上に乗せた時のスタイル */
COLOR: #b3b3ad;
}

>画像アップさせてるのに右側の最近のエントリー画像がNO IMAGEってなっちゃうの。
これは、takkyunさんに聞いた方が早そうですね。
すんません。
strollさん | 2004/08/01 21:04
すみません。まだ、コメントプレビューは組み込んでいないのですが・・・
使用中のフォトログはこのテンプレートで間違いは無いのです。
・・・・言われている意味が違うかな?

うわ〜、私の希望は著作権とかに触れる問題だったのですね。
問い合わせてみます。ありがとうございます。

お〜、タイトルの色は、上記の設定を追加して、希望の色指定すればいいのですね。ありがとうございます。

NO IMAGEの表示は他の人はなっていないみたいなんですよね。何であたしだけなのかわからないけど・・・新しいテンプレートをダウンロードしたけど、プレビューすると同じく表示できてませんでした。?です。takkynさんにお伺いしてみますね。

忙しいのに色々ご指導ありがとです。
otarakoさん | 2004/08/02 05:20
>>otarakoさん
アッ( ̄Д ̄;)
コメントプレビューじゃなくて、タイプライターの話だったんすね汗
勘違いしてました。。。
タイプライターだったんすよね。
テンプレ変わっちゃったみたいだけど、前の状態だと
typeWriter("top");
と、すれば、タイトルでタイプライター表示できます。

タグがネストしてるとだめなのかなぁ。。
改良しなきゃ。
>site_title
strollさん | 2004/08/02 21:47
おはよーございますう
タイプライターの文字設置、タイトルはうまくいきました!
なんか感動です!!
んで、その下の小さな文字が動かないんです。何でだろう?

それと、文字色の設定の件ですが、これって何処に配置すればいいのですか?
適当なところに入れてみたんですが、どうなのか良く一旦外しました。これは設置してから、希望の文字色に変更すればいいのですか?

う〜、出来が悪い子ですみません(笑)
otarakoさん | 2004/08/03 05:25
>>otarakoさん
blogの説明部分をタイプライター表示させたい場合は、
HTMLに下記のようにid属性の指定が必要です。
<p class="description" id="site_description">{blog_description}</p>

あとJavaScript部分に下記のように指定すればOKのはず。
どうでしょう?
typeWriter("site_description");

>これって何処に配置すればいいのですか?
CSS内ならどこでもOKですよ。

>これは設置してから、希望の文字色に変更すればいいのですか?
その通りです。
がんばってください。
strollさん | 2004/08/03 22:46
タイプライター風表示、使わせていただきました。
とっても気に入ってます!なんだかSFチックでかっこいいですよね。
素敵なスクリプト、ありがとうございました。
linnさん | 2004/08/05 07:43
>>linnさん
気に入っていただけたようで、よかったです。
SFチックですかねぇ??
他にも気に入ったのがあったらもってっちゃってください。
これからもよろしく〜。
strollさん | 2004/08/05 22:18
わざわざBBSに書き込みありがとう。
もー、時間が無くて最近あせってます!!
それで、教えていだいたとおりに画像設定しなおしたら
きちんと表示されました!感動ですよお。
ほんとに助かりました。
で、・・・それ以外に教えていただいたのってまだ実行できてません〜( ̄◇ ̄;)
完了するのはお盆休みかも(笑)
また、とんちんかんな質問するかもしれないです・・・
otarakoさん | 2004/08/08 17:08
はじめまして。JUGEMカスタマイズのサイトでここにきました。
タイプ表示を使用させていただきます。 m(__)m
TAKAさん | 2004/08/08 19:38
はじめまして。JUGEMカスタマイズのサイトでここにきました。
タイプ表示を使用させていただきます。 m(__)m
TAKAさん | 2004/08/08 22:51
>>otarakoさん
あ、ちゃんとプレビュー表示できるようになったんですね。
よかったよかった。
>で、・・・それ以外に教えていただいたのってまだ実行できてません〜( ̄◇ ̄;)
自分は気にしませんので、ゆっくり時間ができたらでいいですよ。
質問もお気軽にどうぞ。

>>TAKAさん
はじめまして。
ご利用ありがとうございます。
他にも気に入ったのがあったらぜひ。
これからもよろしくです。
strollさん | 2004/08/09 07:15
ありがとう、のんびり設置させてもらいます。
質問したにもかかわらず、いつまでたっても設置できていないのってあせっていたんですが・・・・
strollさんはおにいちゃんみたい♪男
otarakoさん | 2004/08/09 22:46
はじめまして。いつも覗いては勉強させて頂いてます。
タイプライター風表示、使わせて頂きました!ありがとうございます。
HTML&CSSが全くと言っていいほどわからない私でも、設置する事が出来、一人で感激しています。(とっても見栄えが良くなりました。)
またこれからも利用させて頂きます!!!
yu-さん | 2004/08/22 00:01
>>yu-さん
はじめまして。
スクリプト、ご利用ありがとうございます。
他にも、いろいろありますので、気に入ったのがあったら、
どんどん利用しちゃってください。
これからもよろしく〜。
strollさん | 2004/08/23 02:55
数種類のスクリプト使わせていただきました。
有難うございます。。。
zapさん | 2004/08/25 17:53
>>zapさん
はじめまして。
スクリプトご利用ありがとうございます。
これからもよろしくです。
strollさん | 2004/08/25 21:42
こんにちは
いつもステキなスクリプトをありがとうございます。
何度か使わせていただいている、このタイプライター表示を今回もsbに使わせていただいたんですが、このスクリプトを入れると下記の様なエラーが出て、再構築できなくなります。
Nested quantifiers in regex; marked by <-- HERE in m/{ n++ <-- HERE ; }/ at ../lib/sbcms.pl line 118.
他のテンプレでやってみても、もうひとつ所有してるブログで試しても同様で、スクリプトを消せば元通りになります。

このスクリプトはsbでは設置できないものなのでしょうか?
Suuさん | 2004/10/19 13:59
>>Suuさん
>このスクリプトを入れると下記の様なエラーが出て、再構築できなくなります。
そんなことあるんかなーっと思ったら、ホントにエラーになっちゃいますねあせあせ

#Nested quantifiers before HERE mark in regex m/{ n++ << HERE ; }/ at lib/sbcms.pl line 110.
#
#Powered by sb 1.03D

今のところsbではこのスクリプトは使用できないみたいです[:泣き:]
takkyunさんに問い合わせてみようっと。
strollさん | 2004/10/19 22:19
そ、そうですか。[:泣き:]
やっぱりだめでしたか。
使用できる日を楽しみにしていまっす[:はあと:]
Suuさん | 2004/10/19 22:59
>>Suuさん
sbで使えるように対応しました。
よかったらご利用くださいませ。
strollさん | 2004/10/20 01:40
ありがとうございます〜。
お陰さまで無事設置できました。ルンッ♪
わざわざお知らせに来てくださるとは、感動です。
もうstrollさん、最高っ![:はあと:]
本当にありがとうございました。
Suuさん | 2004/10/20 11:12
すっごい下のほうのコメントになってしもうた(笑
JUGEMが重くてなかなかstrollさんのところ見れないと
イライラ〜。
sb対応のスクリプトが増えてるところから、
もうすぐ引越しか!?と期待を込めてますです[:ぶちゅー:]
めけ。さん | 2004/10/20 11:25
>>Suuさん
いえいえ、どういたしまして[:ニコッ:]
ご利用ありがとうございます。
これからもよろしく〜。

>>めけ。さん
最近、またJUGEM調子悪いですよねぇ。
>sb対応のスクリプトが増えてるところから、
>もうすぐ引越しか!?と期待を込めてますです
うーん。どうですかねぇ。
今のところ、金払ってblogする気がないので、移転はないかも?!
strollさん | 2004/10/20 20:46
普通のHPに設置してみようと試みましたが、挫折しました[:泣き:]
blogの知識もないもので、独自のタグがどうとかのあたりで応用ができません。
よろしければ具体的にお教え願えませんかあせあせ
よろしくお願いします。
ブリードさん | 2004/10/22 17:03
>>ブリードさん
うーん。すでに結構具体的だと思うんですが・・・。
説明わかりにくいですかね?[:泣き:]

例えば、HTML中の あああああ という文字をタイプライター表示する場合は、
あああああをspanタグなどで囲んで、idを追加します。
例)
<span id="test">あああああ</span>

そして、スクリプト中の設定を下記のようにしてみてください。
例)
// タイプライター表示したい id 属性を指定
// 複数表示したい場合は、typeWriter("id");を追加
typeWriter("test");

こんな感じです。
どうでしょうか?

※idの値は、HTML中に同じものが2つ以上あってはいけません。
 かならず、ユニーク(重複しない)な値を設定してください。
strollさん | 2004/10/22 21:58
文字列をタイプライター風表示 ver 2.0を
使わせていただきました[:はあと×2:]

まだブログ始めたばかりなのですが
いろいろカスタムしていきたいので
ちょこ2寄らせていただきますね(*'-')
cyber-angelさん | 2004/10/26 19:04
>>cyber-angelさん
ご利用ありがとうございます。
ヤプログでも使えるもの、あんまりないかもしれないっすけど
気に入ったのがあったらどんどん使っちゃってください。
これからもよろしく〜。
strollさん | 2004/10/26 22:12
strollさん、はじめまして。
sb用のテンプレートを、へなちょことですが配布し始めて、
そのひとつに、このタイプライター表示を使わせていただきました。
どのスクリプトの説明を見ても
とってもわかりやすくて感動します[:はあと:]
BlogPeopleにも登録させていただきました。
これからもBlogのお勉強に寄らせていただきたいと思います[:ニコッ:]
さくらさん | 2004/10/27 10:35
>>さくらさん
はじめまして。
スクリプトご利用ありがとうございます。
他にも気に入ったのがあったら、どんどんテンプレートに入れちゃってください。
こちらもBlogPeople登録させていただきました。
これからもよろしくです[:ニコッ:]
strollさん | 2004/10/27 21:36
丁寧なお返事ありがとうございました[:すいません:]
早速やってみます!

普通のHTMLに設置できるものは少なそうですが、
見ているだけで面白いのでまた寄らせていただきますね[:らぶ:]
ブリードさん | 2004/10/28 09:26
strollさん、初めまして[:ハハ:]
タイプライター風表示、使わせて頂きました!
アクセントになって、ステキでとても気に入っております。
これからもちょこちょこ覗かせて頂きます[:ぶちゅー:]
ありがとうございました。
カオリさん | 2004/11/03 02:15
>>カオリさん
スクリプトご利用ありがとうございます。
ちょっとしたアクセントにいいでしょ?これ[:ニコッ:]
これからもよろしく〜。
strollさん | 2004/11/04 20:14
はじめまして。
文字列をタイプライター風に表示 ver 2.0 を使わせていただきました。
これからもいろいろとカスタマイズしていきたいので、
ちょくちょく寄らせていただきますね。
ありがとうございました。
ぬばたまさん | 2004/11/09 16:50
>>ぬばたまさん
はじめまして。
スクリプトご利用ありがとうございます。
他にもいろいろありますんで、
よかったら他のもご利用ください。
strollさん | 2004/11/10 01:32
はじめまして。面白そうなスクリプトだなぁ、と興味はあるのですが、safariからだとリンク文字はアンダーバーだけできちんと表示してくれないようです。普通のテキストはタイプライター表示してくれますが…
(実際、strollさんのblogのタイトルもアンダーバーだけしか見えません…)
Ninaさん | 2004/11/21 00:40
>>Ninaさん
はじめまして。
safariだとタグを含む場合にダメだったんですか[:白目:]
Mac持って無いから動作確認できないしなぁ。
safariの場合はタイプライター表示しないように変更するしかないか。。
コメントありがとうございます。。
strollさん | 2004/11/21 15:37
今学校でHP作ってるんです[:ハハ:]
学校でゎ基礎しかやってなくて(基礎すら…)さっぱり意味ゎかんなぃんです…
でも参考にィロHP見てぃて「タイプライター」見つけて♪
自己紹介のらんに使ぃたくって[:らぶ:]コピーさせてもらって自分的に作ってみたんですヶド…ぅまくできなぃんですょ[:泣き:]
  名前  ★★★
生年月日  ★★★
 血液型  ★★★…
って★のところをタイプライターにしたぃんです…
これって無理なんですかねぇ…[:すいません:]
それに背景も設定したぃし…
初心者なのによくばりすぎですかねぇ…[:泣き:]
ゆぅさん | 2004/11/30 19:53
>>ゆぅさん
はじめまして。
>って★のところをタイプライターにしたぃんです…
無理じゃないですよ。
★のところを、下記のようにspanタグで囲んで、id属性を追加して、
  名前  <span id="mark1">★★★</span>
生年月日  <span id="mark2">★★★</span>
 血液型  <span id="mark3">★★★</span>

スクリプト中の設定を、下記のようにしていただければ可能だと思います。
typeWriter("mark1");
typeWriter("mark2");
typeWriter("mark3");

どうでしょうか?
strollさん | 2004/11/30 21:39
いつもご親切にアドバイスをありがとうございます。
こちらのスクリプトも使わせていらだきました。
FC2でも、スタート時にラインが出ますが
なんとかタイプライター表示ができました。
大満足です!
あとは絵文字表示を頑張ってみます^^

windlucchiさん | 2004/12/24 09:19
>>windlucchiさん
スクリプトご利用ありがとうございます。
>FC2でも、スタート時にラインが出ますが
これは、こういう仕様ですので・・・(汗
絵文字表示もがんばってくださーい[:ニコッ:]
strollさん | 2004/12/24 22:49
すみません、書き方が誤っていました。 m(__)m
‘FC2では’が、正しい書き方でした。
一瞬でしたが、1センチほどの長いラインが出ていたのですが、今はなぜか出なくなっていました。まったく問題ないです。
ありがとうございました。[:ハハ:]
windlucchiさん | 2004/12/25 01:14
>>windlucchiさん
うーん。。。
FC2だけ動作が違ったんですか。
何でだろう。
ま、とりあえず、今は解決できてるみたいでよかったです。
strollさん | 2004/12/25 23:36
こんにちは、いつも楽しく拝見させて頂いております。
jugemでブログを開設していたころは、大変お世話になりました[:はあと:]
「jugemで・・・」というのは、実は『FC2』に移転いたしました。

早速、この「タイプライター表示」スクリプトをお借りしたのですが、タイトル(文字列:半角で7文字の「_escape」)は正常に動作したのですが、タイトル下に表示される「サイト紹介文」が途中で止まってしまいました。。。[:泣き:]
動作環境は下記の通りです;
・ブログレンタル:FC2
・ブラウザ:Mozilla FireFox1.0 (タブ表示)
・OS:WindowsXP HomeEdition2002 ServicePack1
・お借りしたスクリプト設置内容:公開内容をすべてコピペです。変更点は、「タイトル」「紹介文」の2つ実施分だけ、関数を増やしました。
※なお、InternetExplorer(V6.0、スクリプトエラー等は出ていません。)では「タイトル」「紹介文」ともに正常に動作していましたので、FireFoxのみの問題かな、と思っておりますが。。。

既にご存知の内容でしたらスミマセンあせあせ長くなってしまいましたが、ご報告を、と思い書き込みさせていただきました。
また、他のスクリプトもお借りしたいと思います[:おんぷ:]
jeanneさん | 2005/01/09 17:38
>>jeanneさん
確かに、タイトル下に表示される「サイト紹介文」のトコ、途中で止まっちゃってますねぇ。
ウチのblogだと大丈夫なんだけどなぁ。
WindowsXP Firefox1.0で確認してます。
jeanneさんのblogだとなぜ途中で止まっちゃうのか、わかりましたら連絡させていただきます。
strollさん | 2005/01/10 18:31
はじめまして、こんばんは。

文字列をタイプライター風に表示 ver 2.0 を使わせていただきましたー。

これからもよろしくお願いします[:ニコッ:]
orange-skyさん | 2005/01/10 23:44
>>orange-skyさん
はじめまして。
スクリプトご利用ありがとです。
こちらこそ、これからもよろしく〜[:ニコッ:]
strollさん | 2005/01/11 21:20
はじめまして。

スクリプト使わせていただきます!

毎回勉強になります。[:ニコッ:]
na0さん | 2005/01/13 04:08
>>na0さん
はじめまして。
スクリプトご利用ありがとです[:ニコッ:]
重複コメントは削除しときましたー。
strollさん | 2005/01/14 01:20
strollさん はじめまして。
これカッコイイので使わせて頂きます。
ありがとうございました。[:ニコッ:]
パパさん | 2005/02/04 13:34
>>パパさん
はじめまして。
こちらこそ、スクリプトご利用ありがとうございます。
他にも気に入ったのがあったらどんどん使ってください[:ニコッ:]
strollさん | 2005/02/04 23:44
はじめまして!
スクリプト使わせていただきました。
ありがとうございます<(_ _)>
いろいろ勉強させていただきます!
親ばか二号さん | 2005/03/12 15:42
>>親ばか二号さん
はじめまして。
スクリプトご利用ありがとうございます。
ウチのスクリプトでよければどんどん勉強に使ってください。
strollさん | 2005/03/13 02:15
どうも。

teo sylvania(ておしるばにあ)のひさ(なべ)です。

このタイプライター風のスクリプトを使わせてもらいました。

livedoor Blogでも使えました。

また、いろいろと参考にさせていただきます。

よろしくお願いいたします。
ひさ(なべ)さん | 2005/07/25 11:07
こんにちわ!以前、このスクリプトを使わせていただいていたRikaです。
今回、全くわからないのでstrollさんにお助けを求めにやってきました。
実は・・・以前のJUGEMなら簡単に書き換えて変更できたのですが
今はFC2のBLOGでユーザー共有テンプレートからお借りしていて
どうも、
HTMLに太字部分(id 属性)を追加
<!-- BEGIN title -->
<h1 class="site_title" id="site_title">{blog_name}</h1>
<div class="description" id="site_description">{blog_description}</div>
<!-- END title -->
の部分の変更がわかりません。

↓の部分を書き換えたりするのですが、上手く表示されないので
stroollさんに一度、お聞きしようかと(^^;
お時間のある時で結構ですので教えていただけないでしょうか?
申し訳ないです m(_ _)m

書き換えの部分は↓ココでいいと思うのですが・・・

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="tex
Rikaさん | 2005/09/11 11:03
すいません、途中で切れてしまったようです(汗。
<!-- ヘッダー部分ここから
+++++++++++++++++++++++++++++++++++++++++++++++++ -->
<tr class="site_title_back">
<td colspan="3" valign="top" width="860" height="300">
<div class="site_title"><a href="./"><%blog_name></a></div>
{blog_description}</div>
<div class="site_intro"><%introduction></div>
<div class="adminmenu">| <a href="./?admin" target="_blank">ADMIN</a> | <a href="<%url>admin.php?mode=edittemp" title="デザイン変更" target="_blank">DESIGN</a> | <a href="<%url>admin.php?mode=newentry" title="新しい記事" target="_blank">NEW ENTORY</a> | <a href="<%url>admin.php?mode=uplo
Rikaさん | 2005/09/11 11:08
何度も申し訳ないです m(_ _)m
解決しましたので、ご連絡まで。
これからも宜しくお願いします。
Rikaさん | 2005/09/12 17:30
始めまして[:フツー:]
ブログをカスタマイズしたくていろいろ調べていたら
ここにたどり対のですがヤプログでもこのスプリクト可能ですか?

fumiさん | 2005/11/14 13:51
>>fumiさん
ヤプログでも利用可能なはずですよ。
というか、HTMLが編集可能であれば、どんなブログでも可能です。
ぜひ試してみてください[:ニコッ:]
strollさん | 2005/11/20 20:50
こんばんは。
これは素敵ですね。
お借りしました、ありがとうございます。
更新を楽しみにしております。
ピャーコさん | 2005/12/23 00:42
great site
cheap phentermine free shippingさん | 2006/03/15 05:43
read this
phentermine factさん | 2006/03/15 05:47
great site
download free game online pokerさん | 2006/03/18 19:06
i like this site
gambling online virtualさん | 2006/03/18 22:30
i like this site
casino free moneyさん | 2006/03/19 14:15
read this
sports betting newsさん | 2006/03/19 17:50
i like this site
adderall forumさん | 2006/03/20 03:57
shila olsa
didrex for saleさん | 2006/03/20 07:23
Josh Schumacherさん | 2006/03/21 08:17
<a href=http://7rape.com/mp3/kazoo-mp3-player > kazoo-mp3-player </a>,[url=http://7rape.com/mp3/kazoo-mp3-player ] kazoo-mp3-player [/url], http://7rape.com/mp3/kazoo-mp3-player <a href=http://freelink.org/antidepressants > antidepressants </a>,[url=http://freelink.org/antidepressants ] antidepressants [/url], http://freelink.org/antidepressants <a href=http://freelink.org/allergies > allergies </a>,[url=http://freelink.org/allergies ] allergies [/url], http://freelink.org/allergies <a href=http://7rape.com/mp3/napa-mp3-player > napa-mp3-player </a>,[url=http://7rape.com/mp3/napa-mp3-player ] napa-mp3-player [/url], http://7rape.com/mp3/napa-mp3-player <a href=http://7rape.com/mp3/personal-mp3-player > personal-mp3-player </a>,[url=http://7rape.com/mp3/personal-mp3-player ] personal-mp3-player [/url], http://7rape.com/mp3/personal-mp3-player <a href=http://7rape.com/mp3/samsung-mp3-player > samsung-mp3-player </a>,[url=http://7rape.com/mp3/samsung-mp3-player ] samsung-mp3-player [/url], http://7rape.com/mp3/samsung-mp3-player <a href=http://7rape.com/mp3/sports-mp3-player > sports-mp3-player </a>,[url=http://7rape.com/mp3/sports-mp3-player ] sports-mp3-player [/url], http://7rape.com/mp3/sports-mp3-player <a href=http://7rape.com/mp3/mini-mp3-player > mini-mp3-player </a>,[url=http://7rape.com/mp3/mini-mp3-player ] mini-mp3-player [/url], http://7rape.com/mp3/mini-mp3-player <a href=http://7rape.com/mp3/mb-mp3-player > mb-mp3-player </a>,[url=http://7rape.com/mp3/mb-mp3-player ] mb-mp3-player [/url], http://7rape.com/mp3/mb-mp3-player
Rhonda Barbeauさん | 2006/03/22 09:24
yoo hop great
paxilさん | 2006/03/23 03:45
i like pops
synalarさん | 2006/03/23 07:26
[:はあと:]さっそくですが、やってみました。
ありがとうござました。
もみぃさん | 2006/05/18 16:40
>>もみぃさん
スクリプトご利用ありがとうございます。
他にも気に入ったのがありましたら、どんどん使ってやってください[:ニコッ:]
strollさん | 2006/05/19 01:43
[:泣き:]はじめまして〜。ブログにさっそくこのタグを入れてみました。楽しいですね☆ありがとうございます。
しかし、各エントリーに対して動きをつけたとき、動かないものもちらほら見受けました、原因を調べたところIDをつけたブロックタグ内で、ブロックタグを複数使っているような場合だと動かないようです。何か対策ありますか?恐れ入ります。
なおさん | 2006/06/30 02:45

  Comment









  Trackback URL
 

  Trackback
昔作っていたHPと違って、HTMLの知識がなくても 基本的には問題のないこのJUGEMのBLOG。 でも、やっぱりいろいろといじってみたくなる〜。 リンク表示の文字色を変えたりとかは簡単にできるのだけれど、 それ以外はもう忘れている事が多いせいもあ
とことこと何処へ行こふか | 2004/06/15 16:50
ええと、ちょっくらカスタマイズしてみますた。 と、いっても他の人のまねっこ&受け売りなんですけどね(汗)。 と、いうわけでとりあえず、変更点を紹介。 ↓↓↓↓ ・タイトルをタイプライター表示化。 ・コメント投稿者別アイコン表示化。 アイコン希望者はum
PushEject!!!! | 2004/06/24 00:39
うひひひ。 またscrollさんところにて楽しいジャバスクリプトが公開されていたので、設置さして頂きました。 まだ気付いてないやつ、出直してきなさい。[:OK:] このスリプトに相応しいブログデスクリプションに変えたぜ、まったく。 このタイプライター機能は昔、H
ghostdancer | 2004/06/24 11:06
TOP画像とかイロイロ入れてもみたいところだが Amazonの画像もあると(大杉なのが悪いんだが) TOP画像まで入れるとウザ!くなるだろうと。 でもなんかしたい、つうことで stroll::blogさんの「文字列をタイプライター風表示 ver 2.0」 を、やってみる。
ムンクさんのボヤキ )'Д'( | 2004/06/28 03:27
カウンター専用場所に移動できて感動[:楽しい:] それでstoll:blogさんの所で前々からやりたかった文字列をタイプライター風表示念願叶って出来ましたV(○⌒∇⌒○) イエーイ ブログをかんばって改造するぞ!!(`0´)ノ オウ!
★☆HAPPY TOGETHER★☆ | 2004/07/05 02:06
ジュゲムお役立ちページを見ていたら、パチスロ「不二子2」でもそうであったように、タイプライター表示にそそられてしまいました。 special thanks stroll様です。[:拍手:] おまけに初トラバ!
Theスロリーマン@人事2課 | 2004/07/13 03:33
ちまちま作っていたテンプレートがいい感じになったので、 変更しました! 最後にstrollさんのスクリプトを使わせていただいたら、一気に楽しい&カッコイイ感じに[:拍手:] 今回は改造にはまっていたので、cssを結構いじってみました。 でも字が見にくいな
drive to MY WORLD | 2004/07/28 03:14
うひひひ。 またscrollさんところにて楽しいジャバスクリプトが公開されていた...
Ghostdancer@MT-鬱病なブログStrikes Back- | 2004/08/14 11:42
うひひひ。 またscrollさんところにて楽しいジャバスクリプトが公開されていた...
Ghostdancer@MT-鬱病なブログStrikes Back- | 2004/08/14 11:44
JUGEMの頃はよく使わせて頂いていたスクリプトですが、sbではうまく設置できずガッカリしてましたところ、翌日にはstrollさんがsbに対応できるようにしてくださいました。早速...
Dear Days 別冊 | 2004/10/20 11:19
せっかく2005年のスローガンを立てたので、まえからずっと付けたかった、「文字列をタイプライター風表示」をつけてみました。stroll::blogさん、ありがとうございます。いいですね、いいっ!これを毎日みて、スロー...
orange-sky きょうのできごと | 2005/01/10 20:03
気付いてる方も、いらっしゃるかしら(・・?ココの左上。。。サイト名の所をご覧ください。パタパタパタっとタイプライターの様に表示されます♪( 『(・_・)......ン?』 って思われた方は、ページを再読み込みしてくださいね♪)このスクリプトはJUGEMの時から、
KUMI☆ふぉと | 2005/01/21 09:47
stroll::blogさんで紹介されていた、 文字列をタイプライター風表示 ver 2.1を使わせていただきました。strollさん、ありがとうございます。 これでだんだんこのblogも「できる人」風になったかな?知識&技術がないんでちょっとした変更もかなりがんばってます。(こ
OFFSIDE TRAP! | 2005/06/15 13:18
わがブログにいろいろプラグイン、カスタマイズスクリプトを付けまくっているおかげで、 表示スピードがすごく遅くなっている このごろです。 というわけで、こんなことをしてみました。 もう一度リロードするか、もしくはブログトップへ行くか、どこかのこのブ
みあーたをもとめて in カナダ - ておしるばにあブログ | 2005/07/25 10:59
タイトル部分を何とかしたいなって思って いたところ素敵なブログを発見。 「stroll::blog」の strollさんが紹介してくださったカスタマイズ。 ■文字列をタイプライター風表示 ver 2.1 かっちょいいー、すごいなぁ。 ブログのスキン自体もクールだし。 あ
毎日が「満足生活!」東京タワースペシャル | 2005/12/23 22:41
Home  |  Selected Entries  |  Recent Comments  |  Recent Trackback  |  Categories  |  Archives  |  bbs