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

2009.07.07 03:28|コラム:ちょっとした小技

今日も雨が降ったり止んだり、晴れてみたり…と、それはまぁ気まぐれなお天気でしたね。

でも、湿度が高いことだけは共通しているようで、ちょっと動いただけでジットリといやぁ~な汗をかく今日この頃…。

いよいよ、ワタシの苦手な季節の到来ですね(哀)。


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


まずは簡単に、みなさんがいつもご覧になっているホームページやブログの仕組みについてご説明しますと、こういったWeb上のページはほぼHTML(HyperText Markup Language)という専用の言語(タグと言います)を使うことによって、表や文字、タイトルなどを表現しています。

試しに、ご覧になっている画面上でマウスを右クリックしてみてください。

Windowsマシンをお使いの方は、小さなメニュー(コンテキスト・メニューと言います)が出て、その中に「ソースの表示(V)」というメニューがあります。

そのメニューを選択すると、メモ帳などが開いて、なんだか日本語と英語のごちゃまぜになったような画面が表示されます。

で、その中に「<マーク」と「>マーク」で囲まれたアルファベットがあるのですが、それをタグと呼んでいます。


いえ、難しく考えることはありません。

そして、HTMLなんて言葉も忘れてしまって大丈夫です。

とにかく、専用の言葉=タグがある…ということだけ覚えていていただければOKです。


で、ほとんどのブログの場合、記事を書く画面にツールバーが用意されていて、タグを知らない方でも、ある程度の装飾はツールバーのボタンを押すだけでできるようになっています。

例えば、利用している方が多いFC2の画面ですと、文字の色、文字の強調、下線、イメージの挿入、リンクの設定などのボタンが用意されています。

このボタンを押すと、実際にはタグが自動的に挿入されている…というワケです。

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」などがあります。



FC2の投稿設定画面(抜粋)


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


写真と文字を横に並べる方法には、いろいろな方法がありますが、ワタシが前回使ったのは一番単純な方法で、表の左側の欄(セルといいます)に写真を入れ、右側のセルに文字を入れる…という方法です。

表を作成するためのタグは、基本的に下のような3つのタグを利用しています。

下のタグを書き込むと、1行1列の表ができあがります。



  • <table>:表の始まり

  • <tr>:行の始まり

  • <td>:セルの始まり

  • セルの内容

  • </td>:セルの終わり

  • </tr>:行の終わり

  • </table>:表の終わり


では、実際に画像と文字を横に並べてみましょう!

まずは、作成画面で「<table><tr><td>」という文字を入力します。

これで表・1行目・1列目の始まりを宣言したことになります。

FC2の画面で説明しますが、その他のブログをお使いの方は、[ソース]や[タグ]のようなボタンがありましたら、そのボタンを押してから、入力してくださいね。


FC2の記事作成画面:テーブルタグの入力1


次に、ツールバーの[イメージ挿入]ボタンを押して、画像の一覧表から表示させたい画像を選択します。

この時に、FC2の方は「この画像で記事を書く」というボタンと「サムネイルで記事を書く」という2つのボタンがあると思いますが、「この画像で記事を書く」というボタンを押すとアップロードしたサイズの画像が表示され、「サムネイルで記事を書く」というボタンを押すと画像をアップロードした時に同時に作成されるサムネイル(縮小画面)サイズの画像が表示されます。

FC2をお使いの方は、下のプレビュー画面に写真が表示されます!


FC2の記事作成画面:イメージ挿入


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

その後に右側セル終わりのタグ「</td>」、1行目終わりのタグ「</tr>」を入力します。


FC2の記事作成画面:テーブルタグの入力2


2行目以降は、1行目と同じ操作を繰り返します。

そして、すべての行を作り終えたら、最後に必ず表終わりのタグ「</table>」を入力します。


FC2の記事作成画面:テーブルタグの入力3


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

CSSについては、また後日、ご説明しますね。



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


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



【7/7追記】

「えぇい!面倒だ!」という方は下のタグをコピーペしてお使いくださいませ(笑)。

