「リンク」と「画像」をマスターするための
もくじ



○「リンク」が使えるようになるとweb作成が楽しくなる


 
  リンクの基本形は思いのほか単純だった
 
  別ウインドを開く「target="_blank"」は知らないと損
 
  長いページでこそ生きてくる「ページ内リンク」

○「画像」がわかると華やかなページが作れるようになる


 
  まずは画像の設置場所について ひとこと大事なこと
 
  画像の貼り付けの基本形を押さえる
 
  画像貼り付けの基本形はシンプル
 
  画像ファイルの代わりに画像URLを入れてみる
 
  画像の貼り付けで知っておきたい命令文3つ
 
  代替テキストと呼ばれる「alt=" "」は見えないけど大事
 
  画像の枠線に「border="○"」を使う?
 
  画像の大きさを変える「width」「height」も重宝する
 
  「画像」と「リンク」のあわせ技は意外とよく使う
 
  「画像」+「リンク」のあわせ技で使い道が広がる
 
  大きな画像を別画面で表示するのも「画像」+「リンク」でOK

○目に見える部分を最後まで作り上げる


 
  別ページにリンクするサイドメニューを作ると読者にやさしい
 
  著作権表示をみんなしているけど・・
 
  かんたんなプロフィールを載せてブランディングをする

○webサイトのHTMLの入力内容を見る方法をご存知ですか?





グーペ公式サイトへのリンク



「リンク」が使えるようになると
web作成が楽しくなる




リンクの基本形は思いのほか単純だった



「リンク」の基本形

<a href="リンク先のURL" >リンク先のサイト名など</a>



まずはリンクの基本形を使って、私が運営
しているwebサイトへリンクするよう設定
してみました。


ちなみに私のサイトは・・

サイトURL:http://homepagenotukurikata.com
サイト名:ホームページの作り方/初心者でも簡単!webサイト作成のコツ

です



<TeraPadの表示>
※クリックすると大きな画像が見れます
ホームページの作り方/初心者でも簡単!webサイト作成のコツへのリンクを貼り付けているHTMLの画像
矢印
<ウェブブラウザの表示>
ホームページの作り方/初心者でも簡単!webサイト作成のコツ


リンクの基本形はサイトURLサイト名
入れ替えるだけでカンタンにできあがります。

どうです?意外とカンタンでしょ?



別ウインドを開く「target="_blank"」
は知らないと損



別ウインドを開く「target="_blank"」

<a href="サイトURL" target="_blank" >サイト名</a>


リンクの基本形に「target="_blank"」を書き込むと、
新しいウインドウでリンクが開きます。

最初にご紹介した「基本形」では、今ご覧になっている
ベージが、リンク先のページにそのまま変わりましたが、
「target="_blank"」では今の画面を残したまま新しい
ページを表示させることができます。

今の画面が変わってしまうと、来訪者がリンク先に行って
しまったまま、二度と返ってくることがないなんてことも
よくあります。訪問者に少しでも自サイトに戻ってきて
もらうための工夫でもあります。

そういう意味で重要なのでよく使います。
ぜひ覚えておいてください。



<TeraPadの表示>
※クリックすると大きな画像が見れます
ホームページの作り方/初心者でも簡単!webサイト作成のコツへのリンクを貼り付けているHTMLの画像
矢印
<ウェブブラウザの表示>
ホームページの作り方/初心者でも簡単!webサイト作成のコツ

実際に「基本形」と「target="_blank"」を
クリックして違いをご確認ください。

使い分けすると便利だと思いませんか?



長いページでこそ生きてくる「ページ内リンク」


ページ内リンク先を指定する

<a href="#○○○">指定する場所の名前など</a>
矢印

<a name="○○○">指定する場所の名前など</a>

上のhrefと#を使った命令で、ページ内の指定する
場所にリンクさせることができます。

指定された場所に<a name="・・・と命令文を
書いておく必要があります。

言葉で説明するのは難しいですが、長いページで
「もくじ」に使うことが多いので、実際にリンクを
使われたら「ああ、こういう使い方のことね!」と
ご理解いただけるでしょう

もくじを使った例を作りましたので、実際にクリック
してみてください↓↓


<TeraPadの表示>
内部リンクのタグを示した画像
矢印
<ウェブブラウザの表示>

