ブログでうまく改行ができないあなたにhtmlタグのお話

ブログ更新とhtmlの関係は

このブログサービス
改行が思いどおりにならないぞ!

ブログを始めてから
「思ったように表示できないなぁ〜」
「なんでこうなっちゃうの? イライラする!」
なんて四苦八苦していませんか?

行間が開いたのを直したいのに直せない。
いったい、どこを調整したらいいんだろう?

ずっとやってるとイライラしてストレスもたまりますよね。
「もう、や〜めた」なんてことに……。
これでは、手間も時間もモッタイナイ!

でも、このまま間が抜けた行間でイケてない感じはもっとイヤだ〜!

そこで、登場するのが「html」というものなんですよ。

どうしてhtmlタグを覚えると表示調整できるの?

文章の構造がどういうふうになっているか分かりやすいよう、一定のお約束で全体を印づけしながら記述していくのが「html」の正体。
インターネット上で公開されているページのほとんどがコレに従いつくられています。

ところが取っつきにくい部分も多いし、いきなり覚えろと言われても、ちょっと呪文のお札を貼ってまわるようで面倒くさい。
なので、誰もが簡単に操作できるブログやSNSの管理画面なんかでは、あまり表に出ないようになっていて、記事を書いた状態に合わせて裏でシステムが自動変換しています。

自動変換だから細かなニュアンスのところで時々うまくいかない。
それが、ブログがイケてない表示になったりする理由なんです。

htmlは簡単に言えばタグっていう、<>のシルシで囲った記号で文章にマークをつけることによって、見出しや段落、引用などの文書の構造を示し、画像を表示させたり文章どうしの関係性を指定したりするもの。
さらに文字の大きさ、色、フォントを変える指示を加えると、いろいろなデザインでの表示までできてしまいます。

webページをつくるための記述方法そのものだからこそ、この「html」タグの使い方を知っているか知らないかが細かな部分に反映されて、ブログの見た目が断然、違ってくるのですね。

実際の管理画面で試してみましょう

さて、ブログを書き終わって、アップして、
いざ表示状態を確認すると……

  • 改行されていない。
  • 勝手に段落全部が大きな文字に。
  • 改行ごとに行間がやたら空く。

とりあえず書いてみようそこで、htmlタグにご登場いただきましょう。

まず、普通に文章を書いてしまいます。そして……。

どこのブログサービスでもだいたい、管理画面の文字編集ウインドウにhtmlに対応したモードがありますので切り替えます。

すると
<p>
<br />
となった記号みたいなものが、どこかにありませんか?

これがhtmlタグなんです。

ほとんどのタグには開始タグと終了タグがあって、
<●>タグって何だろう?</●>
(●のところにはアルファベット半角文字が入ります。)
といったように、文章の内容を挟み込むようにして使用します。
アルファベットの内容でタグの役割が決まります。

挟まなくて独立で使うタグもあったりします。
<br /> 改行
<hr /> セパレーター線
<img /> 画像表示
などです。

一番簡単で役立つ改行タグの使い方を参考まで。

改行したいな改行したかった

改行したいな<br />改行したかった
と、<br />タグを改行したい場所に入れると

改行したいな
改行したかった

と表示されます。
これで改行のできあがり。

ほかにも基本的なタグを見てみましょう。

<p>〜</p> ひとつの段落を意味します。

<h1>〜</h1> 見出しのレベルです。
1〜6まであって、数字が小さいほど大見出しになります。

<strong>〜</strong> その部分を強調します。

<blockquote>〜</ blockquote > 引用を表すタグです。

ほかにも、<ul><ol><li><dl>といったリストをつくるタグや、
ほかのページへのリンクをつくる<a>タグ、
<tr><td>といった表をつくるなどなど。

タグで囲まれた中に、さらに別のタグで囲んだものを入れるなど、慣れてくると複雑な文章構造を表現することができるんですよ。

htmlタグを覚えてほしい本当の理由

ちょっと聞いただけでは難しいかもしれませんね。
でも、それぞれのタグの意味を知って使いこなせるようになれば、簡単に調整できて、更新もラクになって、いろいろカスタマイズできて……
結果として読者が増えるかもしれません。

実は、タグでの調整は見た目のためだけではありません。
きっちりと文章構造を整理して分かりやすくすると、実は検索エンジンも内容をきっちり理解できるようになるため、検索結果ページで、より上位に表示される可能性が出てきます。

たとえば、某ブログ管理画面での話。

改行するごとに裏でコソっとその行が
<p></p>
タグでくくられています。
これは、文章の途中で段落にどんどん小分けされている状態。

文字を大きくしたいと文章の途中で一部を「文字サイズ」で変更すると、実際はそこが
<h1></h1>タグでくくられてしまう。これって文脈の途中にいきなり大見出しが挟まっている状態ですよね。
こんな文章構造だと、もともとの記述のお約束として解析しようとすると、どこが見出しで、どういう流れかは判断できないのです。
検索エンジンが大混乱する理由、お分かりですよね?

ネット上だけでも、タグの使い方を解説したページが無数にあります。
少しずつでも調べて覚えてみるのはいかがでしょうか?

多言語対応ホームページ作成で押さえたいポイント

2015年6月25日
オリンピックを含め日本のグローバル化は必至

将来的に多言語対応のホームページを運用したいなら知っておきたい多くの事柄。費用対効果の高い多言語化制作を進めるために外せないポイントとは?

すぐにやるべき検索対策。やってはいけないSEO対策。

2015年12月1日
すべての人が気持ちよく情報を受け取れるホームページを目指しましょう。

よく言われるSEO対策は本当に必要?検索したときに、あなたのホームページがよい順位で出てくるために。何に気をつけて対策すればいいの?

アクセスアップしたいなら。SEO以前にやるべき5つの対策

2015年12月4日
どうすれば人が集まる?

SEO対策だけでは不十分。アクセスアップのために、ネット上のさまざまなサービスをうまく使って導線を張り巡らしていきましょう。

今さら聞けないインターネット基礎用語を再確認

2015年8月16日
インターネット通信網は世界中を網羅しています

ホームページの更新ぐらい大丈夫と思っていたけど、用語の意味や仕組みが予想以上に分かっていなかった。そんなことになる前に基礎の基礎を再確認。