HTMLファイルをブラウザソフトで読み込む方法


《HTMLファイルをブラウザソフトに読み込ませるには・・・ドラッグ&ドロップ? それだけ??》


 作成したHTMLファイルがちゃんと機能しているかどうか、公開する前に是非、確認したいですよね。

 もしうまく表示されない場合は、HTMLタグ打ち間違いです。括弧の重複や、全角文字や記号が混ざっていたりとか、いわゆる『ケアレスミス』によるモノだと思われます。間違いがなければタグは必ず正しく反映されます。なぜならば……、

それが、コンピュータというモノだからです。

 確認するためにはに HTMLファイル文章ファイルコピー&ペーストして、ブラウザソフト 上に ドラッグ & ドロップで完了!!

 え!それだけ?? はい、それだけ。

あ、そうそう……。

その際、前もってファイルの拡張子を『html』に書き直します。(これは必ず。これを忘れると無視されます……。)


 簡単でしょ??

HTMLとは?


《HTMLとは・・・炒め物、煮物。ん? 何の??》


★head (頭)と body(体)の関係 ★


かの天才彫刻家、ミケランジェロは、その代表作『ダビデ象』を足から彫ったと言われていますが、それは自分の才能を誇示したいためだったと言われています。

『こんな難しい事だって出来ちゃうもんね!オレ、天才だから!』

という自己主張だったのかもしれません。
でも我々凡人は……、

やっぱり頭、そして体の順番ですよね。


HTMLとは・・・(HYPER TEXT MAKEUP LANGUAGE)の略です。

 HTMLはまず、

「初めまして!私はHTMLです!」

<!DOCTYPE html>

と宣言します。

これは旧約聖書で言うところの

『光あれ!』

のようなモノ。

ここからすべてが始まった! 


それから<html>『生物』、<head>『頭』、<body>『身体』の順で、だんだんその正体を明らかにしていきます。


とりあえず書いてみます。


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

『初めまして!HTMLでございます。』

</p>

</body>

</html>


これがHTMLの正体です。

ここでは『初めまして!HTMLでこざいます。』という文字を表示するのに最低限必要なタグを表示してみました。

これだけでも表示はされますが……、

 でも本当はもっといろいろ……、

例えば、


<HTML>タグの中に、使用する言語の種類を宣言する lang=”ja”を入れたり、

<html lang=”ja”>・・・このHTMLの言語(lang)は、日本語(ja)です。


●headタグの中にtitleタグを入れて サイトのタイトル名を入れたり,

<head>
<title>HTMLのページ</title>
</head

このサイトのタイトルは『HTMLのページ』です。


●同じくheadタグの中に、文字化けを防ぐためのコードを<meta>タグで入れて宣言したり、

<head>

<meta charset=”UTF-8″>

</head>

このテキストはUTF-8属性で記述してます。

などなど……。


しかしさっきから知ってて当然みたいに

タグ、タグって言ってますが、


《tag(タグ)とは?》

<head><body>のように、<>で囲まれた文字の事を言います。


『これは記号ですからね。文字じゃないからそのまま表示しないでね。』


という意味です。
この<>の中にどんな文字が入るかでその働きが決まります。初めのタグを<開始タグ>といい、最後のスラッシュが入ったタグ</閉じタグ>と言います。

上のタグを入れるとHTMLはこう進化します。


<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8“>

<title>HTMLのページ</title>

</head>

<body>

<p>

『初めまして!HTMLでございます。』

</p>

</body>

</html>


おお!<head>タグの中の情報が増えて、より知的な生物の姿が浮かび上がってきました。

飽くまで、イメージですけど……。


タグの種類そりゃあもう数限りなくありますから、その種類と働きについては

TAG-index

さんの方でわかりやすく、端的に、且つ詳しく紹介されていましたので是非ご参照ください。


 じゃあ試しに まず、この上のHTML文章ソフトに書き写してみます。


『メモ帳』に記入。

ファイルの拡張子を『html』に変更します。

拡張子をhtmlに変更。

そしてこのファイルをブラウザで読み込んでみましょう!

↓↓↓

HTMLファイルをブラウザソフトで読み込む方法


ブラウザソフトの画面。

はい出来た!!

ちゃんと表示されました。されましたが……。


So what!?

(だから?何だというんだい?)


な感じがしませんか?


え?出来たって……、 

なに炒め? なに味? 何料理? 煮物? 焼き物?


斯様に……、


HTMLとは


文字や画像を表示するための形式、道具

の事であって、

情報(料理)を乗せるプラットホーム(お皿)の事で、

実際の内容の良し悪しは、

それぞれの情報そのもの

である事は言うまでもありませんね。

切って、煮て、焼いて、盛り付けて……、

so what??

ではなく


何を、どう面白く、見易く、興味深く見せるか。魅せるか。

これを料理に例えると……、


厨房(HTML)、食材(情報)、そして料理人(運営者)。この三つが揃ってはじめて料理(サイト)が出来る。味付けはセンス。料理人の感性、フィーリングに任される。調味料(CSSなど)をうまく使って、美味しい料理(有用なサイト)を完成させよう!!

例えられるかもしれません。


CSSとは?

カスタムリンクとは?


《カスタムリンクとは・・・カスタムな、リンクの事か……。》


そもそも『カスタム』とは何か?


『カスタム』という言葉の意味は、


習慣、風習、慣例、関税


 だ、そうです。

『関税』はちょっと違いそうなので、

この場合、『習慣風習慣例』を用いて、

『例の、いつもの、毎度の』

解釈してみます。

つまり『カスタムリンク』とは本来、

サイト管理者の都合や好みに合わせて、

サイトの好きな場所に、自由に貼れるリンク。

解釈できそうです。


HTMLでは『<a href=””>~</a>タグを使いますが、地の文章中に散らばったリンクを探し当てるのはとても面倒で効率が悪いため、

 WordPressに搭載されている『カスタムリンク機能』ではそれをメニューに割り当てる事で、閲覧者より簡単に、より自由にリンク情報閲覧をできるように工夫されています。


これを飲食店に例えると……。

きまぐれマスターの『日替わりお薦めランチ!!』


と例えられるかもしれません。


★カスタムリンクを作る★


まず、『外観』⇒『メニュー』メニューページを開きます。


『投稿』・『カスタムリンク』・『カテゴリー』のなかから、

『カスタムリンク』をクリックします。(上図 コレ。1)

メニューは、とりあえず『トップメニュー』を選びます。(上図、コレ。2)


カスタムリンク編集画面2

URL の欄随意のサイトのアドレスを書き込みます。 (上図 コレ。1)

リンク文字列にはリンク名を書き込みます。 (上図コレ。2)

《ココでは仮に、アドレスを私のネットショップ『suzuri』

サイト名『net shop』にしてみました。》

そして『メニューに追加』(コレ。3)をクリックします。


カスタムリンク編集画面3

追加した『net shop』メニューの一番下に追加されています。それを一気に、一番上『home』までドラッグ!

カスタムリンク編集画面4

そして『home』の副項目にドロップ!

ドロップしたら、『メニューを保存』をクリック。(上図 コレ。)

じゃあ、実際、『トップメニュー』『カスタムリンク』が設定されたか見てみましょう!

カスタムリンク編集画面5

『home』にカーソルを合わせると、『net shop』と副項目が表示されました。クリックしてみると……。(上図 コレ。)


カスタムリンク編集画面6

ちゃんと、リンクしてました。

ご来店お待ちしております。