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へどうぞ!
もちろん無料で作成できますよ!

2013年07月16日

あなたのブログにアップした写真。大丈夫ですか?



ちょっと、待った!!

デジカメやスマホ・携帯電話で撮った写真をそのままブログにアップしていませんか?



ブログやSNSにアップする写真。
含まれている情報を消してから、アップしてますか?



随分前に、有名人のブログの記事の内容と、
アップした写真の情報が違っていて、
ブログの内容が嘘だったのでは? と、騒がれた話があったので、
ご存じの方も多いだろう。

今のデジカメや、スマホ・ガラゲーで撮影した画像には、
画像のデータとあわせ、撮影時の様々な情報も一緒に保存される。

もともとは、
絞りや、画素数、ISO感度、色空間といった、
そのショットのために選んだ条件を記憶しておくためのもの。
カメラが趣味の人達にとっては、自分の備忘録にもなるし、
「このショットはどうやって取ったんだろう?」
と、人が撮ったものも参考に出来る、とても便利なものなのだ。

が、しかし、日時から、位置情報とかも、
しっかりと記録してくれるので、
「うふふ〜 今、自宅で〜す」
なんてブログにアップしたら、
――あの辺に住んでいるの?
と、かわかってしまう可能性もあるようだ。

これが、Exifと言われるものだ。


Exifを確認する方法


フリーソフトを使う


世の中には、親切な方が沢山いるので、
Exif情報を確認出来るフリーソフトは、結構ある。
残念ながら、管理人は、この手のソフトを使ったことがないので、
何とも言えないのだが、
「EXIFフリーソフト」などで検索すると、たくさん出てくるので
自分にあったものを探してみてください。
取りあえず、一例をあげときますね。
F6 Exif
EXIF閲覧・編集・コピー・削除、撮影日時一括更新、画像の一括縮小、ファイルリネーム、JPEGビューア



ブラウザで確認する方法


私は、写真を撮ることに、興味がないので、Exifデータを見ても宝の持ち腐れなんですよ。
でも、自分がアップした画像に、
Exifデータ残ってないかは、確認したいんです。
そこで、私が使用しているのは、ブラウザ・Firefoxのアドオンです。

「FxIF 0.4.7」という、「Exif情報」を確認出来るアドオンを入れています。

「FxIF 0.4.7」を入れるとこんな風になります。

以前書いたブログ記事に掲載した写真を調べてみます。
画像の上で右クリックするとメニューが出てきます。
jtr-009.gif



jtr-010.gif
Exif情報は、消してあるので、上のように、データがありませんと表示されます。

※WEB上にない画像は、調べたい画像をブラウザで開けば、同じように確認出来ますよ!


Firefox使ってないし〜〜〜

と言う方は・・・・
Internet Explorer
Internet Explorerには、「Exif Quick Viewer」というソフトを入れると、同じように、右クリックメニューで確認できるそうです。
IE使いの方は、お試しくださいね。




Exif情報を消す方法


それ、どうすれば、いいのよ?
って思いますよね。

これまた、消去出来るフリーソフトが、いろいろ出ているので、
自分にあったものを探してみてください。


私が使っているのは、「JTrim」というフリーの画像編集ソフト。
もともとは、サイトにアップする画像のサイズ変更や、
画像の切り抜き、その他もろもろの加工に使っています。
なかなか便利なソフトなのですが、
画像を保存する時に、Exifデータの消去も簡単に出来ちゃうんです。


では、簡単に、使い方を説明していきますね!

その前に、「JTrim」のダウンロードは、こちらからどうぞ


まずは、「JTrim」を起動し、画像を開くよ!


ファイルから開いても、ドロップしてもOK
20130716-001.gif


画像の大きさ(縦横のサイズ)は、そのままで、
ファイルを軽くする場合


jtr-003.gif

ツールバーの「ファイル」から「名前をつけて保存」を選択。


jtr-002.gif

ダイアログボックスの右下にある「設定」を開く。


jtr-004.gif

保存オプションというダイアログボックスが開く。
注意書きにもあるように、通常は、オレンジ色で囲んである部分
「品質を数値で指定する」を選択し数値を入力する。
例:画像を半分の軽さにするならば、「50」を選択。
※画像を軽くしない場合は、「100」を選択する。(Exifデータのみを削除する場合)

「Exifデータを保持するのチェック」を外す。
画像下部:赤い囲み部分「この状態を保持する」にチェックを入れておけば、常にExifデータは、削除される。



画像の大きさ(縦横のサイズ)を変更する


ブログのテンプレートの幅にあった画像サイズに変更したい時などに。


jtr-005.gif

「リサイズ」のアイコンを選択

jtr-006.gif

サイズを変更する。
保存は、上記保存の仕方と同じ。



画像の一部を切り取る



jtr-007.gif

「切り抜き」のアイコンを選択


jtr-008.gif

切り取る部分を選択する囲みがあらわれるので、ドラッグし大まかに選択。
細かいサイズは、ダイアログボックスで座標を指定する。

画像下部のオレンジ色の点線の囲み部分に、選択している個所のサイズが表示される。この表示には、タイムラグがあるので注意。
(勿論座標から計算しても良い)

同じように、画像を保存する。



「JTrim」は、画像自体を編集するソフトなので、
Exifデータの細かな編集――時間と位置情報のみを消去するなどなど――は出来ません。
Exifデータの一部を残してブログなどに、アップしたい方は、選択編集可能なソフト(フリーソフトであるそうです)をお使いください。



便利になると、なんだか不便になるよね……と、思われた方は
クリックしてね!
にほんブログ村 OL日記ブログへ