選挙、終わりましたね。自民党の圧勝で終わりました。憲法改正の発議ができる2/3には届きませんでしたが、大健闘だったと思います。私が投票した候補も当選していました。めでたし!!
さて今日は、私がブログ記事を書くときに良く使うhtmlタグを紹介したいと思います。沢山あるタグの内のほんの一部ですが･･･。
被リンクだなんだと言いながらも、美しいコードで書かれているhtmlというのはそれだけでもSEOに寄与します。ってか、めちゃ重要らしいです。かくいう私も、Webデザイナーの友人に「汚い!!」と罵られながら書いているのでどこまでお手本になれるかわかりませんがorz
※注 あくまでブログの記事を執筆するときの話です。
目次
htmlコードあれこれ。
- ulタグとolタグとliタグ
- リストタグですな。ulかolでくくり、その中のリストをliでくくる。ulは箇条書き、olはナンバリングされる。
<ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul>
これを実際に表示させると
- あいうえお
- かきくけこ
- さしすせそ
となります。これをolタグに替えると、
<ol> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ol>
- あいうえお
- かきくけこ
- さしすせそ
という感じ。アタマに数字がつきましたね。これ、表示が黒丸だったり「1.」だったりするのはそのテーマのCSSによって違ってきますのでご注意を。 - hタグ
- 見出しタグですな。h1.h2.h3･･･とあるわけで、数字が若いほど大見出し、大きくなるほど小見出しになります。だいたいタイトルにh1が使われていて、h1はひとつの記事に1回しか使えません。で、この見出しタグは、重要なことと位置づけて検索エンジンな読み込んでいます。
<h2>あのねのね</h2> <h3>あのねのね</h3> <h4>あのねのね</h4> <h5>あのねのね</h5>
これを実際に表記させてみると･･･
スポンサーリンクあのねのね
あのねのね
あのねのね
あのねのね
となるわけです。ちなみにこのブログテーマにはheadline1とheadline2というclassが当てられていますので、私はheadline1というclassを当てていつも小見出しをつけています。<h2 class="headline1">あのねのね</h2> <h3 class="headline1">あのねのね</h3> <h2 class="headline2">あのねのね</h2> <h3 class="headline2">あのねのね</h3>
は、こんな感じになります。
あのねのね
あのねのね
あのねのね
あのねのね
まぁこれはこのテーマのclassですので、ご自身のブログでまったく同じ名前でcssが書かれていないと機能しません。 - blockquoteタグ
- 引用タグですな。どこかから文章や画像を引用してくるときは、引用元を記載した上でこのタグでくくって表記します。著作権を守るためにもこれは必須ですね。
<blockquote>岩波書店が、１９３０年から続けてきた「六法全書」の刊行を、昨年秋に出した２０１３年版で終了したことが２２日、わかった。 http://dailynews.yahoo.co.jp/fc/economy/publishing/?1374498062</blockquote>
実際の表示は
岩波書店が、１９３０年から続けてきた「六法全書」の刊行を、昨年秋に出した２０１３年版で終了したことが２２日、わかった。
http://dailynews.yahoo.co.jp/fc/economy/publishing/?1374498062
です。これもcssによって見え方が違います。が、明らかに普通の本文と違うことが見て取れますよね。 - strongタグとemタグ。
- 強調タグですな。emは強調、strongはさらに強調、です。昔はbやiを使っていましたが、今は推奨されていません。
<strong>あのねのね</strong> <em>あのねのね</em>
ブラウザによって見え方は違うかもですが、
あのねのね
あのねのね
となります。 - hrタグ
- これは線を引くためのタグです。くくりません。これ単体で線ほ引きます。
<he>
だけで
こんな線が引けます。他にも、<hr size="5"> <hr width="100"> <hr width="50%"> <hr width="50%" align="left"> <hr width="50%" align="right"> <hr color="blue"> <hr size="10" width="50%" color="red">
と書くと、実際にはこんな感じになります。
ここから
ここまで
ん？なんかうまく表示されないな。このテーマのcssではアカンのかな？まぁ、みなさんそれぞれ自分のブログでプレビューしてみてください。 - dlタグ
- 定義リスト。定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。
dlでくくり、定義する用語をdt、その説明をddでくくります。<dl> <dt>食べ放題コース</dt> <dd>お鍋と一品料理が食べ放題です。2980円。</dd> <dt>食べ飲み放題コース①</dt> <dd>上記食べ放題コースに、飲み放題もプラスしたコースです。3980円。</dd> <dt>食べ飲み放題コース②</dt> <dd>上記食べ放題コースに、ビールもOKな飲み放題コースです。4480円。</dd> </dl>
う～ん、飲みに行きたくなったw実際の表示は
- 食べ放題コース
- お鍋と一品料理が食べ放題です。2980円。
- 食べ飲み放題コース①
- 上記食べ放題コースに、飲み放題もプラスしたコースです。3980円。
- 食べ飲み放題コース②
- 上記食べ放題コースに、ビールもOKな飲み放題コースです。4480円。
何度も言いますが、お使いのテーマのcssによって表示のされ方は変わってきます。
そしてなにを隠そう、この説明記事自体、dlタグ使って書いてます。
使わない方が良いタグ
使わないタグ、というものもありまして。過去の遺物ですな。現在では推奨されていません。例えば下線を引くuタグや打消し線をひくsタグなど。下線はスタイルシートを使います。打ち消し線はdelタグを使いましょう。記事を書いた後でキャンペーンが終わったときなどに便利です。
ほかにも改行のbrタグなどもありますが、これも行間をあけるために連続で書くのはあまりよくないとされています。私は
<p style="margin-top: 3em;">
と記述することが多いです。3emを5em、10emと数字を大きくすればそれだけ行間が開きます。
例えば、
おおきなかぶ<p style="margin-top: 3em;">うんとこしょ <p style="margin-top: 5em;">どっこいしょ <p style="margin-top: 8em;">それでもカブは <p style="margin-top: 10em;">抜けません。
と記述すると、こんな感じ。
おおきなかぶ
うんとこしょ
どっこいしょ
それでもカブは
抜けません。
古い記述方法は使わないことと、スタイルはhtmlには書かずにcssに書きましょう。その方がソースも軽くなり、読み込みも早くなります。
こんなもんプロから言わせれば常識中の常識で、いまさらなに言ってるの？なレベルの話なんですが、ブログを始めたばかりの方にはとっつきにくそうなhtml。少しでもなじんでいただけたらな、と思います。
