地図の横に文章を入れる方法
- 現在、FC2ブログで地図やストリートビューを埋め込んでいますが、地図の横に解説文を入れたいと思っています。
- 以前には画像に対して解説文を入れる際にはalign属性やbrタグを使用していましたが、グーグルマップではこの方法は通用しないようです。
- 私の知識では、テーブルタグを使用して地図と解説文を並べる方法が考えられますが、他にも地図の横に文章を入れる方法があるのでしょうか？
- ベストアンサー
グーグルマップの横に文章を入れたいです
現在ＦＣ２ブログを作ってるんですが アクセス者に分かり易い様にと思い 埋め込みで地図やストリートビューを入れました これは、旧画面(？)に戻して表示されたタグを 埋め込みに使用した訳ですが その地図の場所に対して、地図の横に解説文等 文章を入れたいと思うんですが その様なタグは無いだろうかと云う質問です ちなみに…もしタグでは無く スタイルシートが有った場合ですが 私のブログではスタイルシートを使用する場合が滅多に無く 以前に特殊な表示を作る為に ここで方法を教えて頂いたんですが もう既に忘れてる位ですから 該当するスタイルシートが有っても 出来ればタグで作りたいんです 尚…私のブログでは画像に対して 横に解説文等を入れる場合は <a href="画像のＵＲＬ" target="_blank"><img src="画像のＵＲＬ" alt="画像のタイトル" border="0" width="画像のサイズ" height="画像のサイズ" align="left"/></a>解説文<br clear="all"> と云う様にalign="leftと<br clear="all">を使用してますが グーグルマップでは、この方法は通用しません そこで、今私の知識で考えられるのが テーブルタグの中に地図のタグと解説文を入れる事位…つまり <table border=0> <tr> <td>地図</td> <td>解説</td> </tr> </table> この位しか分かりません この他で、地図の横に 解説文を入れられるタグは無いでしょうか？ また、御存知なら それを解説してるＨＰ等を御紹介頂いても結構です
- mitsuemon
- お礼率60% (1485/2450)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
結局埋め込みタイプを採用したようですね。 地図の中にテキストを表示しないで、地図の右側にテキストを表示したい。ですね？ align="left"使えますよ。 画像をフレーム（地図）に置き換えれば良いと思います。 地図の下の「大きな地図で見る」は、地図中の「Googleマップで見る」と被るので削除。 例えばこんな感じで。 http://www13.plala.or.jp/torayoshi/googlemap.html
その他の回答 (1)
- goold-man
- ベストアンサー率37% (8365/22183)
参考URLをごらんください。 リンクは404エラーで開かないかも。 「スタート」「プログラム」「アクセサリー」「ペイント」起動（フリーの画像編集ソフトでもよい）し、「表示」「カラーボックス」色指定をする。（文字なら「黒」など） 文字入力は、ツールボックスから「A」アイコンを指定し、マウスで「入力枠」を描き、文字を入力（書式バーでフォント選択） 入力枠は背景白と透明が選択可、入力後、画像をクリックし、焼き付けをする。 （「編集：「元に戻す」でやり直し可能）
お礼
申し訳ありませんが文章を熟読して下さい 画像の中に文章では無く、画像の横に文章です
関連するQ&A
- エキサイトブログで、画像の横に文章を入れるのは？
いつもお世話になっております。 同様の質問を参照にしたのですが、エキサイトブログではうまくいかないので質問させてください。 画像の横に文章を入れるにはどうしたらいいのでしょうか？ 調べたところ… (1)<img src="http://pds.exblog.jp/-------jpg" width="70" height="86" ALIGN=left VSPACE=10 HSPACE=10 > というタグを使う（wとhでわかるように、小さめの写真です。） (2)<table><tr valign=top> <td><img src="画像ファイル名又はURL" border="0" alt="説明"></td> <td> 文 </td></tr></table> というtableタグを使う。 という方法があるようですが、エキサイトブログではどちらもうまくいきません。 親指の爪くらいの大きさの顔写真の横に、挨拶文を数行入れたいのですが、うまくいきません。 エキサイトブログでは、(1)img srcタグも、(2)tableタグも使えないのでしょうか？ お詳しい方、教えてください。。
- 締切済み
- ブログ
- テーブルが横に長くなってしまう
の困ってます width=100%を超えたら折り返してほしいのですが・・・ aaa...aaaが短いときにはいいのですが長いとテーブルが横に長くなります 範囲を超えたら自動的に折り返すようにできないのでしょうか? <table width="100%" border="1"> <tr><td align="center">contents</td></tr> aaa...aaa <tr><td align="left"> </td></tr> </table>
- ベストアンサー
- HTML
- テーブルタグの横のスペース
テーブルを右寄せに置いて、 その横に少しスペースを空けたいのですが… どこにどのタグを入れたらよいでしょうか？ 使用しているタグは <Table Border> <Tr> <Td> 文字</Td> </Tr> </Table> この形の物です。
- 締切済み
- HTML
- テーブルを2つ横に並べる
ホームページ作りに熱中しているのですが、テーブルを2つ横に並べる方法がよくわかりません。どうしても縦に連なってしまいます。 テーブルを横に並べるタグはあるのでしょうか？教えてくださいm(vv)m このテーブルを横に並べたいのですが・・・。 <table style="border:1px solid 色;background-color:white;" cellpadding="5"><tr><td> 文字を入れる </td></tr></table>
- ベストアンサー
- レンタルサーバ・ASP
- TABLE（表）を横に並べたいのですが
こういった表↓（実際はもっと縦が長いです）をhtmlで少し間隔をあけて横に並べて表示したいのですが、どのようにすればいいのでしょうか？可能なのでしょうか？ 宜しくお願い致します。 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#ffffff;text-align:center"><tbody><tr> <td style="border:1px solid #ffcccc" colspan="3">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr></tbody></table>
- ベストアンサー
- HTML
- 楽天ブログ・日記の下に表示のおすすめアイテムって・・・。
ブログ初心者です。 いつかはアフェリエイトまでできると良いな～と思っていますが、まだその前の段階ですでにつまづいております・・・（汗） メインの日記の下に、おすすめアイテムを載せられるように設定したのですが、こちらの画像は私自身で気にいった商品を載せられるのですよね・・・。 （もしかして、楽天の広告ページ？？） 【Recommend Item】ってタイトルに出ています。 今まで、自動的にブログの内容に合うようなアイテムが表示されているような気がしますが、好きな雑貨などを載せたいのですが・・・。 もし自分で出来るならどのように画像を載せればいいのでしょうか？？ たとえばですが、アフェリエイトのやり方のページで出ていたこの商品を載せたい場合、この部分をどこに載せるとブログのおすすめアイテムに載せられるのか教えてください。 すみません・・・。 パソコンが苦手で、↓これも間違っているのかな？と思っています。 <a href="http://***" target="_blank"> .:*:.*.:*:.2本ベルトのフォーマルシューズ .:*:.*.:*:. </a> ************** さらに、画像の載せ方が分からないのですが、こちらのテンプレートを製作した方は全然ブログをされていないようなので、もし、分かる方でいらっしゃったら教えてください！ コチラは、トップやアフェリエイト部分のテンプレートらしいのですが 。 <center><table cellspacing="3" cellpadding="0" width="560"><tr><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像１</td></tr></table></td></tr></table></td><td width="34%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像大２</td></tr></table></td></tr></table></td><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像３</td></tr></table></td></tr></table></td></tr><tr><td colspan="3" align="right"><font style="font-size:10px"> </a></font></td></tr></table></center> 画像１・２・３の部分に、何を入れるとショップの商品とリンクするのでしょうか？？ どうぞ、よろしくお願いいたします。
- ベストアンサー
- ブログ
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- 表を指定した場所で改行する方法
<table border='1' align='left'> <tr><td>テスト</td></tr> </table> まず上記のように表を作ったとします。 これをCGIで追加すると下記のようにHTML上で横方向に自動的に同じ表が作られて表示されます。 <table border='1' align='left'> <tr><td>テスト</td></tr> </table> <table border='1' align='left'> <tr><td>テスト</td></tr> </table> <table border='1' align='left'> <tr><td>テスト</td></tr> </table> <table border='1' align='left'> <tr><td>テスト</td></tr> </table> これを途中で例えば3番目で改行させたい場合はどうすればいいのでしょうか？。 分かりづらいですがよろしくお願いします。
- 締切済み
- CGI
- ｇooブログ 画像の下に余白が空きすぎて困っています・・・
ブログに絵を載せています。その時に使用しているのは以下の様なタグ（？）です。これで画像を掲載して、その下に絵のタイトルを打ち込んみたいのですが、余白が空き過ぎていて気になります。どうしたらよいのでしょうか？style="margin-right:10px;"などで設定しても駄目でした。 <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"><tr> <td align="center" valign="middle"> <A HREF="http://test.png"> <IMG SRC="http://test.png" alt="おめでとう" title="今年もよろしくね"style="border-width:1px;border-style:solid;border-color:#000000"> </a> </td></tr></table> 「あけましておめでとう」 ↑この「あけましておめでとう」というタイトルが画像ともう少しくっついて欲しいのです。もしかして、タグの問題ではなくて、ブログのCSSの設定で直すのでしょうか？よろしくお願いします。
- ベストアンサー
- ブログ
- 横に並べたテーブル
200×200px程度のテーブルを複数（行数や列数はバラバラです）横に並べたいのですが、とりあえず、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ページのタイトル</title> <style type="text/css"> <!-- body{ color:#330000; background-color:#cc3333; } table.a{ background-color:#ffffff; padding:1px; border:1px solid #000000; display:inline; margin:5px; } td.a{ text-align:center; vertical-align:middle; border:1px solid #000000; font-size:small; padding:1px; background-color:#ffffff; } div.center{ text-align:center; } --> </style> </head> <body> <div class="center"> <table class="a"> <tr><td class="a">AAAAAAAAAA</td></tr> <tr><td class="a">AAAAAAAAAA</td></tr> </table> <table class="a"> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> </table> </div> </body> </html> という感じでdisplay:inlineで並べました。 これだとIEでは普通に見えるのですが、Ffだと表示が崩れてしまいました。 どこがいけないのかよくわかりません……。FfやNNでもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。 また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。 よろしくおねがいします。
- ベストアンサー
- HTML
お礼
回答有難う御座います あっ…以前にグーグルマップの埋め込みの質問を投稿した時 アドバイスして頂いた方ですね？ あの時は有難う御座いました 結局埋め込みタイプを使用した…と云うより 御紹介のソフト(？)は現在研究中なんですが どうしても早くアップしたい地図が有った為 今回は埋め込みを使用したと言う訳です(笑) でも…align="left"が使用出来るとは思いませんでした 正確に言うと、以前に使用した事が有ったんですが 使用方法が悪かった様で反映しなかったんです どうも有難う御座いました(笑)