slimbox導入 ＆ 拍手お礼

なんだかものすごく長い記事になりそうな予感がしますので、今回は最初にお礼から始めます。
前回の本館更新後、拍手をいつもの4割増ほどいただいております(*^ｰ^)
どうもありがとうございます！！
これはやっぱり「彼」の効果でしょうか？
後書きにも書きましたが、次回も引き続き出てきますので、どうぞお楽しみに！
レス不要のメッセージを下さったお客様、ご好意に甘えさせていただきます。
本当にどうもありがとうございました！(*^ｰ^)


では本題。

気軽に投稿できてテンプレートさえ選んでしまえばあまりソースを弄る必要もないるブログサービスに本拠地を移してからじきに２年を迎えようとしているのですが、どうも定期的にいじり倒したくなる時期が来るようです。
その時期になったのか、久しぶりにそんな衝動に駆られて、画像の表示方法をすこしばかりいじってみようと思い立ちました。

これまで画像（こちらでは主に写真、本館では最近UPしていませんが自作絵）の表示方法は一貫して、小さめのサムネイル+サムネクリック時に別タブ（IEでは別ウィンドウ）での画像のみ表示にこだわってきました。
他所様の画像表示方法を見て「これカッコいいな」と憧れていた表示形式はあったのですが、不勉強が祟って、それはflashで動作させているものだから自分には無理と思い込み、諦めていました。
しかし少し前にそれが大抵はJavaScriptで表示させているものだと知り、それならば自分にもできるかもと試してみることにしてから３日。
chromeとIEでは問題なく表示可能とわかって、粛々とブログのhtmlを書きなおしています。
とりあえずこちらのブログでは作業完了。
数日中に本館でもソースを書き換え、記事内の記述もそれ用に追加する予定です。
というか、この記事を書きながら並行作業しているので、書き終わった頃には作業完了しているかもｗ

そこまで気に入った表示のさせ方とは、おそらくネットをそれなりに閲覧されている皆様なら一度は目にしたことのあるであろう、アレです。
サムネイルをクリックすると、画像が新たにウィンドウを開くわけでもなく、元のページの上に黒い半透明のウィンドウのようなもので閲覧可能になる、いわゆるlightboxのようなもののことです。

実を言えばそれこそ数日前に気づいたのですが、現在使っているBloggerでも標準でそのような表示機能が先月あたりから実装されていたようです。
実際、まだなにも手を加えていない本館の方でも画像はそのような表示になっています。

↓こんな感じ。



いくら自分のブログでもなんか恥ずかしくなったのでモザイクなどかけてみたらかえって(/ω＼)ｲﾔﾝな雰囲気にｗ
まあそれはともかく。

……ちょっと違うんですよ。
私がイメージしていたのはああいう感じじゃないんです。
ふわっと開いて、びろーんでぱっと表示、仕上げににょろっとclose×が出てくる、ってのが理想なんです！
て、こんな書き方でわかる人がいるわけないですねｗ

真面目な参考例　→　 Lightbox 2

まあ、こんな感じが良かったんです。
でもBloggerに実装されたのは残念ながらこういうふうに開かない。
じゃあ自分ででやってみるしかないじゃない！
ってことで、他所様のお力を借りまくって（）やってみました。

まずは普通にlightboxを導入してみようかと思い、調べてみたのですが、なかなか面倒であるようなことを書いている方が多かったので早速躊躇ｗ
なんでもlightboxはjsファイルと画像ファイルのドメインが同じでないと画像を読み込んでくれないんだとか。
画像はBlogger繋がりの某所に置いているけれど、jsファイルをUPできる所ではないので無理です。
しかしめげずにもう少しなんとかならないものかと検索してみたところ、slimboxなるものがあることを知りました。
なんでもSlimboxの2はjQuery版のLightBoxで、前述のような問題がないのだとか。

なので早速、主に表示確認用に使っている隠しブログでテスト。

