【開業医院長先生：いつでも引っ越せる、ホームページ】6️⃣「見かけと中身を、分けて持つ」

※この記事は、パソコンが苦手な先生のために、いちばんやさしく書いています。
※むずかしい言葉は、初めて出たとき、すぐ横で、そえ書きします。

【前回はこちら】

【先に、結論をお伝えします】

ホームページには、2つのものが入っています。
中身と、見かけです。

この2つを、別々に持っておくと、楽になります。
見かけだけ、替えられます。
中身だけ、別の置き場所に、移せます。

今回は、その分け方のお話です。
僕のクリニックのページでも、試しました。
結果は、見た目の差が、ほぼゼロでした。

【中身と見かけとは】

中身は、言葉と写真です。
診療時間、先生の紹介、お知らせの文章。
院内の写真。

見かけは、飾り方です。
色。
文字の形と大きさ。
どこに何を並べるか。

例えます。
ホームページは、1冊の本です。
中身は、本の文章です。
見かけは、カバーです。

カバーを替えても、文章は同じです。
文章を書き直しても、カバーは同じです。
本来は、別々のものです。

【ふつうは、混ざっています】

WixやWordPressは、この2つが、混ざった形になりがちです。
管理画面で、文字を打ちます。
同じ画面で、色も選びます。
便利です。

ただ、持ち出すときに、困ります。
混ざったままだと、中身だけ取り出すのが、むずかしいのです。
カバーごと、1つの箱に入っています。
本を替えたいのに、カバーも一緒に、替わってしまいます。

【HTMLでは、どう分けるのでしょう】

HTMLの世界では、分けるのが、ふつうです。

中身は、HTMLの文字に書きます。
見かけは、CSS（シーエスエス）という別の文字に書きます。
CSSとは、色や並びを決める、指示書のことです。

どちらも、メモ帳で開けます。
別々のファイルに、保存します。

こうすると、起きることがあります。
CSSだけ書き換えると、見かけだけ変わります。
中身の文字は、そのままです。

【お知らせは、小さな文字ファイル】

お知らせも、分けられます。
小さな例を、お見せします。
仕組みを示すための、見本です。
先生のページの、実際のファイルではありません。

2026-10-25.txt という名前のファイルに、次のように書きます。

日付：2026年10月25日
題名：年末年始の診療について
本文：12月29日から1月3日まで、お休みをいただきます。

このように、文字だけで書きます。
これが、中身です。

見かけは、別にあります。
お知らせを、どの色で、どの大きさで並べるか。
これは、CSSに書いてあります。

お知らせを足したいとき、文字ファイルを1つ足します。
並べ方は、見かけの指示書が、決めています。

この仕組みは、見本の説明です。
この回では、試していません。

【分けて持つと、よいこと】

よいことは、2つあります。

1つ目です。
・模様替えが、楽になります。
・見かけだけ、替えられます。
・文章を、打ち直す必要がありません。

2つ目です。
引っ越しが、楽になります。
中身は、文字のファイルです。
どの置き場所にも、持っていけます。
新しい家では、新しい見かけを、かぶせられます。

【自分のページで、分けてみました】

5回で、僕のクリニックのページを、HTMLで作り直しました。
実は、あの見本は、混ざったままの形でした。
文字の位置を、1つずつ、同じ場所に書いていたからです。
本物に近づけるには、その形が、手っ取り早かったのです。

そこで、AIに頼んで、分けてもらいました。
文字は、HTMLに。
位置、色、大きさは、CSSに。
元のファイルは、そのまま残しました。

分けても、見かけは、変わりませんでした。 ここが、いちばん大切なところです。 中身と見かけを分けても、ページの見た目は、そのままです。 見た目を心配しなくて、大丈夫です。

結果です。
元は、1つのファイルでした。
分けたあとは、HTMLが約11KB、CSSが約28KBです。

見た目は、同じに見えるか。
分ける前と後を、同じ大きさで撮って、比べました。
全体で、9,549,485画素です。
違ったのは、232画素でした。
丸印1つの、ふちの部分でした。

ただ、お断りがあります。

比べたのは、5回の見本と、分けたあとです。
本物の公開ページとは、比べていません。

もう1つ、お断りします。
今回の分け方は、機械的なものでした。
部品ごとに、1つずつ、指示書がある形です。
「お知らせ用」「見出し用」のように、まとめた指示書では、ありません。
引っ越し先で、見かけだけ替えるには、もう一手間、整理が要ります。
その整理も、AIに頼めます。
でも、この回では、まだ試していません。

【こんなプロンプトで、できます】

プロンプトとは、AIへの頼み方の文章です。
僕がやった流れを、先生向けに言い直しました。
このまま打って、同じ結果になるとは、言い切れません。
AIの種類や、ページの作りで、変わります。

先生ご自身のホームページで、お試しください。
他の人のページは、試さないでください。

大切なことは完璧に同じではなく、AIとの連携で移行することが簡単に出来るという実感をしていただくことです。

ご自身のAIに相談していただけると良いと思いますが、私が行ったプロンプトを参考に書いておきます。（本当はご自身で練習してほしいので有料にしておきます。しかし、これが完全なものではない点はご了承下さい）

分ける作業も、AIにお願いできます。
頼み方の、見本です。
このまま打って、同じ結果になるとは、言い切れません。
先生ご自身のホームページで、お試しください。