ABSOLUTE LIFE

すてきなものにかこまれ、すてきな音楽をきき、すてきなものをたくさん見ることが、心のビタミン補給です。
4

えせDIGGYのためのブログ講座。

えせDIGGYがブログを開設した。
恋人が彼に電話をしたときに、写真の配置について、質問があったので、
ブログに使える簡単なタグをここでご紹介してみよう。
「そんなもん、知ってるワー」という方、
まちがっている部分があったら、ご指摘くださいね。

ブログは、あらかじめほとんどのプログラムがつくられているので、
タグを一切使わなくても、ページを作ることができるのだが、
より読みやすいブログにするには、いくつかのタグが有効だ。

タグ、というのは、ブログを組み立てる英語の文字列のこと。
初めと終わりに、必ずこういう< >がついて、
「こういうふうに文字や写真を配置しますよ」
というパソコン専用のことばです。

FC2のブログでは、画像を挿入すると、いちばんうしろに
br clear="all"
というタグが自動的に入ります。
これは、「改行します」という意味です。
具体的に写真を使って説明しましょう。
たとえば、2枚の写真を、ふつうにアップすると、このようになります。

06122302.jpg

06122302.jpg

これを、並べて表示したいなあ、と思ったら、
1つめの写真のタグのうしろについている
「br clear="all"」を(<>も忘れずに)消します。
1つめと2つめのタグの間に入っている改行を消し、
そこに全角スペースを入力します。
そのまま記述すると、タグとして認識されてしまい、文字列が見えないので、
<>を( )に変更して記述すると、以下のようになります。

(a href="http://blog-imgs-30.fc2.com/a/b/s/absolutelife25/06122302.jpg" target="_blank")(img src="http://blog-imgs-30.fc2.com/a/b/s/absolutelife25/06122302s.jpg" alt="06122302.jpg" border="0")(/a)「改行せずに、全角でスペースを入れます。」(a href="http://blog-imgs-30.fc2.com/a/b/s/absolutelife25/06122302.jpg" target="_blank")(img src="http://blog-imgs-30.fc2.com/a/b/s/absolutelife25/06122302s.jpg" alt="06122302.jpg" border="0")(/a)(br clear="all")
実際に記事を書くときには、すべての( )を、< >に変更してくださいね。
すると、こうなります。

06122302.jpg 06122302.jpg

br clear="all"を消すことによって、2つの写真が横に並ぶとともに、
間に全角のスペースを入れることにより、写真の間に適度な隙間ができ、
より見やすくなります。

では、写真の横に文章を表示させたい場合。
br clear="all"を消し、(/aは、消さないでね)
その手前に書いてあるborder=0のすぐ後に半角のスペースを入力してから、
align="left" または、align="right" という文字列を入力します。
ふたたび、< >を、( )に変えて記述します。
(a href="http://blog-imgs-30.fc2.com/a/b/s/absolutelife25/06122302.jpg" target="_blank")(img src="http://blog-imgs-30.fc2.com/a/b/s/absolutelife25/06122302s.jpg" alt="06122302.jpg" border="0" align="left")(/a)

leftなら、
06122302.jpg  こういう配置になります。
  文字に対して、
  写真は左側に表示されます。
  写真の横に文字を表示させる時は、
  文頭に全角スペースを入れると、
  写真とのあいだにすきまができて、
  読みやすいレイアウトになります。


では、rightなら、
06122302.jpgこんなふうに、
写真が反対側にきます。
わたしの場合は、
写真が、ぱっとすぐに
目に付くようにしたいので、
いつもleftにしています。


これは、おまけですが、タグのなかに書いてある
「alt="写真の名前"」
という部分は、
写真のうえにマウスを乗せたら、写真の名前を表示しますよ、
という意味です。
デフォルトでは、アップロードしたときのファイル名が挿入されますが、
ここを変更すると、すきなように写真を説明することができます。
それぞれの写真の上に、マウスをのせてみてください。
おっす、オラえせDIGGY! ちちんぷいぷい。
みたいなかんじで、写真にしゃべらせることもできるわけです。

ちなみに、検索エンジンは、この部分をちゃんと見ているようで、
この名前を、記事に則したものに変えておいた方が、
検索エンジンにひっかかりやすくなるのだそうです。

こんなかんじで、どうだね、えせDIGGY?
ちゃんと伝わっているかしら。
わかりにくいところがあったり、ほかにも質問などがあれば、
どしどしコメントおねがいします。

関連記事

該当の記事は見つかりませんでした。

4 Comments

えせDIGGY says..."ぶじに!"
うさぎ、ホントに助かりました。おかげ様で何とか写真の配置もサマになりましたよー!1時間位かかりましたが。リアルタイムプレビューにすごく騙されながら悪戦苦闘した賜物ですんで、また部ログに遊びに来てください。感謝してます。しかも、こんなに堂々とブログ講座を開いてくれるとは。「知ってるワー」という方々、すいません。また何かあったら質問するので、多分この講座、2回、3回と開催されそうな気が…。そうならない様、自分でも勉強します。ありがとう!!!!!

           ちちんぷいぷい!!
2006.12.23 02:08 | URL | #- [edit]
うさぎ says..."よかったよかった。"
いやー、わたしとしてもね、
この写真をかなり気に入っていてね、
いつか使いたいと思っていたので、
いい機会ができてよかったよ。

また質問があったらきいてくれよ、なんでも。

ちちんぷいぷい!
2006.12.24 20:48 | URL | #1jxB54a6 [edit]
Uexx says...""
えせDIGGYさんだけでなく
僕にもとても参考になりました。
あまり写真は使いませんが・・

うさぎさんは、パソコンの師匠ですから!!
2006.12.24 21:54 | URL | #- [edit]
うさぎ says..."ぜひ。"
コメントお返事おそくなってごめんなさい。

写真、活用してくださいよ。
見ているほうは、ただ文章だけよりも
写真つきの方がたのしいし、わかりやすいのですよ。
Uexx氏も、わからないことがあったらきいてください。
ちゃんと講座開設しますからね。
2006.12.27 00:08 | URL | #1jxB54a6 [edit]

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:http://absolutelife25.blog36.fc2.com/tb.php/436-cdb24fbd