タイトル通りです。やっていきます。

→この記事では残念ながら、独自タグひとつにつきデフォルトネームはひとつしか設定できません……。めんどくさい！という人はaliceかdream.phpを使ってください。

配布スクリプトはこちらから。

https://nanos.jp/sikaku0/blog/2/25/

まずは下にある画像のように設定をします。

簡単に説明すると

独自タグあり→小説を書く時により感覚的に書けるようになる。

sessionStorage→タブが開かれている間は保存されるデータ。（タブを閉じると消える）

localStorage→消そうとしない限りは半永久的に保存されるデータ。オススメ。（消すのはCLEARボタンでできます）

ストレージなし→設定がそもそも保存されないので開かれているページのみで使える。

（配布元ページで説明も書かれていますが念の為に）

今回は独自タグあり、localStorage保存でスクリプトを表示させます。

このやり方がいちばん書き手・読み手にやさしい気がする、から！

コピーボタンがあるのでjQueryという見出しがある方を一旦テキストエディタなどにペーストして、拡張子.jsで保存します。名前はなんでもいいです。わたしはnamechange.jsにしておきました。（直感的にいじりやすいから）

ここからはスクリプトの書き換えです。

配布サイトの下部にどこを書き換えればいいのか書かれているので　それを参考に設定します。

名称1はタグ用の名前。デフォ1がデフォルトネーム（変換される前の名前）になると思えば大丈夫です。

これらは複数個用意できます。

わたしはサイトに導入するときに以下のように設定しました。

'名前1':'ミョウジ',

'名前2':'ナマエ',

このように書き換えをしたあと　静的HTMLサイトだと　#名前1#、#名前2#と書けば名前変換ができるようになるよーということです。

ただ、てがろぐでは # はハッシュタグとして扱われるため（設定でoffにもできます。）このままでは使えません。

そのため、独自タグを決めている部分で#を変更します。

サイトではこのように書かれているところ。

独自タグの使用 HTML上でより感覚的に操作できるよう、#名称1#等の記述が閲覧者設定テキストに置き換わるよう処理しています。
実表示時にはテキストを内包したspan要素になります。
jQuery15行目独自タグの編集 #'+k+'#にて使用する独自タグを編集できます。
'+k+'に、「変換設定」で言うkeyが入ると思って下さい。
正規表現上でエスケープした方がよい記号を使う際はエスケープを

てがろぐに合わせて[]をエスケープしてやってみたところ、どうにもうまく行かなかったので（サイトではサンプルとして記述されてるんですけどね……。）

てがろぐに合わせて、今回は

-'+k+'-

で表記させます。

小説内で独自タグとして書くならば-名前1-、-名前2-です。正規表現に使われないような記号ならば大体OKですがスマホでも入力しやすく、かつ本文内で使うことがない記号……と思いこれにしました。使う人が自由に変えてください。（動作確認はしっかりやろう！）

ここまでスクリプトの書き換えをしました。

次はてがろぐへ導入する手順です。

できたファイルを、てがろぐのあるディレクトリと同じ階層にjsディレクトリがあればそこに。なければ作ってアップロードします。

（複数スキンを扱う場合には、スキンのディレクトリ内にアップロードしない方が楽だと思います。

スキンごとにデフォルトネームを設定して読み込むファイルを変えたいという場合にはスキンのディレクトリの中にアップロードしてください。）

利用している外側スキンの下部　</bodyの>直前に、jQueryのCDNと、今アップロードしたjsファイルを読み込ませます。

jsファイルの相対パスの設定が難しいという場合には、絶対パス（http:～からはじまるリンク）で読み込ませましょう。

jQueryのCDNはいろんなところで出されていますが今回は公式で用意されているものを持ってきました。

以下をそのままコピペして大丈夫です。

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

↑のCDNの下に、jsファイルを読み込ませます。以下のように記述します。

<script src="(jsファイルの相対パス、もしくは絶対パス)"></script>

うちのサイトだと

<script src="skin-arc/../js/namechange.js"></script>

になります。

名前変換フォームを表示させる場所と、本文とでスキンが違う場合にはそれぞれのスキンにjsファイルを読み込ませるよう忘れないでください。

また、本番適用ではないスキンの場合には上に書いたようにスキン名../jsファイル　の形にしないと反映されないようです。

（2023年1月追記）

ここからは名前変換フォームの話です。

スクリプト配布サイトに戻り、HTMLという見出しがついているコピペボックスに戻ります。

こちらもコピーボタンがあるのでクリックして全コピーします。

<div>

<input type="text" data-text="名称1" />

<input type="text" data-text="名称2" />

<input type="submit" id="changeSet" value="SET" /> 　 <input type="submit" id="changeClr" value="CLEAR" />

</div>

<p>設定中：#名称1##名称2#</p>

自分で設定したタグにあわせて、名称1と名称2の部分を変えます。

わたしの場合は名前1と名前2に設定、独自タグは--表記に変えたので以下のようになります。

<div>

<input type="text" data-text="名前1" />

<input type="text" data-text="名前2" />

<input type="submit" id="changeSet" value="SET" />

<input type="submit" id="changeClr" value="CLEAR" />

</div>

<p>設定中：-名前1--名前2-</p>

てがろぐで名前変換を表示させたい場所にペーストします。

（HTMLが使える場所、使えない場所があるので直接記述してよいかどうかチェックしましょう！

もし入れたい場所がHTMLに対応していない場合には、[[INCLUDE]]というタグで呼び出すこともできます。でもオススメはフリースペースなどに記述することです。）

小説を書く時には自分で設定した独自タグを使用して書けばOKです！

これで導入はおわりです。お疲れ様でした。

てがろぐで独自タグ付き名前変換をするための記事(1/8更新)

本当にこのユーザーをブロックしますか？

この投稿を報告

ログインして続ける

カテゴリー