忍者ブログ
文鳥とお花とワタシと…
大切なパートナーの「文鳥」と狭いながらも楽しい我が庭で育てている「お花たち」とワタシの記録
 p.249 |  p.248 |  p.247 |  p.246 |  p.245 |  p.244 |  p.243 |  p.242 |  p.241 |  p.240 |  p.239 |
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

拍手する
参加してます♪
人気blog Rankingへにほんブログ村 鳥ブログ 白文鳥へにほんブログ村 鳥ブログ 桜文鳥へblogram投票ボタン

Link This Entry?

This Entry URI:

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

やっぱりカナリーシードはおいしいなぁ|ちょっ、アタシにもよこしなさいよ!先日、文鳥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追記】
「えぇい!面倒だ!」という方は下のタグをコピーペしてお使いくださいませ(笑)。
-------------------------------------------
<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、文鳥界のために少しでもお役に立てれば本望ですっ!<おおげさ

PR
拍手する
参加してます♪
人気blog Rankingへにほんブログ村 鳥ブログ 白文鳥へにほんブログ村 鳥ブログ 桜文鳥へblogram投票ボタン

Link This Entry?

This Entry URI:
Submit Comment
Name
Title
TextColor
E-mail
URI
Comment
PassWord   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Secret message       

├── プレビュー中 ──┤ [preview]ボタンを押すと閉じます。

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