Slimbox 2をBloggerに導入する - Web Scrap

まずはこのログを参考にさせていただき、実行！
ところが……なにも起こらない……(´･ω･`)
当然ですが、なにかがいけないんだろうとよくよく読み返し、更に2つのサイトを参照。

ShanaBrian Website
WWWLIKE！オボエトコ！忘れないでね: BloggerにSlimboxを実装してみました。

ここでようやく原因を理解。
最初に参考にしたブログの記述では、jQueryはGoogle AJAX APIを利用することになっています。
これが使えてないんじゃないかと気づき、いそいそとjQueryをダウンロードしてきて、サーバーへうｐ。
そうしたらやっと上手くいきました(ﾟ∀ﾟ)


ちなみにやったことは以下の通り。

1.　digitalia.be　よりslimbox2をダウンロード
2.　落としてきたものを解凍し、入っていたcloselabel.gif ・ loading.gif ・ nextlabel.gif ・ prevlabel.gif ・ slimbox2.jsをサーバーにup
3.　更に同梱されているslimbox2.cssの内容のうち、gifのurlを先程upした場所のパスに書き換えてから同じ所にup
4.　jQuery: The Write Less, Do More, JavaScript Libraryここで右側の「Download」をクリック、ソースが表示されたら全文をテキストエディタなどにコピペして「jquery.js」というファイルを作成、これをサーバーにup
5.　Bloggerのhtmlのheadタグの中に下記を書き込む。

<link href='*******/slimbox2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='*******/jquery-1.7.js' type='text/javascript'/>
<script src='*******//slimbox2.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function() {
        $(&#39;a[rel*=lightbox]&#39;).slimbox();
    });
</script>

6.　最後にブログの各記事の画像パスのa要素に rel="lightbox"を付け加えてまわります。
※ちなみにBloggerでは、画像パス内にs1600-hとあった場合、これは削除したほうがいいようです。

以上！＼(^o^)／

意外と簡単にできました。
3日もかかっちゃったけど！（）
でもまあ、少しばかり達成感を味わえて幸せなので良しとしようｗ

既存の画像で動作は確認できているけれど、もう一度テストがてら、本館に数カ月前に描いた落書きでも載せてこようかな⊂（　＾ω＾）⊃
以上、Bloggerへのslimbox2導入方法（自分用メモ）でした。

男と女の不都合な（？）真実

めちゃめちゃ久しぶりのエントリなわけですが、唐突ながらとあるコピペから入ります。
その前に、前回更新分まで拍手いただいたお客様。
まいどどうもありがとうございます！力を分けていただいております（＾＾）
では本題。

女『車のエンジンがかからないの…』
男『あらら？バッテリーかな？ライトは点く？』
女『昨日まではちゃんと動いてたのに。なんでいきなり動かなくなっちゃうんだろう。』
男『トラブルって怖いよね。で、バッテリーかどうか知りたいんだけどライトは点く？』
女『今日は○○まで行かなきゃならないから車使えないと困るのに』
男『それは困ったね。どう？ライトは点く？』
女『前に乗ってた車はこんな事無かったのに。こんなのに買い替えなきゃよかった。』
男『…ライトは点く？点かない？』
女『○時に約束だからまだ時間あるけどこのままじゃ困る。』
男『そうだね。で、ライトはどうかな？点くかな？』
女『え？ごめんよく聞こえなかった』
男『あ、えーと、、ライトは点くかな？』
女『何で？』
男『あ、えーと、エンジン掛からないんだよね？バッテリーがあがってるかも知れないから』
女『何の？』
男『え？』
女『ん？』
男『車のバッテリーがあがってるかどうか知りたいから、ライト点けてみてくれないかな？』
女『別にいいけど。でもバッテリーあがってたらライト点かないよね？』
男『いや、だから。それを知りたいからライト点けてみて欲しいんだけど。』
女『もしかしてちょっと怒ってる？』
男『いや別に怒ってはないけど？』
女『怒ってるじゃん。何で怒ってるの？』
男『だから怒ってないです』
女『何か悪いこと言いました？言ってくれれば謝りますけど？』
男『大丈夫だから。怒ってないから。大丈夫、大丈夫だから』
女『何が大丈夫なの？』
男『バッテリーの話だったよね？』
女『車でしょ？』
男『ああそう車の話だった』
女『もう、男って人の話聞かないんだから』
男『ごめん、ごめん。で、ライト点く？』
女『やっぱ怒ってんじゃん』
男『怒ってないってば』
女『絶対怒ってる。何カリカリしてるの？　人が大変な時に！』
男『いや、俺はただライトが付くかどうかを…』
女『話を逸らさないで！　ライトがどうこうじゃなくて今あなたの話をしてるの！』


結構昔からあちこちに貼られているコピペらしいんですが、私は先日初めて目にしたのでいまさらながら話題にしたいと思います。
情弱乙とか言わないでｗ

いやあ、全部読み切って、最初の感想は『あるある』でした(笑)
こういう女の人、いるよね～、と。
ぶっちゃけ、女って大抵こうだよね～ｗと。
自分も女だけどｗ

いや、男にもたまにいるかも知れないけど、こういうふうに話を持っていくタイプは圧倒的に女性比率が高いと経験的に思うわけです。
世間ではこの後、女性叩きにつながる書き込みが続くのが通例らしいですが、同じ女としてこれは反論できないというのが正直なところ。
女は絶対こう、男はこうじゃない、というはっきりとした線引きはできませんが、往々にしてこんなものでしょう。
これは一例ですが、良い例ではあると思います。
提供された（した）話題に対して、それぞれ求めているものがなんであるかということを示す例なんですよね。

結論として、
・男は話題（問題）に対してその解決策を模索しようとする。
・女はその話題に対する共感を求めている。
ということではないかと愚考するわけですが、多分間違ってないと思います。

あくまで女性が求めているのは共感なわけです。
一緒に困ってくれればそれでいいんです。
大変だね、困ったね、どうしようか。
それだけを言ってもらえていれば、多分この話の女の人は最後に逆ギレしなかった（はず）。
この男性も一応、共感めいた言葉は口にしているのですが、続けてすぐに解決策を模索してしまったのが敗因かと思います。
男性がただひたすら同調し、ライトがどうとか何も言わずに自分でそれを確認した上で、直すなり原因を突き止めるなりすれば、この女性の高評価を得られたはずです。
共感以外の言葉を口に出すべきではなかった。
勿論、男性にそこまでする理由はないわけですが(笑)

で、なんで私がこのコピペに妙に反応したかというと、昔から女性相手のやりとりで感じていたもやもやしたものを、見事に代弁してくれていたからなんです。
どうやら私の思考形態はこのコピペの男性寄りのようで、こういう話を延々と続ける相手にはイラッと来るわけです。
愚痴をえんえん聞かされるので、じゃあこうしたら？ああしたら？とアドバイスのようなものを、僭越とは承知しつつ返すのですが、大抵「でも……」とか「それはちょっと……」とか曖昧に返されて、（もしくは反応なしｗ）本人にはその問題を解決する意欲がまるで見受けられない。
ただ聞いてほしいだけなんだな、と大人になってやっと思えるようにはなりましたが、それでも解決するつもりのない問題を聞かされるのは時間の無駄と切り捨てたくなるのはやっぱり大人になりきれていない証拠なのでしょうか？
そういう事がわかるようになってからは、なるべく無理やり共感する言葉を挟むように努力するようにはなりましたけど、それでもこれっぽっちもそう思っていないことをわざわざ無理して口に出すという行為は結構ストレスがたまるので、なるべくならやりたくないわけです。
要は、女性的な感情の機微というものがどういうものであるかを知識として知ってはいても、実際に自分にそういう素養はないのではないかということです。

ここで話が少しばかり飛躍するのですが、最近、二次創作物をあまり読めなくなりました。
時間がないとかそういう理由ではなく、ちょっと目を通してこれは受け付けないと断じては避けてしまうという意味です。
昔から、そのジャンルで大手と呼ばれる方の作品はどういうわけか大抵読めなかったのですが、良く考えてみれば私がハマるようなジャンルの二次は大抵女性が書かれていますので、それが理由で駄目だったのかもしれないとようやく思い至りました。
つまり、そういった女性的な感性の話を受け付けない脳みそだったのでは、と今になって悟った次第です。
別に自分の思考形態が、いわゆる男性のそれとほぼ同じとは勿論言いませんよ。
理想的な男性タイプの思考力を持っていれば、もっと論理的かつ合理的に物事を受け入れ、考えられるんじゃないかと思います。
それができない自分は単に『女性的ではない』だけの人間なんでしょう。
昔からよく母親に言われてました。あんたには情がない、って。多分それってそういうことなんだよね。
ということはですよ。
逆に考えれば、自分が好きで書いているような話は普通に豊かな感性を持つ女性には受け付けにくい話なのでは、と今になってようやく(ry

まあ、一つのコピペから、自分が延々とサイトで垂れ流しているものがどういうものであるのかを気付かされたという話なだけなんですが、だからどうするということでもありません。

書きたいから書くのみ！

これに尽きます。
うわ、こういうところだけは男前ｗ
でもこのコピペの女性の気持ちもちょっとは理解できるので、まだ私「自分、女だけど」って言ってもいいよね？ｗ

実験中

前のブログでもやっていたんだけれど、ブログを更新するとツイッターに表示されるというサービス。
以前、さっぱり訳がわからないまま色々やってようやくできるようになったんですが、また入れてみようと思い立ってから既に数時間。
寄り道しまくってはいますがｗ
それはともかく、やっぱりぜんぜん訳がわからないまま色々やってみたら、もしかしたらできるようになったっぽい。
ので、実験。
ここを更新しないと、実験結果が出ないのだ(笑)
結局RSSって……なに？（爆）

自分が可哀相なくらいのアホなんだと自覚するのはいつだって辛いものですねorz
今日はなんだか日本語すらおかしいよ……


ところで、本館の方。
IEで確認してみたら（←なんという今更ｗ）、なんだか半角英数字が印刷っぽく無駄に美しいフォントになっていて驚いたので、先程訂正しておきました。
普段はいわゆるちょろめ使いなので、全然気づかなかったです。
ちょろめさんと、ルナ（Gecko）で確認して大丈夫なら、IEに代表されるTrident系なら大抵の表示は大丈夫だと何となく信じていたので、なんだか裏切られた気分ｗ

そもそもBloggerのテンプレート、初めに指定されているフォントが駄目すぎるので、全箇所書き直した（つもりなん）ですよね
。
基本的に、英語で作成することを前提にされているのでしょう。
指定されていたフォントがGeneva, Arial, Helvetica, san-serifとか、そんな感じで。
日本語だとなんかすごく……変でした。
なのでしこしこ直したはずだったんですが、取りこぼしがあった様子。
というか各項目ごとのフォント指定、ブラウザによって受け取り方が違うのかな？
まあ多分そういうことなんでしょうけど。
今までの経験上、IEは結構甘い指定で思うような表示がされていたので、他のエンジンなら大丈夫だと高をくくっていた自分がむしろ甘かったんだろうなorz
実はまだ、表示が変というか、思い通りに反映されていない箇所があるのですが（IEのみ）、閲覧には全く支障はないのでそのまま放置。
むしろ自分の趣味の問題だからどうでもいいですｗ
別に一文字くらい色が違わなくたってね……ぶつぶつ（←この辺は未練）

さて。冒頭の実験は成功しているのか否か。
一時間くらい経たないとわからないので、確認は明日かも。

画像投稿について

もしかして私、すごいうっかりさんだった？(汗)

ブログ設定の項目、フォーマットのところで、『浮動整列を可能にする』かどうかを選べるじゃん。
これがデフォで『はい』になってた。
しかもご丁寧に説明してある。
『<div clear:both> タグを使用して、画像とテキストの整列オプションを使用できるようにします。 (レイアウト後に問題が発生している場合は、「いいえ」を選択します)』

さきほど『いいえ』を選んでみたので、テストしてみることにします。
えいっ！

……あれ？

やっぱり<div class="separator" style="clear: both; text-align: center;">から始まってる……(　ﾟДﾟ)
なので、現れたタグを結局自力で整形してみる。



これだと直貼り、ではなく、サムネクリックで、画像を別窓直接表示になってるはず。
……どうかな？
プレビューで見てみた限り、その通りになってるようです。

結局、冒頭に書いた設定ってなんだったんだ？？？(汗)

画像の脅威

何の画像だと思ってはいけません(笑)
問題なのは画像そのものではなく、画像の貼り付け方です。
私にとっては今のところ、このBloggerにおける最大の難関というか謎。
それが画像のうｐの仕方。

一見簡単なんですよ。こだわらなければね。
そもそも投稿画面で、【HTMLの編集】というモードと【作成】という二つのモードがありまして、多分基本的にはこの【作成】という方で投稿文を書いてくれということなんだと思います。
このモードにしておけば、本文をプレビューしながら書くことができるのです。
上のほうに書式ボタンもいっぱいついてますしね。
でもJavaScript入りの文章を投稿するのがメインといっても過言でもない私は、どうしてもHTML編集モードで書くことになるわけです。
切り替えることは勿論できますが、なんだか後が面倒なので（そのままにしておくと次回投稿時にもそのモードのままになる。そこにうっかりJavaScriptを書き込もうものなら悲劇が…ｗ）、切り替えずに投稿しようと自分で<img src="　　　" alt="　　　">を書き込んでみたんですが……
やっぱり面倒ｗ
そもそも画像の保存場所が長いことメインで使っていたFC2に比べてわかりにくいんですよ。
ていうか、最初はどこに画像が保存されたのかさっぱりわかりませんでした＼(^o^)／
そこで【作成】モードで記事を書きつつ、自分のPCから画像をネットにUPして、それを貼り付けるという一番簡単なことをやったんですけどね……
それでわかったこと。
とんでもなくいらないタグがこれでもかというくらいついてくるorz

例：
<div class="separator" style="clear: both; text-align: center;">
<a href=画像アドレス" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="画像アドレス" /></a>
</div>
<span id="goog_なんかのコード"></span><span id="goog_謎コード"><span>

お分かりになる方には一目瞭然だと思うのですが、けっこう(ﾟДﾟ )ﾊｧ?って感じじゃないですか？
画像貼り付けたいだけなのに、なんでdivタグから始まらなきゃならないんでしょうか？？
そこまでしていろいろ指定しなきゃいけない意味がわからない。
そしてデフォルトでサムネ表示。
大きさは貼り付けるときに指定できるんですが、いちいち別窓表示にしたくなくて直張りしたい人にはこの貼り方ではどうしようもないでしょう。
私はそのつど貼り方を変えたいので、これは結構問題です(´･ω･`)
しかも貼ってから気づいたんですが、保存場所もちょっと……
Google提供のサービスってことで当然といえば当然なんですが、Picasaの自分のアルバムの中なんですよ。
画像が既にUPしてある場合、ここから画像URLを取得するまでの道のりの長いこと長いこと……orz
慣れが必要なのかなと思って、十数回連続で投稿してみましたが、全然慣れた気がしません＼(^o^)／
仕方ないので、最後は邪魔なタグを取っ払ってそのつど整形。これが一番確実。
これはいつまでたっても慣れないかも……(汗)
面倒なのでいっそtwitpicにうｐして、それを貼り付けようかとも思ったんですが、うpした瞬間からviewがいくつも入ってしまうので、それだけでビビって敗退。
いくらなんでも知らない人に、そんなに見られたくないです……((( ；ﾟДﾟ)))

