2013年10月09日

ブログサービスは、改行タグもサービス?!

ブログって、改行タグが、スゴイことになっているんだと、最近、知った。
まさに、大サービスだった……

思ったように表示されないブログ

このブログを開設する時に、
まず、テンプレート(スタイルシート)をいじり、
文字の大きさや色、行間、見出しタグ等を変えた。

次に、カラムの幅を変えようと思ったら、
このテンプレート、とってもシンプルに見えるんだけど、
ガッツリ背景画像が設定されていたのね(>_<)
ここでいう、カラムは、ブログのデザインのこと。このブログのように2列構成になっているものを2カラムという。

と、いうことは、カラムの幅を変えるには、
背景画像を作りなおさないといけない。
って、ことで、早々に、挫折。
まあ、そのうちやろう……と、思い、放置状態で、いまにいたる……(遠い目)

で、いくつか記事をアップしたんだけど、なんか、ヘン。

どうも、思ったように、表示されない。
とにかく、行間が、異常に広い。

なんじゃ、こりゃ? と、首を傾げる。

いじったCSS(スタイルシート)の設定を確認するも、
私のHTMLタグやCSSの知識レベルは、ひよこ組だ。
プロが書いたコードが、すんなりと解読出来るわけもなく、
原因究明は、難航。
CSS(スタイルシート)とは、WEBページの装飾を行うもの。
文字の大きさや色、フォントスタイル、行間、背景の色やデザイン等等の設定が出来る。。

だが、ふと、アップされたブログのソースを見てみると、

へ?!
誰が、こんなに、しかも、こんな所に、改行タグ入れたの?!
つか、段落はどこへいったのよーー!?

このブログったら、
ヒヨコ(私のことね)の微妙な知識を覆す事態になっていたのさ……

改行は、全部改行されるのだ!!

20131008-1.gif

これは、このブログの入力画面の画像。
こんな風に入力をしていくんですよ〜〜

で、私は、「改行は<br/>タグに変換する」
と、いう設定をしているので、
入力画面の改行は、そのまま「改行タグ」に変換される。

この設定をしておけば、
いちいち、改行タグ「<br/>」を入れる必要はないわけで、
とっても、便利なのね。

しかし、私は、ここで、もの凄い勘違いをしていた。
改行タグと同時に、段落のタグも勝手に挿入されると思いこんでいたのだ。

どういうことかというと……

なんたらかんたらで、
あーたら、こーたらで、
つーことになりました。

さて、あーたらについてですが、
それは、あーで、こーで……

と、入力画面に書くと、

<p>なんたらかんたらで、<br />
あーたら、こーたらで、<br />
つーことになりました。<br />
<br />
さて、あーたらについてですが、<br />
それは、あーで、こーで……</p>

と、自動的になると思っていた。(もちろんならない)
「<p>〜</p>」で囲まれたところが、段落。
文章を書くときに、一文字下げて段落を築くでしょ? あんな感じの意味が、この「p」には、あるのね。

さらに、文字の色や大きさ等を変えるスタイルを指定したタグを入れた場合は、その前の段落は、自動的の閉じるられ、次も自動的に段落タグが挿入されるのだと思っていた。(もちろん思いこみ!)

なんたらかんたらで、
あーたら、こーたらで、
つーことになりました。

<p style="color : #ff0000;">さて、あーたらについてですが、
それは、あーで、こーで……</p>←ここは自分でタグを入れた箇所
それから、こーたらについては、
なんたら、かんたらである。

上のように書くと、

<p>なんたらかんたらで、<br />
あーたら、こーたらで、<br />
つーことになりました。<br />
</p>
<p style="color : #ff0000;">さて、あーたらについてですが、<br />
それは、あーで、こーで……</p>
<p>それから、こーたらについては、<br />
なんたら、かんたらである。</p>

上のようになると思っていたのだが、実際は、下記のようになる。

なんたらかんたらで、<br />
あーたら、こーたらで、<br />
つーことになりました。<br />
<br />
<p style="color : #ff0000;">さて、あーたらについてですが、<br />
それは、あーで、こーで……</p>
<br />
それから、こーたらについては、<br />
なんたら、かんたらである。<br />

ブロックレベル要素までも、改行タグは、大サービス!

さらに、ビックリしたのは、
ありえないところにまで、改行タグが、バンバン入っていた。

<h3></h3>
<h4></h4>

上は、見出しタグと言われるもの。
「h1〜h6」まであって、数字が小さいほど重要なキーワードとされるのね。
ここには、続く文章の主題みたいなものを書くわけ。

で、この見出しタグの「h」で囲まれた部分や、段落を作る「p」で囲まれた部分は、ブロックレベル要素といって、文字通り、ひとつの「かたまり」になるのね。

20131008-2.gif

上の図のように、文字が詰まった箱が、ポンと置かれた状態だと思ってね。
で、この箱は、横には連ならない(並ばない)ルールなの。
だから、この箱は、終了しました、ってタグを入れる=イコール=改行されるようになっているの。
要するに、改行タグ<br />を使わなくても改行される決まりになっているってこと。

なのに……

<h3></h3>
<br />
<h4></h4>

と、なっていた(>_<)

見出しタグを改行してどうするのよ!?

<h3></h3><h4></h4>

どうやら、このように、改行しないで、書かないといけないらしい。

……見難くて仕方がないんですけど(>_<)

もっと凄いのは、リストタグ。

  • のぞみ
  • ひかり
  • こだま

リストタグは、上のように項目を並べる時に便利なもの。
こいつも、ブロックレベル要素のお仲間。

<ul>
<li>のぞみ</li>
<li>ひかり</li>
<li>こだま</li>
</ul>

って、書くと、

