JavaScript を使わないで置換する

closeこの記事は 2 年 1 ヶ月 24 日 前に投稿されたものです。間違いに気づいたらその都度修正していますが、今読んだらおかしな点もあるかもしれません。ご了承ください。
方法で、

JavaScript を使わない、簡単なやり方を見つけました\(^^)/

(と書き始めたものの、この記事は相当苦労して書きました、、、ー。ー;)



まずは、

ここをクリックしてみてください!!


(mixi に転送されたものはうまくいかないと思いますが)




参考にしたのは、「文字の置き換え」というページで、

上の仕掛けは、次のコードで書かれています。
<div onclick="this.innerHTML='ピョン ミヾ( ゚∇゚)ツ'" 
style="
text-align:right;
font-size:large;
font-weight:bold;
color:#006600;
">
<div style="
text-align:left;
font-size:large;
font-weight:bold;
color:#FF0000;
cursor:pointer;">
ここをクリックしてみてください!!</div></div>



ただし、このブログは WordPress を利用しており、

改行部分は自動で「<p>~</p>」と変換されるので、

参照サイトの「p」の部分は「div」にしました。

(「<p>」~「</p>」の中に「<p>」~「</p>」を入れることはできない。

【追記】表示はできるけど、クリックに対しては反応しない)



色の付いた部分は(mixi では色はつかないと思いますが)、

赤字がクリック前、緑字はクリック後の、

文字の色、表示位置、ポインタ形状の指定部分、



太字が(mixi では太くならないと思いますが)、

クリック前と後に表示される文字です。




また、これをブログで記述する際、

たいていは初期状態で「改行を<br>に変換する」になっているものが多いので、

上のソース表示は見やすくするために改行を入れましたが、

ブログに書く際は改行部分を半角スペースにして、1行にするとうまく行くと思います。

単純に書くと、
<div onclick="this.innerHTML='【クリック後の表示】'">【クリック前の表示】</div>
という事になりますね。




もう一回押したら元に戻す、というやり方を現在模索中ですが、

とりあえず「F5」キーを押せば戻るので、今回はこのくらいで。





さて、続きは別ページに書きましたので、

お手数ですが、

http://charlie432.fool.jp/20091220.htm

へお飛び下さればと思います。

理由は、WordPress が勝手に半角の「’」や「"」を全角の「’」「”」に変えてしまい、

表示がおかしくなってしまうからです。

結局その対処が出来ませんでした。。。。ン、ミ






 

最後までお読みくださり、有難うございました。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

関連記事かも?

  1. ブログに「(mixiに)つぶやく」ボタンを設置してみた
  2. ブログに「(mixi)日記を書く」ボタンを設置してみた
  3. Microsoft / Windows Internet Explorer 8
  4. iPhone日記(36)/ (続)iPhone からブログに画像投稿成功!!
  5. 【写真】GO MY WAY vol.2 @高円寺 Club Roots! 2010.02.26

関連記事は無いと思います。

Filed under: ★科学、技術、PCなど  タグ: , , , ,   charlie432 00:00
トラックバック

このエントリーのトラックバックURL:

コメントはまだありません »

コメントはまだありません。

コメントする





(一部のHTMLタグを使うことができます。)

    2009年12月
    « 11月   1月 »
     123456
    78910111213
    14151617181920
    21222324252627
    28293031