おひさしぶりです、豪です。
今こうやって livedoor Blog を担当できているのも、2002年からブログを書きはじめたお陰だと思っていて、これまで魅力的なブログにするために様々なことを学びました。
その一つが、読みやすく見やすい記事を書くための HTML です。Web サイトのマークアップまでできなくとも、ブログを書くために覚えておくと良い HTML というものがいくつかあります。
そこで今回は、最近ブログを書き始めた人向けに、ブログを書くときに使えるちょっとした HTML をご紹介します。ただあくまで HTML は文章構造を表すためのもので、レイアウトや装飾は CSS に委ねるものだということをお忘れなく。
記事がだらだらとした長文で構成されているより、内容ごとに整理されているほうが読みやすいというのは容易に想像がつくと思います。記事を小見出しで小分けにすると、その中で持つ文章の意味合いがはっきりするでしょう。
この livedoor ディレクター ブログにおいても多用されているテクニックです (livedoor ディレクター ブログ記事中では小見出しを h3 で表記します)。
このように表記します。
記事中にキーワードがあれば、それを強調して伝えたいものです。その時は
キーワード
太字になり、見た目に強調することができます。SEO としても strong で囲った文字は効果があると云われています。その記事に合ったキーワードを strong で囲うことで、人間にも検索エンジンにも注目してもらうことができます。
文章は私考の発露ですが、その私考は必ず他者の影響を受けているものです。そういった意味ではオリジナルなんて無いに等しいのですが、まるまる書き写すことは権利の侵害に他なりません。
ブログを書く際に、他者の文言を引用した場合は、
おおかた左右がインデントされた形で表示されると思います。このブログでは以下のようになります。
もちろん、引用元は表記しておくこともお忘れなく。
データを見せるとか、リーグ戦の結果を見せたい時には、表組みを使うと便利です。これまで画像で表現していたかもしれませんが、HTML で実現できます。
例えとして、私の好きな「サメ」を使ってみました。
すると、以下のようになります。
ちなみに線の太さは、table タグに border 属性を加え、border="1" の数値を調整することで変更することができます。
さて、5月に入社した弊社新人に「ブログを書くときに気になること」聞いたところ、「文中の文字に一部変化を加えてみたい」要望がありました。どう記述すれば良いか。
文字色変えたい (赤くしたい) 時は
ここだけ赤い文字にする。
としてみてください。<font> タグではなく <span> タグを使用します。属性値にある「#FF0000」というのがカラーコードと呼ばれるもので、ここを変更すれば色を変わる仕組みです。標準になる16色というものがあるので以下のリンクから確認してください。
カラーネーム147色
本来であれば外部 CSS・<head> 内に定義して class 属性で呼び出すところですが、ここでは割愛させていただきます。また、見た目に目立つようにしたからといって、SEO 効果が高まるようなことはありません。あくまで人間の目を惹きやすくするというだけなのであしからず。
いかがでしたか? 少しの HTML を使うだけで、見た目や読みやすさも向上し、構造上意味を持ったブログ記事が書けるようになります。よく「表示が崩れてうまくできない」というときがありますが、</strong> のように文字の後ろをスラッシュ付きの終了タグの記述忘れだったりするので、よく確認してみてください。
さっそく、この記事を引用したりしながら、記事を書かれてはいかがでしょうか。「初めてWeb 系企業に入社してブログを書きはじめたけど、もっとブラッシュアップしたい」という方。CSS がわからなくても大丈夫。ぜひ明日からは、改行と文字だけじゃないブログに挑戦してみてください。
ライブドアではブログの1エントリーに必ず思いを込められるディレクターを募集しています。
今こうやって livedoor Blog を担当できているのも、2002年からブログを書きはじめたお陰だと思っていて、これまで魅力的なブログにするために様々なことを学びました。
その一つが、読みやすく見やすい記事を書くための HTML です。Web サイトのマークアップまでできなくとも、ブログを書くために覚えておくと良い HTML というものがいくつかあります。
そこで今回は、最近ブログを書き始めた人向けに、ブログを書くときに使えるちょっとした HTML をご紹介します。ただあくまで HTML は文章構造を表すためのもので、レイアウトや装飾は CSS に委ねるものだということをお忘れなく。
1. 小見出しで記事を章立てにする
記事がだらだらとした長文で構成されているより、内容ごとに整理されているほうが読みやすいというのは容易に想像がつくと思います。記事を小見出しで小分けにすると、その中で持つ文章の意味合いがはっきりするでしょう。
この livedoor ディレクター ブログにおいても多用されているテクニックです (livedoor ディレクター ブログ記事中では小見出しを h3 で表記します)。
このように表記します。
<h3>1.小見出しで記事を章立てにする</h3>
2. 文字を強調する
記事中にキーワードがあれば、それを強調して伝えたいものです。その時は
<strong>キーワード</strong>と、書いてみましょう。
キーワード
太字になり、見た目に強調することができます。SEO としても strong で囲った文字は効果があると云われています。その記事に合ったキーワードを strong で囲うことで、人間にも検索エンジンにも注目してもらうことができます。
3. 引用は明確に
文章は私考の発露ですが、その私考は必ず他者の影響を受けているものです。そういった意味ではオリジナルなんて無いに等しいのですが、まるまる書き写すことは権利の侵害に他なりません。
ブログを書く際に、他者の文言を引用した場合は、
<blockquote>この「フレームワーク思考」を活用すると、このように表記しましょう。
自然と思考が論理的かつ客観的となり、
思考の結果を人に説明しやすくなります。</blockquote>
おおかた左右がインデントされた形で表示されると思います。このブログでは以下のようになります。
この「フレームワーク思考」を活用すると、自然と思考が論理的かつ客観的となり、思考の結果を人に説明しやすくなります。社会人なら押さえておきたいフレームワーク思考
もちろん、引用元は表記しておくこともお忘れなく。
4. エクセルのような表を作る
データを見せるとか、リーグ戦の結果を見せたい時には、表組みを使うと便利です。これまで画像で表現していたかもしれませんが、HTML で実現できます。
例えとして、私の好きな「サメ」を使ってみました。
<table cellspacing="0" border="1" cellpadding="3">
<tr>
<th>名称</th>
<th>生息地</th>
<th>特徴</th>
</tr>
<tr>
<td>ホホジロザメ</td>
<td>亜熱帯から亜寒帯</td>
<td>歯が怖い</td>
</tr>
<tr>
<td>オンデンザメ</td>
<td>北太平洋</td>
<td>とにかく大きい</td>
</tr>
</table>
すると、以下のようになります。
| 名称 | 生息地 | 特徴 |
|---|---|---|
| ホホジロザメ | 亜熱帯から亜寒帯 | 歯が怖い |
| オンデンザメ | 北太平洋 | とにかく大きい |
ちなみに線の太さは、table タグに border 属性を加え、border="1" の数値を調整することで変更することができます。
番外編: 文字色を変える
さて、5月に入社した弊社新人に「ブログを書くときに気になること」聞いたところ、「文中の文字に一部変化を加えてみたい」要望がありました。どう記述すれば良いか。
文字色変えたい (赤くしたい) 時は
ここだけ<span style="color:#FF0000;">赤い文字</span>にする。
ここだけ赤い文字にする。
としてみてください。<font> タグではなく <span> タグを使用します。属性値にある「#FF0000」というのがカラーコードと呼ばれるもので、ここを変更すれば色を変わる仕組みです。標準になる16色というものがあるので以下のリンクから確認してください。
カラーネーム147色
本来であれば外部 CSS・<head> 内に定義して class 属性で呼び出すところですが、ここでは割愛させていただきます。また、見た目に目立つようにしたからといって、SEO 効果が高まるようなことはありません。あくまで人間の目を惹きやすくするというだけなのであしからず。
いかがでしたか? 少しの HTML を使うだけで、見た目や読みやすさも向上し、構造上意味を持ったブログ記事が書けるようになります。よく「表示が崩れてうまくできない」というときがありますが、</strong> のように文字の後ろをスラッシュ付きの終了タグの記述忘れだったりするので、よく確認してみてください。
さっそく、この記事を引用したりしながら、記事を書かれてはいかがでしょうか。「初めてWeb 系企業に入社してブログを書きはじめたけど、もっとブラッシュアップしたい」という方。CSS がわからなくても大丈夫。ぜひ明日からは、改行と文字だけじゃないブログに挑戦してみてください。
ライブドアではブログの1エントリーに必ず思いを込められるディレクターを募集しています。
コメントする