Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

名前変換「ドリーム小説」コード★簡単コピペでOK!ページ上で文字列を置き換えるスクリプト[ javascript ]

いつもの備忘録です(笑)
 

今日はページ上で任意の文字列を入力してもらい、元々の文字列からそっちに変更できるって言う、名前変換小説などに使えるスクリプト。

私の文章力では説明が難しいので実際に見てもらおう↓↓
テストしやすく予め名前を入れてありますが、消して好きな名前を入れてみてくださいね^-^

★名前を入力して【決定】ボタンを押してください。
主人公1
主人公2

セリヌンティウス。」メロスは眼に涙を浮べて言った。「私を殴れ。ちから一ぱいに頬を殴れ。私は、途中で一度、悪い夢を見た。君が若もし私を殴ってくれなかったら、私は君と抱擁する資格さえ無いのだ。殴れ。」  セリヌンティウスは、すべてを察した様子で首肯うなずき、刑場一ぱいに鳴り響くほど音高くメロスの右頬を殴った。殴ってから優しく微笑ほほえみ、 「メロス、私を殴れ。同じくらい音高く私の頬を殴れ。私はこの三日の間、たった一度だけ、ちらと君を疑った。生れて、はじめて君を疑った。君が私を殴ってくれなければ、私は君と抱擁できない。」  メロスは腕に唸うなりをつけてセリヌンティウスの頬を殴った。 「ありがとう、友よ。」二人同時に言い、ひしと抱き合い、それから嬉し泣きにおいおい声を放って泣いた。

 

ページ上で「CSSのコードを変更したい」っていう目的があってこのスクリプトを考えたんだけど、調べていると「名前変換小説」とか「ドリーム小説」「夢小説」と言うのが何件もヒットして、ふーん、そんなジャンルがあるのか!って。

私のやりたいこととは、ちょっと目的は違うんだけど、公開されているものはどれも複雑過ぎて、意外にも名前変換小説に使えるような「コレ!」って言う簡単なスクリプトが公開されてなかったので、ココに公開することにしました♡

 

ブログサービスによっては、スクリプトが使えない場合もあるかも知れませんが、私の使っている「はてなブログ」では、編集画面で「HTML」モードを選ぶことによって使えます!
f:id:zuboraca:20180804204954p:plain
「見たまま編集」ではなく、この↑↑「HTML」モード↑↑を選んでください。
(隣の「HTML編集」では出来ませんでした!)

スクリプトが使えるブログなら、このままコピペで使えると思います。

※なお、スクリプトが使える「はてなブログ」を使ってみたい♡って方は、わたしの経験を記した↓↓をぜひ、ご参考になさってください♪♪
【はてなブログをこれから始める方へ】PRO化、独自ドメイン、収益化、後悔から学ぶこと

名前変換1人と2人で、スクリプトは基本的には同じですが、簡単にコピペできるように2つコードを載せておきますので好きな方を使ってください。

「ここに文章を書く」と書いてある部分に小説なり、何かしらの文章を書いてください。
コードはこちらからどうぞ♡♪♪
 ↓↓

<p>★名前変換小説のコード(主人公2人)★</p>

<div style="border: 1px solid #454545; padding: 10px;">
<span style="color: #454545; font-weight: bold;">★名前を入力して【決定】ボタンを押してください。</span>

<form name="NameChanger">
主人公1<input name="ChosenName1" type="text" value="名前1">
 <br> 
主人公2<input name="ChosenName2" type="text" value="名前2">
<br><br>
<input type="button" value="決定" onclick="ChangeName()"> 
<input type="button" value="リセット" onclick="PgNew()">
</form>
</div>


  
<p id="OriginalStory">
ここに文章を書く!
下のスクリプトの「名前1」と「名前2」を書き換えて使ってください(^-^)
</p>

<script type="text/javascript">
var name1 = "名前1";
var name2 = "名前2";

function ChangeName(){
var ChangedName1 = document.NameChanger.ChosenName1.value;
var ChangedName2 = document.NameChanger.ChosenName2.value;

document.getElementById("OriginalStory").innerHTML = document.getElementById("OriginalStory").innerHTML.split(name1).join(ChangedName1).split(name2).join(ChangedName2);
return;
}

function PgNew(){
window.location.reload();
}
</script>


<p>★名前変換小説のコード(主人公1人)★</p>

<div style="border: 1px solid #454545; padding: 10px;">
<span style="color: #454545; font-weight: bold;">★名前を入力して【決定】ボタンを押してください。</span>

<form name="NameChanger">
主人公1<input name="ChosenName1" type="text" value="名前1">
<br><br>
<input type="button" value="決定" onclick="ChangeName()"> 
<input type="button" value="リセット" onclick="PgNew()">
</form>
</div>


  
<p id="OriginalStory">
ここに文章を書く!
下のスクリプトの「名前1」を書き換えて使ってください(^-^)
</p>

<script type="text/javascript">
var name1 = "名前1";

function ChangeName(){
var ChangedName1 = document.NameChanger.ChosenName1.value;

document.getElementById("OriginalStory").innerHTML = document.getElementById("OriginalStory").innerHTML.split(name1).join(ChangedName1);
return;
}

function PgNew(){
window.location.reload();
}
</script>


♡byBambi