<もくじ>
・見出し1
・見出し2
矢印
見出し1

 文章・・・
 文章・・・

見出し2

 文章・・・
 文章・・・





「画像」がわかると華やかなページが作れるようになる



まずは画像の設置場所について ひとこと大事なこと




画像ファイルはどこに保管しても
問題はないのですが、今回は下の画像の
ようにhtmlファイルと同じフォルダ内
保管して作業をします。

なぜなら、初心者の方にはフォルダの場所
を示す記述が難しくなるからです。

慣れてきたら保管場所を分けるのも
いいと思います。

興味のある方は「相対パス」と「絶対パス」
のキーワードで調べたら詳しくわかりますよ。



画像の保存場所の画像



画像の貼り付けの基本形を押さえる



画像貼り付けの基本形はシンプル

<img src="画像のファイル名や画像URL">

トップページの冒頭の写真を貼り付ける
ことを例にお話します。

↓↓この写真です


本を真剣に読む外人女性の画像


なお、写真はこのページのhtmlファイルと
同じ場所に保存してあります。

画像のファイル名は「copywriting.jpg」です。


画像の保存場所の画像


画像ファイルをhtmlと同じファイルに保存
して、画像の名前を入れるだけで写真が
表示されます。

カンタンですよね。



<TeraPadの表示>

画像表示のための命令文の画像 矢印
<ウェブブラウザの表示>
本を真剣に読む外人女性の画像


写真画像は無料で手に入れることもできます
ので、実際に写真をダウンロードして試して
みてください。


参考サイト→ サイトデザインを劇的に変化させる写真素材


画像ファイルの代わりに画像URLを入れてみる




さて突然ですが、画像URLとはナンでしょうか?

画像URLとは、アップロードしてある画像、言い
換えれば、ネット上で見ることのできる画像の
置き場所を示す住所のようなもので、http://~
というURLで画像の場所を表示したものです。

たいていは、アップロードしてある画像の上で
右クリックすると、下のようにURLをコピーできます。



画像URLをゲットする方法を示した画像


右クリックでgetした画像URLを貼り付けた
画像の表示は下のようになります↓↓



<TeraPadの表示>

画像表示のための命令文の画像 矢印
<ウェブブラウザの表示>

本を真剣に読む外人女性の画像


※画像のコピーは著作権の問題がありますので、
 安易に行わないようご注意ください。



画像の貼り付けで知っておきたい命令文3つ




代替テキストと呼ばれる「alt=" "」は見えないけど大事

<img src="画像のファイル名や画像URL" alt="画像の説明">


altタグは代替テキストと呼ばれ、画像が表示
されない時に「画像の説明」が代わりに出てくる
というもの。

わざと画像が表示されないよう、間違ったファイル名
を入力してみました。



<TeraPadの表示>

代替テキストを表示させるための画像 矢印
<ウェブブラウザの表示>

画像URLをゲットする方法を示した画像



altタグは「代替テキスト」という意味とは別に、
「音声」としての使い方もあります。

目が不自由な方は、webサイトの文字を音声合成
で読み上げて「聞いて」います。

altタグに適切な説明が入力されていると、
とても有効です。

このほかaltタグには、画像の内容を適切に
検索エンジンに知らせる働きがあるといわれて
います。

altタグは画像が表示されている限り、画像の
説明は見えませんが、きちんと画像の説明を入れて
いるサイトは、上位検索のためにもプラスに作用します。

画像の説明の部分になにも入れない
「alt=" " (ブランク)」でも、重大な
問題になることはありませが、可能な限り
適切な内容を入力するほうが良さそうです。

altタグについてまとめた記事も作っています
ぜひ読んでみてください。


  → Googleが伝える、適切な「alt属性の入力」のススメ



画像の枠線に「border="○"」を使う?

<img src="画像のファイル名や画像URL" border="○">

※"○"には枠線の太さを表す数字が入ります


枠線なしの画像に「border=" "」を入れると
枠線が表示されるということですが・・

ただし、border属性はhtml非推奨属性の為
表示できないものも多くあるようです。

ですから、画像処理ソフトなどで枠線をつけて
おくのが良さそうです。

参考サイト→ 画像の加工を覚えると、サイト作成の幅がグンと広がります



画像の大きさを変える「width」「height」も重宝する

<img src="画像URLなど" width="○○" height="○○">

