「いさはやサイズ」使い方応用編＆よくある質問集

ブログに動画を投稿したい、というご要望がありました。
結論を言うと、「いさはやサイズ」に動画を直接投稿することは現在のところ出来ません。
しかし、YouTubeなどの動画投稿サイトに投稿した動画にリンクを貼って、ご自分のブログの記事の中で表示させることは可能です。

はじめにお断りしておきますが、ビデオ・デジカメや携帯電話での動画撮影法や撮影後の編集、動画投稿サイトへのユーザー登録・使い方などはここでは説明しません。
理由は、撮影する機種や編集ソフト・投稿サイトはそれぞれ複数あって、全てを説明するのは不可能だからです。

さて本番。
動画投稿サイトとしてはYouTubeが最も有名ですが、今回はソニーが運営するeyeVioに投稿した動画をご自分のブログで表示させる方法をご紹介します。
動画投稿サイトへ投稿できさえすれば、いつもご自分のブログでやっている操作と違うのはたった１つだけです。
拍子抜けするほど簡単ですよ。


１，eyeVioにログイン後マイビデオを表示させ、使いたい動画の横にある「埋め込みHTMLを表示」というボタンをクリック。
２，新しくウインドウが開きます。
３，表示されたコードの文字列を全てコピー。



４，ご自分のブログの新規投稿画面の本文入力欄に貼り付け。



５，投稿画面下の方にある《URLリンク変換》という項目の「変換しない」にチェックを入れ、最後に「保存する」をクリックして終了。



いつもと違うのは５，の部分だけです。

記事タイトルの書き方

ブログを投稿するとき、記事のタイトルは非常に重要です。
たとえばポータルトップページに新着記事がたくさん並んだ場合、どの記事を読むかの選択は記事のタイトルに左右されることが多いようです。
思わず読んでみたくなるようなタイトルを付けると、クリックしてもらえる確率は格段に上がります。

もう１つ、検索エンジンにとっても記事のタイトルは重要で、あるキーワードがタイトルに含まれる場合と本文中に含まれる場合とでは、タイトルに含まれる場合の方が検索結果は上位に表示される傾向にあります。

みんなに興味を持ってもらえて、なおかつ探して欲しいキーワードをタイトルに入れるのが上級テクニックなのですが、あまり長い文字列のタイトルだとミエミエになりますのでご注意を。


本文の書き出し

「まちブログいさはや」では、投稿された記事本文の先頭から全角２５文字分、または改行するまでを新着記事の要約文としてポータルトップに表示しています。
ところが、この要約文が時々「・・・」となっていることがあります。
本文の書き出し部分に文章ではなく画像を入れた場合はこうなりますので、できればまず少しでも文章を書いてからその下に画像を配置した方が有利です。

要約文が記事のタイトルといっしょにポータルトップに表示されるということは、たった２５文字の勝負になりますが、この部分で読者の興味を惹きつけることも記事を読んでもらうのためには重要ですよ。

本文の書き方といっても、特別な難しいテクニックがあるわけではありません。
要するに、読者が読みやすいような文章にして下さい、ということです。


やってはいけない悪い例

ブログに限らず、パソコンで文字を読んでもらうには印刷物とは違った配慮が必要になります。
見た目で言うと、文字のサイズが小さい、行間が狭い、背景と文字の色が似ていて文字が判読しづらい、これがワースト３です。

また、文字の装飾で太字を多用したり色を使いすぎるのも禁物です。
文字の装飾は要所要所を的確に目立たせて、文章にメリハリを付けたいときだけにしておいた方が無難です。


ちょっとした配慮を！

何行にも渡った文章は読みづらいので、できるだけ短い文章を改行や空行を交えながら１つの「固まり」として見せた方が全体の把握がしやすいので読む方は楽です。

さらに、その「固まり」には見出しを付けてやり、この見出しにこそ、太字にしたり色を付けたりといった文字装飾をしてやるべきです。



一般的なホームページに比べて更新頻度が高いブログは、何度も何度も見てもらえる可能性が高いということを忘れないで下さい。
当然、これは文章だけでなくデザインにも言えることですが、アクセサリー付けまくりの化粧しまくりより、すっきりしゃんとした「性格美人」を目指した方が読者には好まれます。

よく問い合わせがあるのが、画像の横に文章を入れる方法です。
特に縦長の写真の場合は横に大きな空白ができてしまうので、ここに文章が入ると見た目がすっきりします。

ある程度の知識が必要となりますが、ブログの設定などをいじるわけではないので、「失敗したら記事ごと削除してしまえ！」ぐらいの気持ちでチャレンジしてみてください。


HTML で設定します

【解説】
画像を表示させるためのタグ<img src="http://〜 />の部分をちょこっといじるだけです。
・align="left" で画像を左側に配置し、文章を回り込ませます。
・<br clear="all"> で回り込みを解除します。
この２つをセットで使います。
leftをrightにすると、画像を右寄せして文章を画像の左側に回り込ませます。


※以下の文中の[]は、半角（英数字モード）のスペースを意味します。
　スペースは見えないので、ここでは便宜上使います。

【回り込み設定】

まずは画像をファイルマネージャーからアップロードします。
次に画像をサムネイルで挿入します。
ここまではいつも通りです。

さて本番、記事内容入力欄にゴチャゴチャ書いてあるタグの中から、画像を表示させるためのタグ<img src="http://〜 />を探してください。

見つかったら、一番最後の部分、[]/>の直前に
[]align="left"[]hspace="5"[]vspace="5"を足して、
 align="left" hspace="5" vspace="5" />と変更します。

いちいちキーボードで打つのが面倒なら、[]/>の部分だけ上書きになるように
 align="left" hspace="5" vspace="5" />をコピーして貼り付けてください。

hspaceは水平、つまり画像の左右に設定する余白のことで、5というのは5ピクセルの意味になります。
vspaceは垂直、画像の上下に設定する余白です。
これらの余白がないと、画像と文章がくっついて見苦しくなってしまいます。
余白の数値は5ピクセルでなくてもいいのでお好きにどうぞ！


【回り込み解除】

文章の後に
<br clear="all">
を足します。
これがないと本文の下にあるposted〜の部分が横にはみ出します。


例）

ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。

ブログの記事を書いていて、特定の文字（または文字列）だけサイズを大きくした場合、上下の行にある文字や画像と重なってしまうことがあります。
こんな時は以下の方法で解決します。

管理画面から、「デザイン」→「マイスタイルシート」を開いて、

/*---------------------------
Article style
---------------------------*/
の下の、

.blogbody {
margin-bottom:15px;
background:#fff;
line-height:120%;
font-weight:normal;
border:1px solid #003366;
}

という部分の中の、

line-height:120%;

の行を、%無しの

line-height:1.2;

に変更してください。
この部分は本文中の『行間』を指定する値です。
この場合の1.2とは、行間を1.2倍にしろという命令になります。
％のような単位を付けなければ、大きい文字でも大きい文字なりの行間が確保できます。
ただし、ウインドウズ９５あたりの古〜いブラウザ（パソコン）だとレイアウトが崩れる可能性があります。
まあ、あまりに古いブラウザのことは気にしなくてもいいとは思いますが。