テンプレート

ここまでは登録時に適当に選んだテンプレートを使ってテストしていましたが、実際にやろうと思ったら、本腰を入れてテンプレートをどうにかしないといけません。
見た目は大事です。
センスがないからどういうのがかっこいいのかって、よくわからないですけど(笑)
でも見やすいというのは大事です。少なくとも自分が見やすくないとどうにもなりません。

選択肢は提供されている基本のテンプレートか、例えばbTemplatesのような配布サイトがあるので、そういうところで探すしかありません。
もちろん自分で作るという選択肢なんて私にとっては存在しません(笑)

で、色々探してみたんですが、bTemplatesのはやっぱり洋モノってことでしょうか。どれもこれもぴんと来ません。
ていうか、多分目的が違う。
まあ自分のような目的を持っている人間なんて少数派なんだろうから当たり前といえば当たり前。
Google提供の基本のものは、ショボいという評判もありますがそのぶんシンプルで、ある程度いじれば十分要求を満たすような気がしてきたので、いじり倒してみることに決めました。

……とか何とか威勢のいいことを言ってしまった手前、実は結構苦労してしまったなんてことは秘密です(笑)
テンプレートによって表示領域が狭すぎたり広すぎたりするので、それを（自分から見て）ちょうどいい広さに縮小、もしくは拡張するだけでも、どこをどういじっていいのやらさっぱりでした。
ブログのテンプレートなんてそう難しいものでもありません。
各領域ごとにきちんと分けられていて、その領域ごとにCSSで指定がされてあって、最後に簡単にbody部分の記述があるだけです。
実に冥界……もとい、明快単純。
なんですが、提供元にもよるし、作成者にもよるんでしょうが、書かれ方が結構まちまちなんですよね。
言い訳にしかなってませんね。ハイ。解読するだけで結構苦労してしまったアホの子は私です(`・ω・´)ｷﾘｯ

i||i||||i＿|￣|○i|||i|||i

まあ、そんなこんなでなんとかいじり、形にすることができたのでした。
ばんさーい（←どこか投げやり）

Blogger本格稼動にあたって

自分メモ。
なにはともあれ、始める以上は検索避けから。
小心者なので(←うそつけ！)

レイアウト→HTMLの編集で、下に以下のメタタグを入れる。

<META content='NOINDEX,NOFOLLOW' name='ROBOTS'/>

ポイントは最後のスラッシュ。
これを入れないとエラーになる。
ググったときには、半角スペースとスラッシュという情報があったのでその通りにしてみたのだが、保存してまた開いてみたらなぜかスペースが消えてた。
エラーにならないし、まあいいのかな？

ちなみに
<META name='GOOGLEBOT' content='NOINDEX,NOFOLLOW'/>
も入れておこうと思ったのだけれど（実際に前サイトでは入れていました）、改めて調べてみたら、意味を成さないどころか下手をすると上のタグを打ち消してしまう恐れもあるという記述を見つけたので、今回はこれだけで行ってみようと思います。

そもそもBloggerには、一番初めの設定で
【ブログの検索を検索エンジンに許可しますか？】なんて設問があるのです。
これには、はい／いいえで答えることができます。
これには丁寧に解説がついていまして、曰く
【[はい] を選択すると、あなたのブログを Google ブログ検索に追加し、Weblogs.com に更新を通知します。 [いいえ] を選択すると、誰でも引き続きブログを表示できますが、検索エンジンではクロールしないように指示します。】
とのことなので、これだけでもある程度、十分に対策になっているような気がします。

それとは別に、ひとつ考えたことが在ります。
クロールしてくるロボットは、いったい何を読んで検索結果に吐き出すのか、ということです。
恐らくhtmlを読んで、タイトルなりリンクなり、所定のタグ内の記述を読んでいるのだろうと推察されます。
では、サイト名なりリンク先なり、その名前を文字で表記しなければどうだろう？
……なんて考えました。
そこで実験的に、次の自分ルールを作って遵守してみようと思います。
・サイト名は文字情報として記述しない。
　→　サイト名を表記しなければならない部分は全て画像で置き換える。
　　　Blogger開設に際して登録するブログ名も略称など、別のものを使用する。
・サーチやその他、検索されても問題のないサイト以外のリンクも上記を適用する。
　→　具体的にはバナーだけ張って解説等は一切付けない。

まあこれだけのことがどれだけ意味を成すかはわからないですが、わからないからこそやってみる価値はある！
……かもしれない、ってことで。

ブログでサイトを構築するに当たっての一番の懸案

それはブログで名前変換ができるか否かということ。
ちなみにここで言うブログとは、レンタルブログのことです。
自分でサーバーを借りてそこで展開するブログはこれに含まれません。
だってできないわけがありませんから（＾＾）

実を言えば一番最初にサイトを立ち上げようと思ったとき、当初はブログサイトを考えていました。
でも当時の知識では、それができるかどうかがわからなくて、結局諦めたという経緯があります。
そこまでこだわったあげくに、一応これまで、夢小説という名の名前変換小説サイトをやってきたわけです。
夢ヒロイン＝自分と思って書いていたわけではないけれど、だからこそただのオリキャラじゃ取っつきにくかろうと思って名前変換にこだわってきたわけです。
ここまできてそれを放棄するのも癪です。

で、いろいろ調べてみました。
結果『できる』ということが判明。

レンタルブログでも名前変換はできるんです。

方法は、至って簡単でした。
自分的には盲点だったと言ってもいいです。
まさかそんな荒技があったとは、という。
要するに、画像などをUPするのと同じ要領で、htmlファイルそのものをUPするという方法でした。
もしかしたら考えるまでもなく誰もがすぐに思いつく方法なのかもしれませんが、お馬鹿な私は目から鱗でした(笑)
なるほどね、と思って実験してみる一歩手前まで行ったのですが……結局この方法は実験するまでもなく却下。
やりたいことは、それではなかったからです。

この方法だと、これまで作ってきたファイルがそのまま使えます。
CSSをかなりいじらないといけませんが、使えます。
でも別窓表示になるんですよ。
いちいち全部別窓。それって自分的にはなんかとても嫌でした。
ブログだったらあくまで、ブログ記事内に表示されなきゃ嫌でしょ、やっぱり。
しかもブログサイトにしてしまえば増え続けていくhtmlファイルを管理しなくてもいいんじゃね？と今回のブログ化企画をでっち上げた部分もかなりあるので、これじゃあ意味がありません。

やっぱり無理なのか……orz
と挫折しかけたものの、よく考えてみると、比較的よく目にする大手レンタルブログ（ぶっちゃけFC2と忍者。アカウントを持っていたもの）しか見ていなかったことに思い至り、別のブログサービスも見てみようと考え直しました。
その1発目として試してみたのがこのBlogger。
自分が回るようなサイトさんではあまり使っている方がいらっしゃらないようだったので、その日陰っぽさに惹かれました(笑)
｜ω・)｡oO(常に人の斜め後ろを行くのが好きなものでｗ)

そしたら初めは、あまりに違うインターフェイスにびびったものの、ページ要素にわざわざ「HTML/JavaScript」とか選べるようになってるじゃないですか！
てことは、JavaScriptをがんがん書いてもいいんだな？ってことで、試してみましたら……

できた━━━━(ﾟ∀ﾟ)━━━━!!!!

できましたよ！
別窓表示にせず、名前変換用テキストエリアを表に出しっぱなしで、ブログ記事内で名前変換ができた！
というわけで、新しい生息地に即決定(ﾟ∀ﾟ)

こうして無事、一番の懸案はさくっと解消されたのでした。