私も写真の隣に文字を入れたいと思ったことがありますが
自分が使ってるテンプレではできないものだと、決めつけてました(^-^;
どうにかできるものなのですね〜(〃⌒ー⌒〃)∫゛
Chiaraさん&いずみんさん、ありがとうございます♪
はま煎茶 URL 2009/07/07(Tue)08:47:30 編集
照れるなぁ(笑)
ふくろうのように感心して下さって、ありがとうございます(笑)。
一応、こんなんでご飯食べさせてもらってます。
で、元は講習会の講師とか講習会のテキストや説明マニュアルを自作してた頃もあったので(汗)。
少しはお役に立てたでしょうか?

>(私、文字が多いと眠くなるといういらない技を持っていますので)
えぇ、えぇ、誰だってそうだと思いますよ!
次回、同じようなエントリーを書くときは、もっと画面の画像をたくさん入れますね♪

用意されているテンプレート、デザインや、使いにくい…と思っているトコロを変えたりすることも可能な場合もあるんですよ~。
奥は深いのですが、必要な部分だけ覚えれば充分ですから!
Chiara  2009/07/08 15:40
 さすが!
うぇぶで飯を食べてることはありますね~!
さすがです! とてもわかりやすい解説です。
だ、だけど、PC初心者の私には… 用語がすでに難しい(汗)
いつかきっと、こんな風に出来るようになりたいと思います。
勉強、勉強!

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

なにげに… ありがとうございました!(謎)
tsukiko 2009/07/07(Tue)09:21:41 編集
一応、こんなんで(汗)
一応、こんなんでご飯食べてます(汗)。
わかりやすいと言っていただくのが、一番の褒め言葉です♪

初心者の方には、少し難しいですよね。
テンプレートもいろいろと用意されていますが、ここがこうだったら…と思うことありません?
実はそういうトコロも、改善できる場合があるんですよ~。
ブログを書くことに慣れてきたら、ぜひ挑戦してみてくださいね♪

>で、文章とまったく違う写真が、笑いを誘ってくれました~!
違うエントリーを書こうと写真を用意していたのですが、「あっ、いずみんさんにお約束したんだった!」と思い出し、急きょ内容を変更したので、こんなコトに(汗)。
でも、ワタシの場合、「文章と写真には全く関連性がありません」って注意書きはよく使ってるし(爆)。

>なにげに… ありがとうございました!(謎)
いぇ、こちらこそ、なにげに…ありがとうございました!(謎)
Chiara  2009/07/08 15:44
 おお わかりやすいです!
Chiaraさん,ありがとうございます!
よくわかりました!
さっそく1つ記事を作ってみますね(^0^)
いずみん URL 2009/07/07(Tue)10:20:04 編集
お役に立てて、何よりです!
「よくわかりました!」と言っていただけて、うれしいです。
記事も拝見しましたが、いずみんさんの「絵本」らしさが出ていて、とても素敵な記事でした♪
少しでも貢献できて光栄です!

それにしても、トムくん、元気ですねぇ!(笑)
Chiara  2009/07/08 15:46
なるほど。
いずみんさんとこの記事を先に見てたんですけど、なるほど・・・テーブルを使われてたんですね・・。
あたしはもぅとにかく別ウィンドウでそういうタグのページを開いてから、コピペ、コピペ、でみようみまねでやってるんで、もぅすっごい苦労するんですよ・・・。

Chiaraさんがご近所なら・・・・しょっちゅう呼び出してますよ、きっと^^;;;
蚊取り犬 URL 2009/07/07(Tue)11:35:57 編集
物事はマネからですよ!
そうなんですよ、表を使ってレイアウトすると初心者でもレイアウトしやすいんです。
実は、うぇぶでご飯を食べているワタシのような人間は、表を使ってレイアウトすることは卒業しなければならない現状なんですが、ブログは楽しく仕事を忘れてやらせていただいてます(爆)。

蚊取り犬さんのようにタグをコピペして、自分で作っているっていうのもスゴイですよ。
何事も、最初はマネから入って、だんだんと自分のモノにしていくのですから!

>Chiaraさんがご近所なら・・・・しょっちゅう呼び出してますよ、きっと^^;;;
そうさねぇ、ちょっと距離離れてますよね(爆)。
Chiara  2009/07/08 15:50
 さすが♪
メンテが終了したようで、やっと見てるようになりました。。。

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

ほぅ~うぇぶ関連のお仕事をなさってるだけあってわかり易い説明ですね~。
うぇぶ講座を楽しみしてますよ~。結果はブログで~。
ぽうこ 2009/07/08(Wed)06:43:25 編集
肌寒い…うらやましい…
そちらは雨が降って肌寒いんですか…そうですか…。
こちらも同じように雨は降るんですが…蒸し暑いです…。
汗とともに溶けて流れていってしまいそうです(爆)。

Yahooブログは少し独特なところがあるので、お役に立つとよいのですが…。
ぽうこさんのブログのソースでテーブルタグを発見する日を楽しみにしてます(笑)。
Chiara  2009/07/08 15:52
出来ました
ありがとうございます。
よくわからないままに始めブログ。最初子息に教わった通り書いているだけ、写真にぼかしや字を入れるのを1回ほど試みた時は1時間以上かかり何とかなったものの、どうして何とかなったのか未だにわからないという私です。

今回、料理の作り方の写真を載せたくて、せめて並べて写真載せたいなと思い、FC2の説明読んだのですが・・・私にはさっぱりわからず、削除しなさいと言われる字がどこのあるかも見つけられづ、あきらめました。
仕方なしに、ネットで検索したら、ここにくることができましいた。
私がこうしたいと思っていたものがありました。
本当に分かりやすく、私にもできたってすごいことです。
ありがとうございました。
ロッキー&マーフィー母 URL 2009/07/29(Wed)05:46:47 編集
はじめまして
ロッキー&マーフィー母さん、はじめまして!

ワタシのエントリーを参考にしてくださったんですね。
そして、わざわざお礼のコメントをくださって、ありがとうございました。
先ほど、ブログにお邪魔してきました。
茄子の即席漬け、写真付きでわかりやすく説明されてましたね♪

ブログ、書くだけならばすぐにはじめられますが、だんだんと「こんなことをしてみたい」「こんな風に書きたい」と思うようになるものですよね。
でも、どのブログのQ&Aやヘルプも、わかりづらい部分が多いです!

これからも時間を見つけて、僭越ながら、こういった小技をご紹介できたら…と思っておりますので、ぜひまた遊びにいらしてくださいね。
お待ちしています!
Chiara  2009/07/29 16:36
 
はじめまして!
「画像の横に文字を」で検索しまくっていろいろためしてみたのですが、全然改善されず「align="left"」とかも使ってみましたが・・・ここにたどり着きました。上記の方法でトライしてみたところ画像の横に文字が表示できた!のですが、表を使わずに画像の横に文字を出す方法も紹介して頂けませんでしょうか?よろしくお願い致します><
MURASOU 2010/02/24(Wed)23:07:37 編集
はじめまして
はじめまして。コメントありがとうございます。
お返事が遅れて、スミマセン。

「画像の横に文字を」で検索してくださって、たどりついてくださったんですね(笑)。

表を使わない方法ですが、基本的には「align="left"」や「align="right"」で可能だと思いますが、画像の縦幅よりも文字の行数が少ないと、文字が次の画像に回り込んでしまって、思うようなレイアウトにならないのですよね…。

この文字の回り込みを回避する方法はpタグを使う方法ですが、指定する方法には2つあります。
1つ目は、記事を作成する画面で、pタグにスタイルを指定する方法。
2つ目は、テンプレートのCSSにpタグのスタイルを指定する方法です。

1つ目の方法は、記事作成画面で以下のように入力します。
※画像をクリックして、拡大してご覧下さいね。

-----------------------------------------------------------------------------------


説明画面1

-----------------------------------------------------------------------------------



pタグにつけた「style="clear: both;"」という記述が、次の画像が配置されたときには、文字の回り込みを解除するというスタイルです。
画像と文字の間にスペースがないと記事が読みづらくなるので、imgタグに「hspace="XX"(XXの部分に数字を入れます)」と指定すると、文字と画像の間に水平スペースを入れることができます。

2つ目の方法は、上のpタグに記述した「style="clear: both;"」をCSSに記載する方法です。
お使いのブログの「テンプレートの設定」や「テンプレートの編集」などのメニューを選択して、「スタイルシート」の画面の最後に以下の記述を追加します。

-----------------------------------------------------------------------------------


p {
clear: both;
}

-----------------------------------------------------------------------------------



このようにスタイルシートに記述すれば、記事作成画面のpタグに毎回「style="clear: both;"」と記述しなくても、pタグだけで文字の回り込みが解除されます。
また、画像と文字の水平スペースについても、スタイルシートに以下のように記述しておけば、毎回指定する必要がなくなります。

-----------------------------------------------------------------------------------


img {
margin: 10px; /* 画像の周りに10pxのスペースを入れる */
}

-----------------------------------------------------------------------------------



ただし、上記のスタイルシートに記述する方法は、すべてのpタグ、imgタグに適用されますので、その時その時の場合によって使い分けたいときには、クラス分けすることになります。

例えば、次のようにスタイルシートに記載します。

-----------------------------------------------------------------------------------


p.photo {
clear: both;
}

img.photo {
margin: 10px; /* 画像の周りに10pxのスペースを入れる */
}

-----------------------------------------------------------------------------------



上記の例は、「photo」というクラスを作り、そのクラスを指定した時だけ、pタグの画像の回り込みを解除し、画像の周りに10pxのスペースを設けることができます。

実際の記事作成画面では次のように入力します。

-----------------------------------------------------------------------------------


説明画面2

-----------------------------------------------------------------------------------



また、「photo」というクラスを使用するときには、画像は必ず左側に寄せると決まっている場合は、スタイルシートに以下のように記載します。

-----------------------------------------------------------------------------------


p.photo {
clear: both;
}

img.photo {
float: left; /* 画像は常に左側に寄せる */
margin: 10px; /* 画像の周りに10pxのスペースを入れる */
}

-----------------------------------------------------------------------------------



このようにスタイルシートに記載した場合は、実際の記事作成画面では次のように入力します。

-----------------------------------------------------------------------------------


説明画面3

-----------------------------------------------------------------------------------



とっても長くなってしまいましたが、参考になれば幸いです。
Chiara  2010/03/14 04:01
この記事へのトラックバック
この記事にトラックバックする:
♥ Admin ♥ Write ♥ Res ♥
Animal Clock


Calendar

08 2017/09 10
S M T W T F S
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

Sur Craft

Japanese Colors

Recent Comments

Widget

連絡はコチラから!
Twitter

twitter / Chiara5513

Counter


ブログ内検索

Monthly Archive
RSS

Oldest Entries

(02/12)
(02/13)
(02/14)
(02/15)
(02/16)

アクセス解析
Copyright ©  文鳥とお花とワタシと…  All Rights Reserved.
* Material / Template by tsukika忍者ブログ [PR]