ちょっとした小技：写真と文字を横に並べるゼ！

今日も雨が降ったり止んだり、晴れてみたり…と、それはまぁ気まぐれなお天気でしたね。
でも、湿度が高いことだけは共通しているようで、ちょっと動いただけでジットリといやぁ～な汗をかく今日この頃…。
いよいよ、ワタシの苦手な季節の到来ですね(哀)。

先日、文鳥4コマのエントリーを書きましたところ、『文鳥「もか」のマイペースな日々』のいずみんさまより、「写真と文字を並べる方法を…」とリクエストをいただきましたので、不肖Chiara、一応うぇぶでご飯を食べているモノとして、文鳥界のお役に立ちたいと存じます(爆)＜おおげさ！

まずは簡単に、みなさんがいつもご覧になっているホームページやブログの仕組みについてご説明しますと、こういったWeb上のページはほぼHTML(HyperText Markup Language)という専用の言語(タグと言います)を使うことによって、表や文字、タイトルなどを表現しています。
試しに、ご覧になっている画面上でマウスを右クリックしてみてください。
Windowsマシンをお使いの方は、小さなメニュー(コンテキスト・メニューと言います)が出て、その中に「ソースの表示(V)」というメニューがあります。
そのメニューを選択すると、メモ帳などが開いて、なんだか日本語と英語のごちゃまぜになったような画面が表示されます。
で、その中に「<マーク」と「>マーク」で囲まれたアルファベットがあるのですが、それをタグと呼んでいます。

いえ、難しく考えることはありません。
そして、HTMLなんて言葉も忘れてしまって大丈夫です。
とにかく、専用の言葉＝タグがある…ということだけ覚えていていただければOKです。

で、ほとんどのブログの場合、記事を書く画面にツールバーが用意されていて、タグを知らない方でも、ある程度の装飾はツールバーのボタンを押すだけでできるようになっています。
例えば、利用している方が多いFC2の画面ですと、文字の色、文字の強調、下線、イメージの挿入、リンクの設定などのボタンが用意されています。
このボタンを押すと、実際にはタグが自動的に挿入されている…というワケです。
FC2の画面はこんな感じですね。

ワタシの利用している忍者ブログには、[ソース]というボタンがありまして、タグを書き込みたい場合にはそのボタンを押してから書き込む仕組みになっていますが、FC2の画面は、タグがわかる方はタグをそのまま記事を書くスペースに書き込んでもよい仕組みになっています。
FC2をお使いの方は、ツールバーの[設定]というボタンを押してみて下さい。
投稿設定画面の中に、ユーザタグ変換の設定項目があり、「記事本文のタグテキストをリンクに変換する」という設定になっています。
これが「変換しない」になっていると、どんなにタグを入れても、ただの文字として扱われてしまいます(涙)。

【7/7追記】
FC2のQ&Aをよぉ～く読んでみたところ、この「ユーザタグ」なるものは、ワタシがご説明したホームページやブログを表現するための言語＝タグではなく、キーワードを表すタグのことですね(汗)。
最近、よくブログや動画&画像投稿サイトなどで使われる「タグ」という言葉…これはいわゆるキーワードのことで、内容に関連のあるキーワードを設定しておくと、GoogleやYahooなどの検索サイトで検索結果として表示されやすくなったり、同じブログサイト内などで同じキーワードを使ったブログ記事を検索しやすくなるというワケです。
日常的な所作に置き換えると、自分のブログにキーワードを書いた付箋を貼っておいて、同じキーワードを書いた付箋を探している人に探しやすくしておく…という感じでしょうか(笑)。
従って、今回のワタシの説明したいタグとはタグ違いでした(汗)。
ゴメンナサイ！
それよりも、下の画面の赤枠の上、「サムネイル作成のサイズ」の方が有益な情報かもしれません。
縮小サイズはここで指定していて、縮小画像を大きくしたい場合は、ここのサイズを変更しておけばOKです。
で、変更する時のポイントですが、通常のデジカメですと、画像の横：縦の比率は4:3になっています。下の画面を見ていただくと「240px×180px」となっていますが、これも「4:3」の比率です(60px×4＝240px、60px×3＝180px)。そのため、縮小画像を大きくしたい場合は、この比率になるように変更しないと、びよ～んと横だけ拡大されてしまったり、逆にホッソリすぎるくらい縦だけ拡大されたりしてしまうワケです。拡大する数字の例としては、「320px×240px」や「400px×300px」などがあります。

