ブログを書くとき、ブログサービスの編集画面や、最近では携帯からブログを更新するという方も多いと思います。気軽に更新できるのがブログの良いところですが、もっと効率よくブログを更新したい!もっとたくさんの人に読まれたい!という方向けの特集です。
そこで今回は、主にブログでよく使う「見出し」「強調」「リンクの作成」「引用」など、そのままコピペで使える XHTML 要素と、スピーディかつ簡単にマークアップするためのシンプルなテキストエディタ & ちょっと差の付くリンク作成関連のツールをまとめて紹介します。
HTML初心者の方も、これでブログを書くスピードが大幅にアップ! また、正しい(X)HTMLで書くことによってSEO効果も期待できます。
ブログでよく使うXHTML要素
そのままコピー & ペーストしてテキストを書き換えてお使いください。
- 段落(p要素)
-
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
- 改行(br要素)
-
テキスト<br />テキスト
- 見出し(heading要素/h1~h6)
-
<h4>見出し</h4>
- 強調(strong要素)
-
<strong>強調したいテキスト</strong>
- 引用(blockquote要素)
-
<blockquote cite="URL" title="タイトル"> <p> 引用テキスト 引用テキスト </p> </blockquote> <cite><a href="URL">タイトル</a> から引用</cite>
- テキストリンク(a要素)
-
<a href="リンク先のURL">リンクテキスト</a>
- 画像リンク
-
<a href="リンク先のURL"> <img src="画像ファイルのURL" alt="代替テキスト" /></a>
- 箇条書きリスト(ul/li要素)
-
<ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul>
- 番号付きリスト(ol/li要素)
-
<ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol>
追記(4/7):br要素・img要素は終了タグ不要ですが、XHTML で空要素は半角スペースを空けて <img /> と記述します。
(X)HTML の詳しい説明は、こちらのサイトが参考になります。
参考:ごく簡単なHTMLの説明
無料テキストエディタ
テキストエディタを使うと、簡単に効率よく(X)HTMLの編集をすることができます。優れたテキストエディタはたくさんありますが、シンプルで代表的なものを紹介します。
参考: HTML作成に使うテキストエディタを選ぶため若干のヒント
リンク作成関連ツール(ブックマークレット)
- RakuCopy
- 表示しているページのテキストリンクを生成するjavascript - WEBデザイン BLOG
- ブックマーク数付きリンクが簡単に作れるブックマークレット[to-R]
- リンク先の Favicon(ファビコン) を自動で表示 :: Love & Design ::
- ちょっと差のつく「Copy URL+」のカスタマイズ :: Love & Design ::
Firefox をお使いの方はこちらをどうぞ。
Amazonリンク作成
引用関連ツール
- 引用マークアップを生成 - 徒書
- 第11回:引用(blockquote)を簡単にするブックマークレット ::: creazy photograph
- kwout | A brilliant way to quote
Webページの一部を切り抜き引用できるサービス。拡大・縮小もできて便利!
サムネイルリンク作成
実体参照変換
実体参照とは、文字列内の < > & など特殊文字を記述するための符号です。
- 蓄々HTML実体参照変換 : akiyan.com
- XHTML 文字実体参照 [WEB ARCHIVES]
文字・数値実体参照の一覧
他にも便利なツールがあれば、教えていただけると幸いです。
【関連エントリー】
訂正『<img />では?』
ご指摘感謝します。
記事を修正・追記しました。
コメントありがとう。