ホームページ制作、千太の絵空事

時に勝つ!投稿できることに感謝しています。(千太) SINCE 2005

全体表示

[ リスト ]

文字列と同様に配列しイメージを挿入(Level2)


文字列と同様に、配列でき、イメージを記事内で表示する方法について語ります、

  • [URLを直で表示]
  • [文字列と同様に配列]
  • [連続しての表示]
  • [ALT属性を入れて表示]

URLを直で表示

http://〜で始まるURLを記入するとリンクが自動で生成されますが、
新規投稿>記事作成ページで、wiki文法使用にチェックを入れると
このURLがイメージの場合、簡単にイメージを記事内で表示させることができます

  • wikiでの表記
    http://〜.jpg
    
※URLの直後は「半角のスペース」を必ずいれてください。
  • 見え方

https://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpg


  • 実際のHTMLのソース(一部、編集してわかりやすいようにしています)
    <a href="http://〜.jpg" target=_blank>
    <img src="http://〜.jpg" alt="http://〜.jpg" border=0>
    </a>
    
※ALT属性についてはURLが入ってしまいます。
※画像添付でアップロードしたイメージを流用する場合は、
URLをそのままでは只のリンクだけになってしまいます。
拡張子、(例えば、.jpgや.gifというイメージの拡張子)を文字列の最後に補完する必要があります。

文字列と同様に配列

HTMLのソースを見ればわかりますが、イメージはインライン要素として、a要素に内包されています。
ですから、文字列と同様に配列することができます。

  • wikiでの表記
    テキストhttp://〜.jpg http://〜.jpg テキスト
    
※URLの直後は「半角のスペース」を必ずいれてください。
  • 見え方

テキストhttps://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpg https://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpg テキスト

※イメージのあとに半角のスペースがありますね。

連続しての表示


  • wikiでの表記
    テキスト[http://〜.jpg][http://〜.jpg]テキスト
    
※URLの直後や、]の直後でも「半角のスペース」はこの場合必要ありません。
  • 見え方
テキストhttps://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpghttps://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpgテキスト
ですから、イメージを横にくっ付けて表示できます。改行すれば

  • wikiでの表記
    テキスト[http://〜.jpg][http://〜.jpg]テキスト
    テキスト[http://〜.jpg][http://〜.jpg]テキスト
    
※URLの直後や、]の直後でも「半角のスペース」はこの場合必要ありません。
  • 見え方
テキストhttps://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpghttps://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpgテキスト
テキストhttps://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpghttps://blogs.yahoo.co.jp/IMG/ybi/1/5c/68/cen_picture21/home/cen_picture21_thumb?1108787261.jpgテキスト

ALT属性を入れて表示


  • wikiでの表記
    [http://〜.jpg ALT属性] 
    
※URLの直後は「半角のスペース」を必ずいれてください。
(テキストリンクと似ていますね)

  • 例えば
    [http://〜.jpg テキスト] 
    
  • 見え方

テキスト

※マウスでイメージの上に移動させて、しばらくするとテキストがポップアップし、ALT属性でテキストが入っている事が確認できます。


  • 実際のHTMLのソース(一部、編集してわかりやすいようにしています)
    <a href="http://〜.jpg" target=_blank>
    <img src="http://〜.jpg" alt="テキスト" border=0>
    </a>
    

もちろん、上記のように文字列と同様に連続して配列できます

  • 見え方

テキストテキストテキストテキスト
テキストテキストテキストテキスト

※ブロック要素としてのイメージは高さや、幅が指定でき、ALT属性も入れることができます。
テキスト
wikiでの表記2Level2





尚、記事編集において、
ブログの種」(旧WebSite制作奮闘記)
mugiさんの
挿入画像の前後にテキスト
をヒントにさせて頂きました。ありがとうございました。


その他のヒント
記事に簡単に画像を入れたい文中にイメージを入れたい「雑誌のようにイメージを入れたい(回り込み)」イメージの貼り付けの秘密

閉じる コメント(6)

顔アイコン

おお、こういう表記の仕方もできるのですね。勉強になります。早速取り入れてみます。ありがとう。

2005/4/13(水) 午後 4:17 [ otheR wind ]

顔アイコン

other_windさん、良かった!。訪問して頂、助かりました。(汗)。この手法、検証して確認し記事にするのに、かなり、時間が立ち過ぎたので、、、。コメント、ありがとうございました!。

2005/4/13(水) 午後 5:12 *************

顔アイコン

千太さん、この頁の最後にあるイメージの縮小についてなのですけれど、[http://〜.jpg] という簡単な表記で縮小できるのでしょうか。縮小されたイメージを横並びできるのでしょうか。またまたよろしくお願いします。

2005/4/15(金) 午前 10:59 [ otheR wind ]

顔アイコン

other_windさん こんにちは!。あー、やはり、紛らわしいですねー。現時点では、その表記では、幅、や高さの指定はできないと認識してます。 できるのは、ご存知の[[img()]]での表記です。 (記事に、まとめて、わかりやすくできるといいのですが、、、)

2005/4/15(金) 午後 2:37 *************

顔アイコン

やはりできませんか。何度も試してみたのですができなかったもので。千太さん、ありがとうございます。

2005/4/16(土) 午後 2:40 [ otheR wind ]

顔アイコン

こんにちは!。あれから、記事を作ってたのですが・・・・http://blogs.yahoo.co.jp/cen_picture21/1560089.html んーん、まだ、うまく、まとまっていませんね。コメント、ありがとうございました。

2005/4/17(日) 午前 7:23 *************


.
*************
*************
非公開 / 非公開
人気度
Yahoo!ブログヘルプ - ブログ人気度について
検索 検索

過去の記事一覧

ブログバナー

友だち(1)
  • ペーパーキャプテン・りヴぁ
友だち一覧

Yahoo!からのお知らせ

よしもとブログランキング

もっと見る

[PR]お得情報

CMで話題のふるさと納税サイトさとふる
毎日お礼品ランキング更新中!
2019年のふるさと納税は≪12/31まで≫
数量限定!イオンおまとめ企画
「無料お試しクーポン」か
「値引きクーポン」が必ず当たる!

その他のキャンペーン


プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事