※"○○"には画像の大きさを表す数字が入ります

「width」は、画像の横の長さを、
「height」は画像の縦の長さを指定
する命令です

下の例では横の長さを750pxから550pxに
変えています


<TeraPadの表示>

※クリックすると別画面に元々の750pxの画像が表示されます
画像の長さを変える命令文の画像




「画像」と「リンク」のあわせ技は意外とよく使う



「画像」+「リンク」のあわせ技で使い道が広がる

<a href="リンク先URL"><img src="画像URLなど"></a>

画像をクリックしたら別のサイトに
飛んでいく仕掛けは意外とよく使います。

「ボタン画像」をご存知ですか?

「今すぐここをクリック!」というメッセージ
がボタンの上に書いてあるボタンが代表例です。



<TeraPadの表示>

※クリックすると大きな画像が見れます
画像をクリックするとリンクする命令文の画像
矢印
<ウェブブラウザの表示>

本気でHTMLを身につけたい方は、今すぐ下のボタンを
クリックして公式サイトを確認してください

          ↓↓↓

 

※このボタンを押すと「自分で更新できる最短ホームページテンプレート」という
 商品の販売公式ページに本気で飛んでいきますのでご注意ください!!
 (この商品のおかげで私がHTMLをマスターできた いい商品ですが・・)



大きな画像を別画面で表示するのも「画像」+「リンク」でOK

<a href="画像のファイル名や画像URL"><img src="画像のファイル名や画像URL"></a>

先ほどから多用してますので、お気づき
の方もいらっしゃると思いますが、

大きな画像を別画面で表示するのも、
「画像」+「リンク」の応用です。


<TeraPadの表示>

※クリックすると別画面に元々の大きな画像が表示されます
画像の長さを変える命令文の画像



目に見える部分を最後まで作り上げる



別ページにリンクするサイドメニューは読者にやさしい




<TeraPadの表示>

※クリックすると大きな画像が見れます
サイドメニューの画像
矢印
<ウェブブラウザの表示>

サイドメニューの画像


<div id="sub">より下がサイドメニューの
部分ですが、他ページへのリンクは、
「リンク」+「リスト」で作られています。

気をつけていただきたいのが、htmlファイルの
保管場所です。

リンクに「index.html」や「picture.html」が
ファイル名だけ記載してあります。

これは下の画像のように、同一フォルダにすべての
htmlファイルが入っている場合にできる記載です。


サイドメニューの画像


同一フォルダにすべてのhtmlファイルが入って
いない場合は該当ページのURLなどが入ります。



著作権表示をみんなしているけど・・



よくホームページの下に、このような表記が
あるのを見かけます。

「Copyright 2015 ~ All rights reserved」

これは、ホームページの著作権を主張する表記です。

ちなみに、著作権表示には次の3要素を入れます。



著作権表示の書式
万国著作権条約に基づく著作権表示には、次の3つの表示が必要である。
○ ©の記号 (symbol c)、「Copyright」
○ 著作権者の氏名 (name of the copyright proprietor)
○ 最初の発行の年 (the year of first publication)

※Wikipediaより抜粋


ただ、驚いたことに・・

現在は、ほぼ全ての法域で著作物を作れば著作権が
発生するので、一切の著作権表示なしで著作権は
保護されてます

だから、記載しなくても大丈夫なのです。

心配な人はWikipediaで調べてみてください


 →著作権表示(Wikipediaにリンクしてます)


でも、みんな書いてるし、書いたほうが安心だし
それらしく見えるから・・と私のように思う人は
記載してもいいと思います

記載方法はテンプレートのHTMLの一番最後の部分に
ある、黒い字のところを書き換えるだけです。

なお半角で「&copy;」とHTMLに記載すると、
丸にCの著作権マークが表示されます



フッターの著作権をHTMLで表示した場合の例示の画像




かんたんなプロフィールを載せてブランディングをする




サイドメニューの下の部分にプロフィールを記載
しました。
出来上がりはこんな感じ


サイドメニューにプロフィールを掲載した画像


画像は160px×160pxの正方形のものを使用してます。

ここではサイドメニューの幅が180pxなので、180pxの
正方形でも良かったかもしれません。

あとは「別ページにリンクするサイドメニュー」の
下の部分に入力するだけです
(今まで書いてきた入力内容だけで対応できます)