<ul>
<br />
<li>のぞみ</li>
<br />
<li>ひかり</li>
<br />
<li>こだま</li>
<br />
</ul>

と、なっている(>_<)

えーーー!!??

普通に、タグを反映させようと思うと

<ul><li>のぞみ</li><li>ひかり</li><li>こだま</li></ul>

と、書かないといけない。

項目が増えたら、さっぱりわかんないじゃん!

つか、その前に、
<ul>〜</ul>間に、<br/>タグ入れちゃダメでしょ!
タグには、その中に入れて良いものとダメなものが決まっています。

そんなわけで、謎の、行間の原因が判明したので、
「改行は<br/>タグに変換する」
から、
改行を<br/>タグに変換しない
と、いう設定に変え、
それに合わせ、スタイルシートを手直しした。

それが、ちょっと前の記事『「なめこ」は、洗うのか?』から。

ブログ―サービスは、みな、同じような設定なのか?

多分、同じような設定だと思います……

実際に、いろんなブログを使ったわけではないので、断言は、出来ないけど、
ざーと、有名所のブログサービスのソースを見るかぎり、 ほとんどのブログが、同じような設定みたい。

ちなみに、私が使っている、このブログは……
「さくらのブログ」というもので、
レンタルサーバー「さくらインターネット」の契約者が利用出来るブログなので、「さくらのブログ」だけ使いたい! と、利用することは出来ません。
もちろん、サーバー契約をし、サイトは作らず、ブログのみを利用するという方法は、あります。

余談ですが、さくらインターネットのサーバーを借りる(契約する)と、もれなく50個までブログが作れるそうです。
それって、スゲー、サービスいいじゃん!って、
思うかもしれないけど、このブログですら、月1更新も出来ない私にとっては、猫に小判、豚に真珠、こい(管理人)に50個のブログだよ(>_<)

このさくらのブログ以外で、
一応、私の休眠中のブログ……FC2ブログをたたき起こし試してみましたが、同じ結果でした^^;
もう、バッチリ改行されていました……(>_<)
全く知らなかった……^^;

結論

それで、なにか、問題があるわけ?

「ある」って言えば、あるし、「ない」って言えば、ない。

「ある」って言えば……「ある」とは……?
正しい、HTMLっていう観点からは、正しくないとしか言えない。
インターネットのWebページで使われているHTMLは、マークアップ言語。

なによ、それって感じですが^^;

「タグ」というマークをつけることによって、Webページが表現されるし、情報として読み取られる。
例えば――――
このブログに書いた内容を広く伝えたい!
と、思ったとき、
検索エンジン(グーグルやYahooなど)に、表示されると、非常に手っ取り早いよね。
では、その表示してくれる各検索エンジンは、どうやって情報を集めているかっていうと、検索ロボット君が、日夜、様々なサイト(ブログも含む)を巡回し、情報を集めているわけですよ。
ロボットなので、当然肉眼ではなく、なにを頼りにするかというと、まずは、このタグを目安に、キーワードを拾っていくらしいのです。
だから、なんの目印もない(マーク=タグもない)煩雑なページより、きちっと、マークがされ、整然としているページの方が、ロボット君は、サクサク内容を読み込めるわけです。
例として検索ロボット君をあげたけど、
「ある」の一番の理由は、タグは、ルールだから。
要するに、言語なので、正しい文法を使いましょうってこと。
日本語でも、英語でも、文法を間違うと全く違う意味になってしまったり、うまく伝わらないのことがある。それと、同じってこと。
「ない」って言えば、「ない」……とは?
WEB上に、表示されないわけじゃないし、
HTML的に正しくなくても、法にふれるわけじゃないし、
誰かに損害を与えるようなこともない。
(音声ソフトとかを使っているとちょっと困惑だったりして……アクセシビリティは、落ちてしまうけど)
見出しタグを使わないフラットな記事=日記のようなものならば、これでいいのだと思う。
そもそも、ブログサービス自体が、こういう設定になっているのは、誰もが、HTMLタグを意識しないで、楽しめるツールであるってことが、一番なんだと思う。
その先へ行くのは(=HTMLを正しく使うことの選択は)、各ブログの管理者が決めることだと思います。

で、私は、スタイルシート(CSS)が反映されないのが、イヤなので、タグ入力を使うことにしました。見やすいようにと、設定したスタイルシートの意味がなくなってしまうから……

HTMLタグが自動的に形成されるブログってないの?

ありますよ!

ワードプレス。

ワードプレスでは、なにか文章を書けば、自動的に段落タグが形成される。
逆に言えば、2回以上の改行は、全く反映されない。
2回改行=イコール=次の段落とみなされるのね。
なので、改行でスペース(行間)を広くとることは、出来ません。

広く行間を空ける場合は、スタイルシートで、「この文」と「次の文」の間は、5行分間を空けてよね! という、指定をします。
段落以外のタグも、一応簡単に挿入は、出来るけど、HTMLタグの知識がゼロだと、ちょっと扱うには、辛いと思います。

それに、なんていうか、ワードプレスは、外国のものって感じで、
実際に、プラグイン(オプションみたいなもの)は、英語のものも多い。
テンプレとかも、可愛い〜〜っていうものがない。
カスタマイズすれば、いいのでしょうが、それこそ知識が必要。
(HTML・CSSに加えPHPも必要になる^^; 私にはあと300年あってもムリだわ!)
ブログサービスのような、手軽さは、ない。

でも、情報発信型のブログなんかだと、
ワードプレスは、見やすいし、作る側も作りやすいと思います。
もちろん、ある程度HTMLやCSSが使えることが前提になりますが……^^;

挑戦してみたいかたは、WordPress.comへどうぞ!
もちろん無料で作成できますよ!