読者です 読者をやめる 読者になる 読者になる

ひそかブログ

アニメでするリアルの話、リアルでするアニメの話。そういうのが好きです。

ブログを見やすくするためのHTML小技集9選

ブログ関連の話

ブログで大事なのはもちろんコンテンツ(中身の充実)。
しかしそれ以前に大事なのは、「ブログが見やすいこと」
私はそう思います。

http://www.flickr.com/photos/47131321@N00/4268841912
photo by nidhug

ということで、ふだん自分がブログを見やすくするために使っている小技を9個ほど紹介します。9個のうち8個は、HTMLの記述になります。


PR


各ブログサービス共通のHTML

1.本文全体に線を引く(一行線)

<hr size="1" />

hrとはhorizon(境界線)の略のこと(たぶん) こんなヤツです↓


わたしは記事に「区切り」をつけたい時に使っています。

2.記事の行間に、2行分のスペース(空白)をあける

<br>

この記事のように、HTMLを使った記事を書いていると「行間スペース」がうまくコントロールできない時があります。もう一行ぶん「空行のスペース」を入れたいのにうまくあかないなー そんなときにありがたい小技です。

3.リンクをはる

<a href="URL">説明文</a>

「URL」にリンクを貼りたいページのURLを入力し、「説明文」には、リンク先を説明する文章を入れます。
メリットは、好きなように説明文を変えられること。
「はてなブログ」にもボタン一つでリンクを貼る、便利でラクチンな機能がありますが、自分の記事へのリンクを貼ったときなど、ブログタイトルが要らない時や、記事のタイトルが長文で簡素化したいときだってありますよね。そんなときに重宝します。

4.リストつきにする

4-1.箇条書きリスト
<ul>
<li></li>
<li></li>
</ul>

具体的には、

<li>と</li>

のあいだに、文章を入れます。


では実際の具体例を。
どうせなら、中身に入れる文章に「急上昇キーワード」を使ってみますか。
ウィークリーランキング 人物 - Yahoo!検索データ 」より上位5人をチョイスしました。
リストに入れるのは、AKB48 嵐 新井ゆうこ 佳子内親王 橋下徹 の5人。

これでページビュー増えちゃったりして…… ってなんかあざといっ(笑)
f:id:hisoka02:20150529061139j:plain
(画像は「やはり俺の青春ラブコメはまちがっている。続」の一色 いろは。あざといで思い出しました。でも可愛いんだよなぁ)


「リストの箇条書き」は↓ こんな感じ

  • AKB48
  • 新井ゆうこ
  • 佳子内親王
  • 橋下徹

HTMLの中身は ↓ こうなっています。

<ul>
<li>AKB48</li>
<li>嵐</li>
<li>新井ゆうこ</li>
<li>佳子内親王</li>
<li>橋下徹</li>
</ul>


4-2.ナンバーつきリスト
<ol>
<li></li>
<li></li>
</ol>

↓ 先ほどのリストを、ナンバーつきにしたものです。

  1. AKB48
  2. 新井ゆうこ
  3. 佳子内親王
  4. 橋下徹

もしもこれらの人を目当てに、検索でいらした方がいたらゴメンナサイ。
完璧に釣り(フィッシング)です。


5.ふりがな(ルビ)をふる

5.と6.は、やり方の説明した記事へのリンクを貼っておきます。

6.画像のHTMLに説明文をいれる



はてなブログ限定のHTML

ここからは、「はてなブログ限定」の話になります。

7.「見たままモード」の改行で生まれてしまうスペースをなくす

7.はHTMLの話ではないのですが。

はてなブログの「見たまま」モードは、ENTERキーによる改行を行うと、行間に変なスペースが生まれてしまいます。このスペースを消して普通に改行するためには、SHIFTキーを押しながらENTERキーを押します。例文として、

内田篤人 幼なじみの結婚相手は 有村架純似の元テレビ局員

という文章を使ってみます。

↓ 画像の左は、「見たままモード」のENTERキーだけによる改行、右はSHIFTキー+ENTERキーによる改行

f:id:hisoka02:20150529073400p:plain f:id:hisoka02:20150529073407p:plain


行間スペースの違いが分かっていただけると思います。
というか……
「見たままモード」の改行で生まれてしまうスペースって、いらない機能なんじゃない?

8.ブログに自動で目次を表示させる

8.と9.は、5.と6.と同様にやり方の説明した記事へのリンクを貼っておきます。


9.ブログに表で囲まれた要素(文字や画像)をいれる


最後のまとめ

ということで以上、「ブログを見やすくするためのHTML小技集9選」でした。

ブログで大事なのはもちろんコンテンツ(中身の充実)だと思います。
しかし中身以前に大事なのは、「ブログが見やすいこと」
パッと目に飛び込んだ段階で、ブログが見やすくて読みやすい。そういうのが大事なんだと私は思います。

人でいうならば「ルックス」部分。
小ぎれいにしてる人の方が、第1印象の好感度が高い。
理由はそれと同じです。


拙ブログも、小ぎれいなルックスを目指して、今後も精進し続けたいと思っています。



  • ▲「ブログ関連」の記事一覧へ