格安ホームページ制作のことならスマホームページにお任せください。
低コストで高品質なスマホ対応ホームページをご提供します。

ブログ

ある日突然上司から「ホームページを修正して」と言われたときに役立つHTMLタグ講座

ある日突然上司から「ホームページを修正して」と言われたときに役立つHTMLタグ講座

HTMLタグは一見難しそうですが、覚えてしまえばちょっとしたホームページの更新や変更ができるようになります。
「自社のホームページを修正して欲しい」など突然の上司の無茶振りにも対応できる、簡単なHTMLのタグを解説します。

はじめに

日本はロシアW杯で盛り上がってますね。
日本代表も何とか決勝トーナメントに進出することができました。どんな形であれ嬉しいですね。
さて、4月の入社や部署移動から2ヶ月経ち、新しい部署での役割も少しずつ慣れて来た頃でしょうか?
そんな時に突然上司から「自社のホームページを修正して欲しい」と言われたら…どうしましょう!?
最近ではWordPressのような自社で更新できる仕組みを導入している企業も多く、ホームページを作る際に使用するHTML言語を理解してなくても、ブログのようにコンテンツを更新・修正できる環境が整っているケースがあるかと思います。
しかし、未だに5年、10年ホームページをリニューアルしてないケースも少なくありません。レイアウトの変更はしないけど簡単な文字修正ならやりたいよ、などという場合もあるかと思います。
今回はそんな突然の上司の無茶振りにも対応できる、簡単なHTMLのタグを解説します。

まず準備しましょう

さあ、ホームページを更新しようと思っても、まず何からすればいいの?って感じかと思います。
CMSやブログなどは記事を書くときのタイトルがページタイトルになるケースが多いので、今回はHTMLデータが手元にある場合のお話をします。 ホームページが公開されている場所、つまりホームページのファイルが置いてある場所がいわゆるサーバーという所です。
FTPクライアントというソフトウェアを使ってサーバーに接続して、ホームページのデータをダウンロードしましょう。
ダウンロードしたデータの中に「.html」という拡張子がついたデータがあるかと思います。それを「メモ帳」で開いてみましょう。
無料で「TeraPad」というエディタもありますのでそちらを使ってもいいです。

TeraPad
https://tera-net.com/library/tpad.html

さて、htmlデータをメモ帳などで開くと、難しい暗号のような文字や記号の羅列があるかと思います。 その中で該当する下記のタグを探しみてください。

ページタイトルを変えたい

タイトルタグ

ページタイトルはタグの中でも重要な要素の一つです。
ホームページを開くとブラウザのタブに表示されますしね。
SEOと言って検索エンジン対策としてもまず始めに注意する場所になります。
で囲まれた文字列を修正することでそのページのタイトルを変えることができます。
変更したらサーバーの元の場所にアップロードして上書きしてみてください。
ほら、変わっているでしょ? ただし元のデータはバックアップを取って置いてくださいね。

リンク先を変えたい

リンクタグ

テキストに別のページや外部のホームページにリンクをしている場合がありますよね?
リンク先やそのテキストを変更したい場合は、「aタグ」を編集することで可能です。
「href=””」の「”」と「”」の間にリンク先のURLを入れるか、変更することでリンク先を変えることができます。
さらに、「aタグ」に囲まれているテキストを変更するだけで、リンクされている文字も変えることができます。
さあ、編集したらまたサーバーにアップして確認してみましょう。

画像を載せたい

イメージソース

ホームページに写真を載せることもありますよね。
そんな時はタグを使いましょう。
「src=””」に画像へのパスを書きます。パスというのは、現在あなたが開いているファイルから見て、画像ファイルが置いてある場所を示す文字列のことです。
width=”幅”には画像ファイルの横サイズ、「height=”高さ”」の「”」と「”」の間には画像ファイルの高さを、「alt=””」「”」と「”」の間には画像の説明を書きましょう。

例えば、「A.html」と「company.jpg」という画像データがあるとします。この2つが同じ階層にある場合は、 “画像のパス”の部分に「company.jpg」と書きましょう。 イメージソース2 もし「A.html」と同じ階層に「profile」というフォルダがあって、その中に「company.jpg」画像があった場合は、”画像のパス”の部分を下記のように「/(スラッシュ)」で下の階層を指定します。

イメージソース3

さらに「A.html」の上の階層に「profile」というフォルダがあって、その中に「company.jpg」画像があった場合は、”画像のパス”の部分を下記のように「../(ドットドットスラッシュ)」で下の階層を指定します。

イメージソース4

パスについては「絶対パス(絶対URL)」と「相対パス(相対URL)」という2通りの書き方があります。 またパスについては後日説明いたします。

まとめ

まずは基本の3つをお教えしましたがいかがでしょうか?
タグにはたくさんの種類があり、慣れるまで難しく感じることがありますが、逆に言えば覚えてしまえば、ちょっとした更新・編集ならどのホームページでも編集できるようになります。 これを機会にHTMLに慣れ親しんでくださいね。

ある日突然上司から「ホームページを修正して」と言われたときに役立つHTMLタグ講座

この記事を気に入っていただけたらいいね!フォローをお願いします!