サイドメニューにプロフィールを掲載するHTMLの記載場所を表示した画像


パソコンの中で作業するだけなら、見える部分を
修正すれば以上で作業終了でしょう。

ひとつひとつの作業を自分なりにアレンジして
ゆくと、きっと満足のいくサイトが作れるはずです。

最後に1つだけ、HTMLを勉強してwebサイトを作ろう
としている方に、他の先輩サイトがどのような
HTMLを組んでいるのか参考にできるよう、便利な
知識をお伝えします。ぜひ使ってみてください。



webサイトのHTMLの入力内容を見る方法をご存知ですか?




いろいろなサイトのHTMLソース(記載内容)を知りたい
という方も多いはず。

どのwebサイトでも簡単に確認できますので、一度
ためしてみてください。

ウェブサイトが開いている状態で「右クリック」して
「ページのソースを表示」をクリックするだけです。


右クリックしてページのソースを表示させる画像

矢印
右クリックしてページのソースを表示させた画像



以上で無料テンプレートを使ったHTMLの作業は
終わりますが、目に見えない部分の作業で実は
重要な「タイトルの変更」や「サイト説明文作成」
(説明文のことをメタディスクリプションといいます)
などの作業を残しています。


作ったwebサイトを公開するとなると
レンタルサーバーの契約をしたり、ドメインを
取得したりしなくてはなりません。

検索エンジンの順位をあげて、多くの人に見て
もらえるようにSEO対策という、検索エンジン向け
にwebサイトを構成する作業にも気を遣わなくては
なりません。

小難しく書きましたが、これもひとつひとつ
調べながらやっていくうちに、わかってきます。
途中で投げ出さない限り大丈夫ですよ。



楽しそうに綱渡りをしている画像

「挑戦することは 楽しいかも」



私はHTMLの習得が難しくて挫折してしまった経験が
ありますが、ソフトを使ってサイト作成に取組み
サイトを作っているうちにHTMLができるようになりました。

自分の経験から、サイト作成はソフトを使って
効率的にやったほうが結果的に早道だと考えています

※私のサイト作成を始めた頃の経験は↓↓こちらに記載してます。

 →  サイト作成をはじめた理由は「副業で稼いでみたい!」


ですから、ここまで無料テンプレートでのHTMLを
ご説明してきましたが、本当のおすすめはソフトを
使ったwebサイト作成です。

本気でサイト公開して、いろいろな人に記事を見て
もらおうとお考えなら、記事作成に集中できたほうが
いいと考えているからです。

ですから、簡単で圧倒的に記事作成に集中できる
「ホームページ作成ソフトの利用」を真剣に検討
してみてください。

ソフトを考えてみる方は、今すぐこちら↓↓で確認!!

 →  ホームページ作成ソフトを決める!簡単で便利なソフトはありますか?



もし、どうしてもHTML習得からきちんと学びたいなら、
「自分で更新できる最短ホームページテンプレート」の
ようなテンプレートを使うのがいいと思います。

 ※レビューページを作りました

  → 自分で更新できる最短ホームページテンプレート 特典付きレビュー


最近は「モバイルフレンドリー」といって、スマホ
などに対応したwebサイトが良いとされる傾向が
ありますので、そういうものにもきちんとした対応
を求められます。

「自分で更新できる最短ホームページテンプレート」なら
モバイルにも対応可能です。

私の記事を参考にしてみてください

 → あなたのサイトは「モバイルフレンドリー」ですか?


これからサイトを公開して、もう1つ上のステージで
やってみたいとお考えの方は、ぜひ私のサイトを
参考にしてみてください。きっと役に立ちますよ。

 トップページです
  → ホームページの作り方/初心者でも簡単!webサイト作成のコツ

 ここから検討してもいいかも
  → ホームページ作成ソフト購入までにしておきたい「4つの準備」





グーペの公式サイトへのリンク


Category

管理人deep

管理人deep

管理人の「deep」です。
よろしくおねがいします。

3児の父、現役サラリーマン アフィリエイーターです。

今から4年前、HTMLによるサイト作成に多くの時間を投入しましたが、あえなく挫折。

2年後に再びホームページ作成に取組み、今では毎日600人もの人が集まるサイトを作ることができました。

この経験を生かして、これからホームページを作ろうとお考えの人たちに、できれば最短距離でサイト公開して欲しいと考えています。

