« | Home

2018/11/26

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

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

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

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

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」を火狐の中にドラッグします。

・・・あっ

メニューが2つだwww

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

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

あと<フォンtこぉr=””> つまり<font color=”#”>ですね。
左手の小指でシフトを押しながら右手の中指で=をおしたら左手の小指はそのまま軸にして、左手の中指で 2 を2回押します。
そのまま>を入力した後に2つ戻って(左手小指でShiftを押しっぱなし) 3 を押した(ら#入力になるのでその)後、赤ならff0000、青なら0000ff、緑なら990099 みたいなところも、手に染みついています。

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

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

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

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

長かった。

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

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

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

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

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

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

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

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

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

【今回のまとめ】

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

2018/11/26 11:54 | 未分類 | No Comments

Trackback URL
Comment & Trackback
Comments are closed.
No comments.