スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログを書くのに便利なHTMLタグ

今日は、私がブログを書く時によく使っている「HTMLタグ」をご紹介します。
特に利用頻度が高いタグは以下の6つです。
※タグの名前は私独自の呼び方で、正確な名称ではありません。
  1. 箇条書きタグ
  2. 箇条書きタグ(番号付き)
  3. 枠タグ
  4. 枠タグ(表題付き)
  5. 引用タグ
  6. ラインタグ
  • 「箇条書きタグ」は、長文になったときに自動で先頭を揃えてくれるなどのメリットがあります(この文章みたいに)
  • 「枠タグ」は、注目させたい箇所を枠で囲むことで見易さがアップします
  • 「引用タグ」は、文章を引用して紹介する場合に利用します
  • 「ラインタグ」は、話題を区切るときによく使います

以下、ブロガーさん以外はあまり参考にならないのと、FC2ブログでないと同じように表示されないかもしれませんが、興味ある方だけご覧ください。
これらよく使う1~6のタグは、パソコンのユーザ辞書に登録しています。イチイチ打ち込んだり、コピペするのが面倒ですから。(”たぐ”と入力して変換すると、以下のタグが変換候補として表示されるよう全6個登録してあります。)

<ul><li> <li> </ul>
<ol><li> <li> </ol>
<dl><dd>~</dd></dl>
<dl><dt>表題</dt><dd>~</dd></dl>
<blockquote><p>引用<p></blockquote> ※実際には[Q]ボタンを利用
<hr>

以下、各タグの詳しい説明です。難しくないのでブログを書く際お試しください。
1. 箇条書きタグ <ul><li> ~ </ul>

<ul><li>箇条書き1
<li>箇条書き2</ul>

と記述すると以下のようになります。
  • 箇条書き1
  • 箇条書き2
2. 箇条書きタグ(番号付き) <ol><li> ~ </ol>

<ol><li>箇条書き1
<li>箇条書き2</ol>

と記述すると以下のようになります。
  1. 箇条書き1
  2. 箇条書き2
3. 枠タグ <dl><dd> ~ </dd></dl>

<dl><dd><日帰り入院保障が役に立たない理由>
・日帰り入院で済む医療費はそれほど大きな負担ではない
・入院証明書を病院に記入してもらうために手数料が発生する</dd></dl>

と記述すると以下のようになります。

<日帰り入院保障が役に立たない理由>
・日帰り入院程度の医療費は、保険を使うほどの負担ではないから
・入院証明書を病院に記入してもらうために手数料が発生するから
※<dd></dd>は不要の場合もあります。試してみてください
4. 枠タグ(表題付き) <dl><dt>表題</dt><dd> ~ </dd></dl>

<dl><dt>日帰り入院保障が役に立たない理由</dt><dd>・日帰り入院で済む医療費はそれほど大きな負担ではない
・入院証明書を病院に記入してもらうために手数料が発生する</dd></dl>

と記述すると以下のようになります。

日帰り入院保障が役に立たない理由
・日帰り入院で済む医療費はそれほど大きな負担ではない
・入院証明書を病院に記入してもらうために手数料が発生する
※<dd></dd>は不要の場合もあります。試してみてください
■捕捉:dl、dt、ddのスタイルシート編集
↓に似た記述箇所を探して、「余白、線の色、太さ」などをいじってみてください。数字を1箇所大きく変えてみると、何が変わるのか分かります。(xxxxはスタイルシートによって異なります)

このブログのスタイルシート
div.xxxxBody dl {
     padding: 0.3em 20px;/* 枠内側の余白 */
     border: 1px solid #ddd;/* 枠線の太さ、実線、色指定 */
}
div.xxxxBody dt {
     margin: 0.5em 0;/* 表題外側の余白 */
     padding-bottom: 0.5em;/* 表題下側の余白 */
     border-bottom: 1px dotted #ccc; /* 枠線の太さ、点線、色を指定 */
     font-weight: bold; /* 表題は太字 */
     color: #0066cc; /* 色は気分で・・・ */
}
div.xxxxBody dd {
     margin: 0.3em 0;/* 枠内本文外側の余白 */
}


5.引用タグ <blockquote><p>引用部分<p></blockquote>
<blockquote><p>国境の長いトンネルを抜けると雪国であった。</p></blockquote>

と記述すると以下のようになります。

国境の長いトンネルを抜けると雪国であった。

■捕捉:blockquoteのスタイルシート編集
↑は、FC2でも[Q]ボタンがあるので解説する必要はないのですが、キモはスタイルシート編集にあります。自分好みの引用枠デザインにしたい場合は、このサイトを参考に編集してみてください。

このブログのスタイルシート
blockquote {
     margin:10px; /* 枠線外側の余白 */
     padding:10px; /* 枠線内側の余白 */
     background:#FCFCFC; /* 背景の色 */
     border:#cccccc 1px solid; /* 枠線の色、太さ、実線※削除も可 */
     border-left:#cccccc 5px solid; /* 左側枠線の色、太さ、実線 */
}


6. ラインタグ <hr>
<hr>文章1

と記述すると以下のようになります。


文章1

■捕捉:hrのスタイルシート編集
↓の記述箇所を探して、「余白、線の色、太さ」などをいじってみてください。

このブログのスタイルシート
hr {
      margin: 0.5em 0;/* 線外側の余白 */
      border: none; 1px dotted #ccc;/* 線の太さ、点線指定、色 */
}


とこんな感じですが、お役に立てそうでしょうか・・・
こういうタグもブログには便利だよ。というのがありましたら教えてください

コメントの投稿

非公開コメント

はじめまして、HTMLタグ整理ありがとうございます。
ブログ書いているととっさにタグをどうするか思い出せず検索することがあったのでまとめていただいていると助かります。
#特に箇条書きのタグは苦手。。

Re: タイトルなし

はじめまして!先輩ブロガーさんからそう言っていただけると嬉しいです!
私は、ユーザ辞書登録してから、スムーズに使えるようになりました。
箇条書きタグ(数字なし)はとくに多投しています。
最近の記事+コメント
ブログ内検索
カテゴリ
プロフィール

十一屋

Author:十一屋

リンク
応援バナー
最新トラックバック
オススメの本
忙しいビジネスマンでも続けられる 毎月5万円で7000万円つくる積立て投資術
4756913016
図解が多くてわかりやすい!積立投資を始める前に読んでおきたい一冊

「しくみ」マネー術
4569700977
「貯めグセ」をつけたいあなたにオススメ!

お金とつきあう7つの原則
4584132135
オトナのお金感覚を身につけるには最適の一冊

初心者は株を買うな!
4532260442
初心者は個別株ではなく投資信託でOK!

資産設計はポートフォリオで考える 投資信託35の法則
4881668536
投資信託を極めるためには必読の一冊

生命保険のウラ側
4022733233
保険見直しのための特効薬!

生命保険のカラクリ
4166607235
目からウロコの生命保険入門

サイト訪問者
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。