スポンサーサイト
web拍手 by FC2(小雪吹雪Ver.)
参加してます♪
人気blog Rankingへにほんブログ村 鳥ブログ 文鳥へにほんブログ村 鳥ブログ 白文鳥へにほんブログ村 鳥ブログ 桜文鳥へにほんブログ村 鳥ブログ シルバー文鳥へ

Comment

No title

ほうほう、ほほう!(ふくろうではアリマセンよ^^;)
さすがChiaraさん、丁寧なご説明、、
この私にでも理解できそうです!ヾ(@゚▽゚@)ノ
これまでワケが分からないままなんとかやって来たぶろぐでしたが、
こういったコトだったのですね〜!(←でもまだ分かってないですが^^;)
このページをブックマークして、ゆっくり勉強したいと思います!
(私、文字が多いと眠くなるといういらない技を持っていますので)

私も写真の隣に文字を入れたいと思ったことがありますが
自分が使ってるテンプレではできないものだと、決めつけてました(^-^;
どうにかできるものなのですね〜(〃⌒ー⌒〃)∫゛
Chiaraさん&いずみんさん、ありがとうございます♪

No title

うぇぶで飯を食べてることはありますね~!
さすがです! とてもわかりやすい解説です。
だ、だけど、PC初心者の私には… 用語がすでに難しい(汗)
いつかきっと、こんな風に出来るようになりたいと思います。
勉強、勉強!

で、文章とまったく違う写真が、笑いを誘ってくれました~!

なにげに… ありがとうございました!(謎)

No title

Chiaraさん,ありがとうございます!
よくわかりました!
さっそく1つ記事を作ってみますね(^0^)

No title

いずみんさんとこの記事を先に見てたんですけど、なるほど・・・テーブルを使われてたんですね・・。
あたしはもぅとにかく別ウィンドウでそういうタグのページを開いてから、コピペ、コピペ、でみようみまねでやってるんで、もぅすっごい苦労するんですよ・・・。

Chiaraさんがご近所なら・・・・しょっちゅう呼び出してますよ、きっと^^;;;

No title

メンテが終了したようで、やっと見てるようになりました。。。

こちらは現在午前0時前ですが雨の所為もあり肌寒いです。

ほぅ~うぇぶ関連のお仕事をなさってるだけあってわかり易い説明ですね~。
うぇぶ講座を楽しみしてますよ~。結果はブログで~。

No title

ありがとうございます。
よくわからないままに始めブログ。最初子息に教わった通り書いているだけ、写真にぼかしや字を入れるのを1回ほど試みた時は1時間以上かかり何とかなったものの、どうして何とかなったのか未だにわからないという私です。

今回、料理の作り方の写真を載せたくて、せめて並べて写真載せたいなと思い、FC2の説明読んだのですが・・・私にはさっぱりわからず、削除しなさいと言われる字がどこのあるかも見つけられづ、あきらめました。
仕方なしに、ネットで検索したら、ここにくることができましいた。
私がこうしたいと思っていたものがありました。
本当に分かりやすく、私にもできたってすごいことです。
ありがとうございました。

No title

はじめまして!
「画像の横に文字を」で検索しまくっていろいろためしてみたのですが、全然改善されず「align="left"」とかも使ってみましたが・・・ここにたどり着きました。上記の方法でトライしてみたところ画像の横に文字が表示できた!のですが、表を使わずに画像の横に文字を出す方法も紹介して頂けませんでしょうか?よろしくお願い致します><

No title

お小遣いあげるからメールしておいでd(´∀`*)グッ★ http://gffz.biz/

No title

女ヤッて金もらえるの?(*´ω`)$ http://ktjg.net/index.html

No title

ぬいた(´-ω-)$ http://m-s.e29.mobi/
非公開コメント

| 2017.08 |
-
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Profile

Chiara

Author:Chiara
シルバー文鳥の淡雪、桜文鳥の芽吹と暮らしています。
ゴマ塩文鳥・吹雪は2013.7.19お星様に…
白文鳥・小雪は2013.10.12お星様に…

文鳥時計

Flower Dome

スポンサーリンク



カスタム検索

Resent Comments

Category

Resent Entries

Messate to me

名前:
メール:
件名:
本文:

Japanese Color

Counter


Short Message to me

Tweet

Search Form

RSS Link Disp.

Links

Amazon

ページtopへ