こんにちは。根本齒科室の根本です。

さあ、朗戸()の時間ですｗ
まずは【本尊?!】を用意することが大事です。
といっても宗教的な物ではなく、ライブラリ集である【みんじす(jquery-3.3.1.min.js)】ファイルのことです。
ｽｺﾞｲ強引な名前の付け方ですが、すみません。

これを
①ヘッダー内にjQueryの 総本山 公式HPの【みんじす】へのリンクを張って読み込ませる
②自サイト内に【みんじす】をうｐ

のいずれかの対応になります。
私は②で行きました。

85キロバイトしかないファイルだし、自分のところに置いといたほうが読み込みも早いだろうと思ったからです。

これがあってはじめて朗戸()が開きます。
朗戸()が開いて初めて、メニュー別ファイル化が完了します。

いったんメニュー別ファイル化が完了すると、メニューファイル(menu.htmlなど)をいじるだけで、全ページのメニューが一括変換できます。

ついでに、フッターなどの共通ファイルも別ファイル化しておくと便利です。

しかし、ここで問題が発生しました。
今HPの構成で使っているbox1～box5というそれぞれの名前は、スタイルシート上でクラス(.box●{})に使われてしまっているので、今更使えません。

数十分考えた末に出した結論は、ページのソースを見ていただければ分かると思いますが、相当くだらないものでした。

それぞれ「box1box2」「box4box5」という名前のIDを定義するんです。
前者はヘッダーとトップナビの塊、後者はメニューとフッターの塊です。
ファイル名も「box1box2.html」みたいな感じにしてしまった方が、むしろ自分的にも分かりやすい感じになりました。

もちろん、.htmlとはいっても、＜html＞も＜body＞も何もなく、それこそ＜div＞に始まり＜/div＞に終わる、ちょっと殺風景なファイルです。

「box4box5.html(メニューとフッター)」が完成しました。
まさにコピペならぬカット＆ペーストです。

◆

よし、じゃあ、読み込み試験だ！

こんな時のためにFireFoxをインストールしておきました。
jQueryをローカルで試すときは、Chromeではダメだそうです。
実際ダメでした。
重い思いと言われたFireFoxですが、今はむしろChromeよりも全然軽い感じで、今ではすっかりメインブラウザです。
ブックマークやパスワードなんかも全部引き継がれるので、移行はすごく楽でした。

フォルダの中の「index.html」を火狐の中にドラッグします。

・・・あっ

メニューが２つだｗｗｗ

つい手癖で、カットのつもりが単なるコピペになっていたようで、 index.html に残っていたメニューと menu.html に写したメニューの両方が連続して表示されていました。

ちなみに＜/font＞とか＜/b＞＜/ｐ＞なんかは自然に手が動くようになりました。
「/」は、自分の場合は右手の薬指で、ピアノの跳躍スタッカートのように弾く感じで押しています。

ほとんどが公式HPと、ジャンクステージで鍛えられたものですｗ

当初はごていねいに＜/p＞＜p＞とか＜br＞とかのタグも全部貼っていました。
でもWordPRessの編集画面はそんなことしなくても、ちゃんと形になるので便利ですね！

そうそう、[f10(半角英数に変換)]や[f8(半角ｶﾅに変換)]も頻出です。

無駄話が過ぎましたが、 index.html のほうのメニュータグを消して、[F5(再読み込み)]を押します。
よしよし、メニューが1つになりました。

◆

長かった。

ここのコラムでは、まとめた形で、内容的にも失敗談を中心に軽く述べていますが、実際は大きな壁の前で何度も心が折れそうになりながら、何とか必死に突破してここまで来ました。
jQueryの関数で、$(ドルマーク)が出てきただけで頭がくらくらになりそうです。
({}は慣れましたが)

そして、まだコンテンツの引っ越しは全然終わっていませんが、枠組みだけはなんとかできました。

しかし今までの旧HPには、表示形式もさることながら、あちこちに上から目線な石北会計のフレーズが目白押しです。今見るとみっともないことこの上ないので、そのままでは載せられません。

もっと患者様目線、来院者目線で表現を練り直し、文章量も半分くらいにしないといけません(いやそれでも多いか)。

ところで、当院公式HPに、もうひとつ大きな課題が残っていることに読者の皆様はお気づきでしょうか。

・・・そうです。メールフォームです。
どうしよう・・・

大事なのはまずスマホで扱いやすいことです。
できればUTF-8で書ければいいのですが、どうしよう。
旧HPは全部sjisで書いていたのですが、フォームの肝心の部分がなぜかeucになっていました。
レンタルサーバーを借りている大塚商会さんのサービスを素直に借りてやるか、それとも無料のを借りてやるか。
あれこれ迷い始めると尽きません。
この辺はプロだと迷いがないんで早いんでしょうが。

フォームを旧HPからコピペしたら、PCかiPhoneかどちらか、または両方のページが必ず文字化けし、うまく行ったと思ったら送信できなかったり。。。

もう少したって、フォームメールがうまく行ったらまたここで報告します。

【今回のまとめ】

はじめてのjQuery。本尊や総本山のようなものがあるのを初めて知った。