はてなブログでHTML・CSSを使ってみよう HTML編

本記事はHTML編ですので、CSSのカスタマイズはこちらを参考にして下さい。

CSSではてなブログをカスタマイズしてみよう | SHIROMAG

HTML・CSSが分かると便利

ブログでのHTMLやCSSの使用はある程度制限がありますが、使い方を知っておくと結構便利です。WEBサイトを作るとなると、覚えることがいっぱいありますが、ブログで使用するくらいならポイントを抑えるだけで十分です。

ちなみに私は普段は「見たまま編集」を使っていますが、気に入らない部分があると「HTML編集」をいじります。

今回ははてなブログをベースにHTMLの使い方を紹介してみようと思います。基本的な内容なので、初心者向けです。

 

まずはタグを覚えよう

HTML編集をのぞいてみると分かりますが、はてなブログでは、<h3> ～ </h3>で囲まれた部分が大見出しになります。以下見出しのタグ一覧です。

 

 

 

リンクタグとスタイルタグについて詳しく説明していきます。これだけでも色々使えるので、覚えておくと便利です。

あと、HTMLのタグは全て半角英数で記述して下さい。

 

知ってると便利リンクタグの使い方

<a> ～ </a>で囲まれた部分がリンクになります。別のページやサイトに飛ぶように指定できます。↓

はてなブログ | シンプルでモダンなブログライフを無料で。

上のリンクは

このようになっています。href=”リンク先のURL” でリンク先のURLを指定できます。ただ、リンクをクリックするとこのブログを離れて違うページに行ってしまいます。

別のタブを開いてリンク先に飛ぶようにしてみましょう。

target=”_blank” を追加すると別のタブを開いてリンク先に飛ばすことができます。これ結構使うので覚えておくと便利です。

試しに下のリンクをクリックしてみて下さい。別のタブを開いてリンク先に飛んだと思います。

はてなブログ | シンプルでモダンなブログライフを無料で。 

 

あと、同じページ内の特定の場所にリンクを飛ばすことができます。

例えば、指定の大見出しに飛ばしたい場合。その場合は<h3 id=”名前”>でidを指定してあげます。そして、<a href=”#名前> ～ </a>でリンク元に記述します。

では、このブログの一番最初の大見出しに飛ばように設定してみます。

次はリンク元の設定。

実際の例がこちら

一番上の大見出しに戻ります

 

ちなみに、<a href=”#”> のようにid名を入れずに # だけを入れた場合はページの一番上まで戻ります。

TOPに戻る

 

ページ内リンクを使えば、目次を作ることもできます。

1. HTML・CSSが分かると便利
2. まずはタグを覚えよう
3. 知ってると便利リンクタグの使い方
4. 特定の文字の大きさや色を変える
5. HTMLは楽しいよ

 

特定の文字の大きさや色を変える

本当はCSSでやるべきなんですが、HTMLでも文字の大きさや色を変えることができます。

<span style=” ここに指定する内容を記述 “>大きさや色を変えたい文章</span>

色を指定したい場合は 　color: #6桁のカラーコード

大きさを指定したい場合は　 font-size: 大きさ

で指定できます。実際に書いてみると、

ここの文字が変わります。

上の例のように、続けて書いていく場合は間にセミコロン（；）を入れます。

文字の大きさを指定する単位はいくつかあるんですが、私はピクセル（px）を使っています。ちなみに単位は偶数が推奨されています。

20px　18px　16px　14px　

HTMLのカラーコードはこちらを参考にして下さい。

html-color-codes.info

 

HTMLは楽しいよ

いかがだったでしょうか。本当はブログでできることはもっといっぱいあるんですが、今回は使用頻度が高い内容の説明をしてみました。

さらにCSSも使えるともっと色んなことができます。実はこの記事もCSSをいじって、文章と文章のスペースを狭くしたり、背景を変えたりしています。（スマホでは分からないけど）

HTML・CSS・JavaScriptを学習するのにおすすめの書籍を紹介していますので、併せて読んでみて下さい。

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

 

ということで、次回はCSSについても説明したいと思います。

（いつになるかは未定）

追記：書きました。

CSSではてなブログをカスタマイズしてみよう | SHIROMAG