画像の横にも文章を(1)

「画像に文章が回り込む」って言い方が正確なのかな。
でも、初心者だと「回り込むって何?」と思うのではないかと…。私がそうだったし。
ここは初心者によるブログカスタマイズ初心者のためのブログですから、専門用語(?)を使わずに平易な言葉を使うように心掛けてますので~。

画像と文章を混在させるコンテンツ(ブログでもサイトでもね)の場合、画像の横にも文章を配置したいことありますよね。

私がブログを始めたての頃、これがしたいのに方法がわからなくて困ってました。

他のブログ、例えばJUGEMなんかは機能が付いてて、HTMLタグがわからなくてもできたんですよ。
その頃Seesaaブログには機能がなかったけれど、今ではできるようになりました。
今日は、「横に文章を配置できるように画像を入れる方法-その1-」を紹介します。

Seesaaヘルプでも解説してはあるんですよ。
それをご覧になりたい方は、「ブログ・ヘルプ:画像のアップロード方法について」をご覧くださいね。

実は私はこの方法↑が好きでなくて~。
理由は、アップロードするフォルダを選べないからなんです。
「フォルダは1個しかないよ」という方は全然問題ないので、というか一番簡単な方法なので、上記ヘルプで紹介している方法でやってみてください。


というわけで、アップするフォルダが複数あって指定したい方は、これから紹介する方法がありますので、参考にしてくださいね。


まず、記事投稿の画面を開きます。
文字装飾をするアイコンの並びにあるフォルダのアイコンをクリックします。
ポイントすると、「ファイルマネージャー」という文字が出ます(IEみのだと思います)。



記事を各画面から、フォルダアイコンをクリックして、ファイルマネージャーを開きます。



先に、アップするフォルダを選んでおきます。忘れないようにね。
え? 忘れちゃううつけ者って私だけ? そ、そうかぁ。

それから、「参照」ボタンをクリックして、アップする画像が入っているフォルダを開き、画像を選んで「OK」ボタンをクリックします。



アップした画像のファイル名がリストの一番上に来てますよね?
ファイル名をポイントするだけで画像のプレビューが表示されます。
これで間違わずに操作できますね。

プレビューされることがわかったところで、ファイル名をくりっくします。



ウインドウがポップアップします。
「レイアウト無し」の右にあるボタンを押します。
「右回り込み」か「左回り込み」を選びます。



ここでは「左回り込み」を選びました。
すると、その上のプレビューの部分も画像の右側にサンプルの文章が配置されます。

このウインドウで、画像ファイルのタイトルを付け直したり、画像にタグを付けることができます。

「保存」ボタンを押すと設定が保存されます。



「保存」ボタンを押すと、赤い字で「以下を保存しました」と表示されます。
「ファイル添付」というボタンを押します。
あとは「閉じる」ボタン(または右上の×)を押して、2つのポップアップウインドウを閉じます。

文章を入れるところに画像のタグが入りましたね?
あとは</a>の後に続けて、いつものように文章を書いていけばいいんです。

記事のタイトルと記事本文を入力して、ページの下部にある「確認する」ボタンを押してみましょう。
画像の右側に文章が配置されてますね?

記事の部分にちょっと注目!
文章の最後に、<br clear="all">というタグが挿入されてるんです。
これが大事!
普通の改行なら<br />でいいんですけど、clear="all"が入ってるんですね。
これが回り込み解除の印なんです。

回り込み解除を使ってレイアウトしていく方法についてはまた今度…。


では、上記の手順で画像を使った記事を作ってみます。



j071125.jpgFF1600
フォーミュラ・フォード1600
(オーストラリア)
フォーミュラの入門車と言えるのがこのFF1600。
その性格上、コストはできるだけ抑え、イコールコンディションで競えるようにスリックタイヤ、リアウイング等は禁止されている。(那須クラシックカー博物館の展示より)

…「乗れます」というプレートが立ってました。
乗ってみました。ひとりで立てなくなりました(爆)。すんごく困りました。
やーね。ハンドルを外して乗り降りするものなのよねって、動けなくなってから思い出しました。。。


【おまけの右寄せバージョン】

j071125.jpgFF1600
フォーミュラ・フォード1600
(オーストラリア)
フォーミュラの入門車と言えるのがこのFF1600。
その性格上、コストはできるだけ抑え、イコールコンディションで競えるようにスリックタイヤ、リアウイング等は禁止されている。(那須クラシックカー博物館の展示より)



いかがでしたか?
これをサクサク使えるようになると、デザインの自由度があがりますよね♪
ガンガン使ってモノにしてくださいねー。



↓参考になったら、クリックで応援してね!↓
とっても励みになります。記事を書く原動力になってますので、ぜひ!


この記事へのコメントが 2 件あります

  • まじろ

    おはようございます。
    最近 SeeSaaブログをはじめました。少しづつですが、カスタマイズなど悪戦苦闘しながらやっています。でも、SeeSaaのヘルプはちょっと不親切でわかりにくく、このブログのような親切サイトは大助かり、よく閲覧させていただいております。ほんとにありがたいです。
    さて、ひとつ教えていただきたいのですが、このページにあるように、画像のアップはできました。ところが、文章と画像がくっつぎすぎて少し余白が欲しいと思いました。このページでも「フォーミュラ・フォード1600」の写真、文章と少し離したらグッとバランスがよくなりそう。ほんの少し、半字分くらい。そのようにするにはどうしたらいいんでしょう。ご存知でしたら教えてください。
    こんな質問、ちょっとぶしつけだったらお許しください。では。
    2008年01月12日
  • もも@管理人

    ◆まじろさん
    読んでくだっているとのこと、大変嬉しいです。
    それなのに、留守にしていてレスが遅れてしまいました。
    すみません。<(_ _)>

    さて、ご質問のまさに回答になることが次の記事「画像の横にも文章を(2) 余白を調整」に書いてありますので、読んでみてくださいね。
    http://testomomo.seesaa.net/article/73010149.html
    2008年01月16日

この記事へのトラックバック