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

アフィリエイト広告を利用しています

はてなブログでHTML・CSSを使ってみよう HTML編のアイキャッチ画像

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

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

HTML・CSSが分かると便利

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

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

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

 

まずはタグを覚えよう

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

大見出し・・・<h3> ~ </h3>

中見出し・・・<h4> ~ </h4>

小見出し・・・<h5> ~ </h5>

そして、標準の文章は<p> ~ </p>で囲まれた部分です。

 

リンクを貼るには、<a href=”URL”> ~ </a>

 

指定の範囲だけスタイルを変えるには、<span style=”スタイルの内容”> ~ </span>

 

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

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

 

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

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

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

上のリンクは

<a href=”http://hatenablog.com/“>はてなブログ | シンプルでモダンなブログライフを無料で。</a>

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

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

<a href=”http://hatenablog.com/target=”_blank”>はてなブログ | シンプルでモダンなブログライフを無料で。</a>

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

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

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

 

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

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

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

<h3>HTML・CSSが分かると便利</h3> ←これにidを付けます。

<h3 id=”midashi1″>HTML・CSSが分かると便利</h3> こんな感じ。

次はリンク元の設定。

<p>一番上の大見出しに戻ります</p> ←これをリンク元にします。

<p><a href=”#midashi1″>一番上の大見出しに戻ります</a></p>

実際の例がこちら

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

 

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

<p><a href=”#”>TOPに戻る</a></p> こんな感じ。

TOPに戻る

 

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

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

 

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

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

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

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

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

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

<span style=”color: #FF8000; font-size: 12px”>ここの文字が変わります。</span>

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

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

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

20px 18px 16px 14px 

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

html-color-codes.info

 

HTMLは楽しいよ

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

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

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

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

 

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

(いつになるかは未定)

追記:書きました。

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