では、肝心の写真と文字を横に並べる方法をご説明しますので、興味のある方はどうぞ！

写真と文字を横に並べる方法には、いろいろな方法がありますが、ワタシが前回使ったのは一番単純な方法で、表の左側の欄(セルといいます)に写真を入れ、右側のセルに文字を入れる…という方法です。
表を作成するためのタグは、基本的に下のような3つのタグを利用しています。
下のタグを書き込むと、1行1列の表ができあがります。

• <table>：表の始まり
• <tr>：行の始まり
• <td>：セルの始まり
• セルの内容
• </td>：セルの終わり
• </tr>：行の終わり
• </table>：表の終わり

では、実際に画像と文字を横に並べてみましょう！
まずは、作成画面で「<table><tr><td>」という文字を入力します。
これで表・1行目・1列目の始まりを宣言したことになります。
FC2の画面で説明しますが、その他のブログをお使いの方は、[ソース]や[タグ]のようなボタンがありましたら、そのボタンを押してから、入力してくださいね。

次に、ツールバーの[イメージ挿入]ボタンを押して、画像の一覧表から表示させたい画像を選択します。
この時に、FC2の方は「この画像で記事を書く」というボタンと「サムネイルで記事を書く」という2つのボタンがあると思いますが、「この画像で記事を書く」というボタンを押すとアップロードしたサイズの画像が表示され、「サムネイルで記事を書く」というボタンを押すと画像をアップロードした時に同時に作成されるサムネイル(縮小画面)サイズの画像が表示されます。
FC2をお使いの方は、下のプレビュー画面に写真が表示されます！

次にこの左側セル終わりのタグ「</td>」を入力し、右側セル始まりのタグ「<td>」を入力して、続けて写真の右側に表示したい文章などを入力します。
その後に右側セル終わりのタグ「</td>」、1行目終わりのタグ「</tr>」を入力します。

2行目以降は、1行目と同じ操作を繰り返します。
そして、すべての行を作り終えたら、最後に必ず表終わりのタグ「</table>」を入力します。

先日、ワタシが書いたエントリーでは、行と行の間に横線が入っていましたが、これはCSS(Cascading Style Sheets)、いわゆるスタイルシートで、線を入れる場所や色、太さなどを設定しています。
CSSについては、また後日、ご説明しますね。

どうでしょう？少しはお役に立てたのならば、よいのですが…。

※本日も最初の方の写真と本文にはまったく！関連性がありません。ご了承ください(爆)。

【7/7追記】
「えぇい！面倒だ！」という方は下のタグをコピーペしてお使いくださいませ(笑)。
-------------------------------------------
<table align="center">
<tr><td>写真1</td><td>説明文1</td></tr>
<tr><td>写真2</td><td>説明文2</td></tr>
<tr><td>写真3</td><td>説明文3</td></tr>
<tr><td>写真4</td><td>説明文4</td></tr>
<tr><td>写真5</td><td>説明文5</td></tr>
</table>
-------------------------------------------
「写真1～5」の部分で[イメージ挿入]ボタンを押して写真を挿入して、「写真1～5」の文字を削除してくださいね。
そして、「説明文1～5」の文字をお好きな文章に変えてくださいませ。
「行が足りない！」場合は↑のタグの2～6行目をコピペして行を増やせますし、「行が多すぎる！」場合は↑のタグの2～6行目の不要な行を削除して下さい♪

次回、写真と文字の間に余白を入れる方法や、行と行の間にお好みの色の線を入れる方法などをご説明したいと考えておりますので、まずは、一番単純な↑のタグでお試しを！

あっ、他に何かリクエストがありましたら、コメントでお申し付けください。
不肖Chiara、文鳥界のために少しでもお役に立てれば本望ですっ！＜おおげさ

<...close...