FC2ブログ

毎日更新!LuckyDuckyDiary

いらっしゃいませ。毎朝6時には更新します。さっくり読んでいってください。コメントくださった方はリンクさせてください、相互リンク歓迎、リンクがダメな方は連絡お願いします。

画像をブログに上手く貼る方法

画像をブログに貼るとき、画像の「下」とか「上」にではなくて、画像の横に、文章を載せたい時に、どうすればいいか…というのを聞かれたので、もしかして誰かに参考になるかと思うので書いておく。私もあんまり、こういう知識はないけれども、説明する時に、かなり、慣れていない人だったら、どうなるかバージョンで。

---------------------この線から下

<p><img border="1"src="画像のURL" alt="画像が出ないとき出す文字" title="画像にマウスをのせたとき出す文字列" width="半角の数字、ピクセル数で" style="float:left;margin:15px;"/>画像の横に表示する文章はここにいれる</p>
<p style="clear:both";></p>

---------------------ここまで
上の線2本の間にある文章を、マウスで選んで、右クリックでコピー。
パソコンの、ワードパッドか、メモ帳を出す。
新しい文書を作成して、そこに、右クリックで貼り付け。
そのあと、上の文章の「<」と「>」を全部半角に入れ替える。

ここまでで、前準備終了。

1:FC2の、「ファイルのアップロード画面」に行くと、下のほうに、それぞれの画像のファイル名、題名、サイズ、それから、一番下に「http://」または「https://」から始まるURLがあるので、貼りたい画像のURLを選んで「コピー」。
さっき打った文章内の「画像のURL」の文字列の代わりに、そのURLを貼る。

2:画像が出ないとき出す文字、となっている部分は、「""」となっていれば、何も出さないのも可能。画像が出ないときに貼っておくマークとかがあるなら、そのURLを。文字でいいなら、文字を打ち込んでおくと出る。

3:画像にマウスをのせたとき出す文字列、となっている部分は、画像の題名でもいいし、自分の感想でもいいし、「""」と、コーテーションマークの中に何も入っていなければ、何も出さないというのも出来る。私は、「XXから、お借りしました」とか書くことが多い。

4:半角の数字、ピクセル数で、となっている部分には、「150」と入れれば、150ピクセル幅で出るし、300、と入れれば300ピクセルで。なにも入れずに「""」としておけば、アップロードした画像のサイズそのままが出る。
ちなみに、幅だけでなく、高さを指定するのに、「height=""」なんていうのも書いておけば、高さも指定できるが、横幅しか指定しないと、縦横の比率はそのままで、出してくれるので、幅だけの指定でも大丈夫。

5:左側に画像、その横に文章…じゃなくて、画像は右側がいい、という人はleftという単語をrightに変えればOK。

6:「画像の横にいれる文章はここにいれる」となっている「>」と「<」の間に、文章をいれる。

よし、出来た。と思ったら、メモ帳か、ワードパッドから、fc2のブログ編集画面の「本文の編集」のところへコピーしてペースト。
今日作った文章は、違う画像を貼るときのために、取っておくと次が簡単。
注意点:FC2ブログの、ブログ編集画面のてっぺんの「簡易モード」を「OFF」にしておくこと。

-----------ここから
<p>前文章<a href="クリックで飛びたいサイトのURL"target="_blank"><img src="クリックしてもらう画像のアドレス" alt="見られない場合はリンク切れです" title="クリックで飛びます" border="1" width="画像の幅指定、半角の数字で" height="高さの指定、半角の数字で" style="float:left; margin:15px;"/>リンク先の名称</a>後文章</p>
<p style="clear:both";></p>
-----------ここまで
この文章も、「<」と「>」を半角に変えて、「""」の間に必要なURLや数字、文章をいれることで、画像をクリックしたら飛ぶ、というのが出来ます。「前文章」「後文章」は、説明や、ブログの本文を回り込ませたいときにここに文章をいれる部分。

前までは、私もこれが出来なかったのだけれど、色々試して出来るようになったので、ここに書いておきます。

« 焼き海苔説|Top|初、プラモデル »

コメント

ありがとうございます!
アタシ、ずっと、どうやったら画面の横に文章が載るのかなあと思っていたのです。
まこさんのおっしゃるとおりに、頑張ってみます!
(^◇^)

きたあかりさんへ

おお、がんばってください。ちなみに検索するときは「画像を回り込ませる」です。プレビューを駆使して、どこを変えたらどうなるか、試しながら行くのがコツです。英語、数字は半角で、に注意すればこれでいけるはずですよ!うまくいかなかったら、「どんな風になっちまったのか」を教えてもらえれば、多分わかると思いますのでメッセージか、コメントください。

俺はテーブルタグとか使って表現したこともあるな

自分はこういうのはダメ。
でも面白そうだからやってみます。
結果は後日お知らせします(^^♪

てかとさんへ

テーブルタグ、ちょっと触ってみたことがあるんですが、入れ込みすぎてわけかわからなくなって断念しました。しょっちゅう写真を貼るとしたら、このぐらいが関の山かなと。大体私がブログに欲しいのは、写真を載せてそれについて書くパターンと、写真や絵をクリックしたら飛んでくれるパターンと、リンクを文字で貼って、クリックしたら飛ぶパターンの3つだったので。
文字でリンクを貼るパターンは前から使えたんですが、画像を貼って飛ぶのが最近出来るようになったんですー。

ミドリのマッキーさんへ

写真を貼って、それについて書くというのは、結構やるのでこういう風に出来るといいな、と思うことってあるかなと。文章が短いと、一度クリアしないと次の写真も回り込んでしまうので、その回避法を発見するのに時間がかかりました。
本気でHTMLとかを勉強すれば、いいのかもと思いつつ、難しそうで手が付けられていないのです。

コメントの投稿

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

Top

HOME

    思ったことを何でも書くゲーマーブログ。リンクはご自由にどうぞ。

    まこ

    Author:まこ
    どこをクリックしても一銭にもならない、ただの主婦の日記帳です。
    ゲーマーで、本好きで、クラフト好きです。

    08 | 2020/09 | 10
    - - 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 - - -

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

    この人とブロともになる