運営サイトの「ホームページの作り方」では、サイト作成のポイントやコツをわかりやすくご説明してますので、きっと「稼ぐホームページ」が作れるようになりますよ



私がおすすめするソフト

SIRIUS

SIRIUSのイメージイラスト

HTMLでサイトを作成するソフトで、私がこれまで一番よく使ってきたソフトです。

直感的な操作で簡単に高品質なサイトを作れるのが最大の特徴です。

操作性が良いのでwebサイト作成のストレスがとても少ないのが特徴です。

入力が必要な項目はポイントが押さえてあり、SEOにも強いという特徴がありますので、上位検索を目指して稼ごうとお考えの方にはおすすめのソフトです

バージョンアップで追加料金が発生したことはないので安心して使うことができるのも魅力です。

サポートフォーラムも充実しており、わからないこともフォーラムでで解決できます。

私が実際にSIRIUSを使って作成したホームページをぜひご確認ください


シリウス(SIRIUS)でホームページを実際に作成した使用感を記事にしました

私がおすすめするソフト

自分で更新できる最短ホームページテンプレート

自分で更新できる最短ホームページテンプレートの商品イメージ画像

どうしてもHTMLをマスターして、一生ものの知識を身につけたいとお考えのあなたにぜひおすすめします!

この商品は「ソフト」ではなく、HTMLのテンプレートを直接加工してwebサイトを作ります。

最大の特徴は「動画解説」です。解説の大部分が動画で、難解なHTMLが簡単にマスターできます。

購入して試してみましたが、あまりにスイスイできてしまったので驚きました

私が「自分で更新できる最短ホームページテンプレート」で作成したレビューページをぜひご覧ください


自分で更新できる最短ホームページテンプレート 特典付きレビュー

私がおすすめするソフト

賢威7.1、8

賢威8のイメージ画像

wordpressでホームページを作ってみようかな?とお考えのあなたには断然おすすめのソフトです。

wordpressのデザイン性の高いページが作れるほか、カスタマイズもできるので、上級者まで対応できます。

テンプレートは基本無償バージョンアップ。追加費用がかからない安心感がいいです。

特に初心者の方には「SEOマニュアル」と「サポートフォーラム」がついているのが心強いです。

マニュアルは正統派のSEOが解説してあり、正しく実践することで、検索エンジンの上位表示を目指すことができます

サポートフォーラムはわからないことにぶつかったときに頼りになります。たいていの疑問はここで解決できます。

フォーラム利用は賢威購入者なら無料でできます

私が「賢威」で作成したレビューページをぜひご覧ください


賢威7を実際に使い、webサイトを作った感想を書きます

私がおすすめするソフト

グーペ

グーペー公式ページへのリンク画像

お店のホームページに強みを持つホームページサービスです。

テンプレートも豊富で、定型のフォームに入力していくと、デザイン性の高いきれいなお店のホームページが出来上がります。

忙しいお店の経営の合間に更新をすることができるよう、シンプルに作りこみがされています。

初心者でホームページのことがよくわからない方でも、ワードやブログの感覚で入力が可能です。

めんどくさいドメインの契約、サーバー設定は不要。

更新はスマホでもできてかんたん!副管理者を置くことでスタッフの方が更新することも可能です

お店のホームページをご検討されている方は、ぜひ選択肢の一つに入れてください。

グーペー(Goope)でも実際にホームページを作りました。ぜひ参考にしてください。


グーペを実際に使い使用感を記事にしました

ホームページ作成ソフトの選び方

パソコンの前でこちらに向かってOKサインをする若い女性の画像

ホームページ作成ソフト選びにこちらのページもぜひ参考にしてください

google検索でも上位表示されているページです

ホームページ作成ソフト 簡単で便利なおすすめソフトの選び方

ホームページ作成ソフト徹底比較!使いやすいソフトはどれ?

比較して考える若い女性

あなたの探しているソフトはどんなソフトですか?ホームページ作成ソフトにはそれぞれのソフトの特徴があります。

SIRIUS・賢威8・グーペ(Goope)・jimdo・wixなど人気主要8商品を徹底比較!実際にソフトを使って作成したwebサイトでソフトの特徴も詳細にご説明します

ホームページ作成ソフトを徹底比較!使いやすいソフトはどれ?

ページのトップへ戻る