【自分で作るHP】HTML裏技講座1 | OMSテックのブログ

OMSテックのブログ

大阪&東京の理美機器メンテナンス集団

こんにちは。


雨降って寒い大阪より

OMSテックがおおくりします。


今日はちょっと反則くさいHTMLの作り方です。




へ~んな~こと~には~

つか~わないでネッ★


いや、本当に

ミラーリングサイトとか作らないようにね!



みなさん

例えばチラシを作る時、よそのサロンの素敵なチラシを

印刷屋さんやデザイナーさんに見せて

「こんな感じのチラシを作りたい」って言いますよね


PCを操作できる人は素敵なチラシをベース

自分なりのテイストを加えて

自分のお店らしく見栄えを整えて印刷しますね


ホームページでも同じことが出来るんです。


試しにやってみましょう。

(ちなみにWindowsのインターネットエクスプローラーでの操作方法です。)


ちょっと上を見て下さい。



OMSテックのブログ

ファイル



OMSテックのブログ

名前をつけて保存



OMSテックのブログ


ファイルの種類
 [Web アーカイブ、単一のファイル(*.mht)]

[Webページ、完全(*.htm、*html)]に変更して下さい。


保存する場所自分が分かりやすい所で良いでしょう。
PC初心者はデスクトップに保存するのが一番でしょう。

確認を押せば


OMSテックのブログ

デスクトップに今見ている画面に使われている画像やプログラムが保存されています。



OMSテックのブログ
さらに今保存したのと同じページの画面上で右クリックをして

(画像以外の場所で右クリックして下さい。)

[ソースの表示]をクリックしてください。



OMSテックのブログ

こんなアルファベットだらけのウインドウが表示されます。

これが今見ているページのHTMLソースです。


開いた[HTMLのソース]を上から下まで選択して

((編集→すべて選択)もしくはキーボードの[Ctrl]キー+[A]キーが便利です。)

コピーし、

((編集→コピー)もしくはキーボードの[Ctrl]キー+[C]キー)



OMSテックのブログ
「メモ帳」というPCソフトを開いて下さい。


スタートボタン→すべてのプログラム→アクセサリ→メモ帳



OMSテックのブログ

このようにメモ帳に貼り付けてください。

((編集→貼り付け)もしくはキーボードの[Ctrl]キー+[V]キーが便利です。)


メモ帳を分かりやすい場所に分かりやすい名前で保存して下さい。



これでHPのデザインのお手本が手に入りました。



■解説■


今回の操作で何をやったのか?


簡単に分かりやすく例えると

チラシをコピーした


具体的に操作の解説をすると

今見ている画面には様々なプログラムや画像データがリンクによって複雑に組立てられています。

それを丸ごとコピーしたのでファイルの中にはたくさんのデータが入っています。

ファイルに入っているデータを取りまとめて

人間の目に分かりやすく表示されるようにしているのが

HTML(プログラム)でありインターネットエクスプローラー(ブラウザ)です。

HTMLをインターネットエクスプローラー以外のソフト、例えばメモ帳で開くとアルファベットが並んだ画面になります。

アルファベットの並んだ画面は自分の好きなように書き換える事が出来ます が

インターネットエクスプローラーでは自分の好きなように見た目を変える事はできません


今回は、自分の好きなように書き換えられるデータを手に入れる操作をお教えいたしました。


これをそのまま使うと著作権の侵害になりますのでご注意を…


ファイルを見ても分かる通り、初心者にこれだけのデータをゼロから作っていくのは至難の業です。

なのでこの方法で お手本(HPペース)を手にいれて

自分のサロン用に修正していくのが


手早くオシャレなHPを作る裏技です。


このHPデザインコピーの方法は結構有名な手段なので

デザイン会社にちゃんと制作費を出して、コピーブロックをしているサイトもあります。

それを破る方法もありますが

著作権の侵害で訴えられたくなければ

諦めましょう。



また、HPデザインを無料で提供しているサイトもあります。

代表的なサイト

http://nikukyu-punch.com/


自分がお金を出したり、努力して作ったサイトを

勝手にコピーされてデザインを真似されたらイヤだなぁ

と思った人は

フリーのHPデザインをダウンロードして使いましょう。




では、次回はHTMLソースの読み方です。


ちょっと難しくなりますが、記号のお勉強と思って

気楽にいきましょう。





◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇

ヾ(@°▽°@)ノ<下記をクリックしていただけると喜びます。


にほんブログ村 美容ブログへ
 にほんブログ村