リンクの貼り方|アメブロではじめてのHTML | アメブロでできるホームページ講座

アメブロでできるホームページ講座

アメブロの中で実践してホームページ作りが学べる!
初心者が教える初心者のためのHP講座です。

アメブロでお勉強する環境準備がととのったところで、さっそくHTMLタグを書いてみましょう!HTMLタグってなんぞや?とか、よくわかんない事まみれだと思いますが、後々詳しい説明の記事を書きます。まずはタグを色々書いてみて、HTMLと仲良く(?)してみましょう(ノ´∀`*)

リンクを貼るタグ

リンクを貼るタグはこれをワンセットにしたら覚えやすいかもしれません。

<a href="リンク先のアドレス">リンクさせたい文字</a>

でもこれどういう意味かな?詳しく説明しながら、リンクを貼ってみますね!

リンクを貼ってみよう!

リンクとは?

ブログのトップページに行きます

こんな感じにクリックしたら別のページに行けるやつだよ。画像やテキストなんかで、今のページの位置から違うページに行けたり、同じページの違う場所に行けたりできるよ。文字通り、ページとページをリンクする、つまりページとページのつながりをつくる事ができます。

リンクを実際に貼ってみよう

まずは、アメブロのマイページ(ログインした後のページ)から、「ブログを書く」ページに行ってね。リンクしたいページはどこでもいいんだけど、自分のブログ以外のページの方がわかりやすくていいかも。

リンクさせたいテキストをブログの記事を書く場所に書いてね。

よかったらあそびにきてね!

わたしのプロフィール

とりあえず私はブログのプロフィールにリンクさせることにしたよ。

「わたしのプロフィール」っていうテキストにリンクさせたいんだけど、このままじゃブラウザはリンクってかわってくれないから、ここからここまでリンクだよっていうのをブラウザに伝えるために、HTMLのタグで囲ってみるよ。

HTMLは開始タグ(ここから)が「<>」で終了タグ(ここまで)が「</>」になるよ。

よかったらあそびにきてね!

<>わたしのプロフィール</>

HTMLのタグの種類はいっぱいあって、このままだと何を表してるのかわかんないですよね。リンクを表すタグの名前は「a」なので、「a」をいれます。

よかったらあそびにきてね!

<a>わたしのプロフィール</a>

わーいリンクだー!ってどこに行くんでしょう。リンク先のアドレスがわかんないと移動できないですよね。住所の書いてないお手紙みたいな状態です。

HTMLタグにはオプションが付ける事ができます。リンクの「a」のオプションで、「href」っていうのがあって、これでリンク先をブラウザに伝える事ができます。

オプションは開始タグの中に、「オプションの名前="オプションの値"」という形で書きます。どこからかオプションなのかがわかる様に、タグの名前の後に半角スペースを1つ入れて区切ります。オプションの値の部分は「"(ダブルクオテーション)」を最初と最後につけて値を囲みます。

文字ばっかりでよくわかりませんねwとりあえず実際に書いてみましょう。

よかったらあそびにきてね!

<a href="http://profile.ameba.jp/ameba-hp/">わたしのプロフィール</a>

ピンクの部分がオプションのところになります。その中の「http://profile.ameba.jp/ameba-hp/」が私のプロフィールのアドレスになります。オプションの値の部分ですね。

これで「わたしのプロフィール」っていうテキストからプロフィールページにリンクすることができました!

表示してみる

ブログのタイトルを入力して、「全員に公開」ボタンで記事を公開して、ブログのページへ行ってみてみましょう。

よかったらあそびにきてね!

わたしのプロフィール

多分、こんな感じに表示されていると思います。クリックしてみて、ちゃんとリンクできてるかチェックしてみましょう。

リンクが貼れたよ!やったね!

関連リンク