楽しむYahoo!ブログの作り方♪

【祝! 3,150,000 アクセス達成!感謝ヽ(・∀・)ノ】

全体表示

[ リスト ]

超簡単!!画像・ブログパーツの横並び方法


http://oyaji3.com/enews01.swf
         上に表示される記事タイトル ↑ をクリックすると表示された記事が開きます

ブログパーツや画像を、横並び(並列)に配置する方法を解説します。

Wikiテーブルタグを使って画像やブログパーツを横に並べる方法です

■注意点

・記事の横幅は560ピクセルなのでそれぞれのパーツや画像の
 横幅の合計がそれ以内でないと画面レイアウトが崩れます

・縦棒「|」は必ず行の冒頭から記入して下さい。スペース(空白)が入ると
 Wiki枠として反映しません。


★横並び方法

・2列基本形(画像)

||||<#FFFFFF'``||
||[[img(http://〜,横幅,高さ,Alt文)]]
||[[img(http://〜,横幅,高さ,Alt文)]]


・2列基本形(ブログパーツなど)

||||<#FFFFFF'``||
||[[item(http://〜.swf,横幅,高さ)]]
||[[item(http://〜.swf,横幅,高さ)]]


・3列基本形(画像)

||||||<#FFFFFF'``||
||[[img(http://〜,横幅,高さ,Alt文)]]
||[[img(http://〜,横幅,高さ,Alt文)]]
||[[img(http://〜,横幅,高さ,Alt文)]]


・3列基本形(ブログパーツなど)

||||<#FFFFFF'``||
||[[item(http://〜.swf,横幅,高さ)]]
||[[item(http://〜.swf,横幅,高さ)]]
||[[item(http://〜.swf,横幅,高さ)]]


★ポイント★

2列基本形の1行目 ||||<#FFFFFF'``||  ←この縦棒「|」が
4本になっている事に注目して下さい

3列基本形の場合は ||||||<#FFFFFF'``|| ←と6本になっています。

つまり、並列にしない普通のテーブル枠の場合は
||<#FFFFFF'``|| ←と、縦棒2本でいいのですが、

横にならべるために、2つ並べるのなら2本付けたして4本に。
3つ並べるのなら6本にして、次の行にそのアドレスを貼り付けるのです。


・画像の「Alt文」とは、画像の上にマウスカーソルを
 置いた場合に表示される説明文のことです。
 普通に記事に画像を投稿した時は、マウスを画像の上に置くと
 「イメージ1」や「イメージ2」と表示されますが
 それが「Alt文」です



並列の見本(3つ横並びの場合)


★貼り付けタグ

||||||<#FFFFFF'``||
||[[img(画像のアドレス,80,80,Alt文)]]
||[[img(画像のアドレス,80,80,Alt文)]]
||[[img(画像のアドレス,80,80,Alt文)]]


★実例


左側の画像です 真中の画像です 右側の画像です


並列の見本(3つ横並び&タイトル付きの場合1)


★貼り付けタグ

||||||<#FFCFDE'``ここがタイトルだよ♪||
||[[img(画像のアドレス,80,80,Alt文)]]
||[[img(画像のアドレス,80,80,Alt文)]]
||[[img(画像のアドレス,80,80,Alt文)]]


★実例


ここがタイトルだよ♪
左側の画像です 真中の画像です 右側の画像です

並列の見本(3つ横並び&タイトル付きの場合2)


★貼り付けタグ

||||||<#FFFFFF'``||
||<#FFCFDE' style=width:80px;``赤色でぇす
||<#FFCFDE' style=width:80px;``黄色でぇす
||<#FFCFDE' style=width:80px;``青色でぇす
||||||<#FFFFFF'``ここは透明に♪||
||[[img(画像のアドレス,80,80,Alt文)]]
||[[img(画像のアドレス,80,80,Alt文)]]
||[[img(画像のアドレス,80,80,Alt文)]]


★実例

赤色でぇす 黄色でぇす 青色でぇす
ここは透明に
左側の画像です 真中の画像です 右側の画像です



ご協力頂けると励みになります♪

ブログランキング にほんブログ村  ←クリックご協力下さい♪

人気ブログランキングへ  ←クリックご協力下さい♪






【作成元記事】
超簡単!!画像・ブログパーツの横並び方法
記事作成日 : 2006.10.10
最終更新日 : 2007.07.18

閉じる コメント(115)

こんばんわ
ブログで参考にさせて頂きました。
ありがとうございました(・∀・)

2009/4/27(月) 午後 8:17 [ - ]

転載させていただきます^^

2009/5/30(土) 午後 4:11 [ - ]

あの…、3つ横並びでタイトル入りの場合「ここは透明に♪」とあるところ、どうすれば透明になるのでしょうか?

2009/6/7(日) 午後 2:26 [ 慶一郎 ]

アバター

慶一郎さん : ★貼り付けタグのところに書いてあるように

||||||<#FFFFFF'``ここは透明に♪||
この色指定である「#FFFFFF」の部分にカラーコードを指定して
「透明であるかのように見せかけている」のですが、
厳密に言えば「白」のコードとなります。
お使いのブログ背景が白い場合には透明のように見えますが
別のカラーの背景を利用している場合はそのカラーに合わせた
カラーコードを指定して下さい。
厳密に言えば、このタグでは「透明にはなりません」

2009/6/7(日) 午後 5:03 OYAJI

ありがとうございます。

2009/6/8(月) 午後 2:22 [ 慶一郎 ]

こんにちは〜

2並列できました!!
けど、タイトルが上に並べれず、タイトル・パーツ・タイトル・パーツって4並列にしました(笑)

有難うございました。

2009/6/10(水) 午後 1:37 きゃんでぃ

顔アイコン

転載します><

2009/6/23(火) 午前 0:59 あいす

おはようございます^^
並列の知識をイタダキマシタ ありがとうございます
wikiやるようになってから学生の頃プログラミングで挫折したのを思い出しました

2009/7/7(火) 午前 4:13 [ - ]

とても助かりました♪
ブックマーク入れさせて頂きますo(*^_^*)o

2009/8/6(木) 午後 4:03 くの一 蘭々amebaへ移行

顔アイコン

助かります^^

転載させてください。ポチ@

2009/8/25(火) 午後 2:15 ひなた(小町)。

顔アイコン

転載させてください。ポチっ

2009/10/4(日) 午後 2:00 マサ

すごくわかりやすくて勉強になりました^^
ポチ☆

2009/10/12(月) 午前 9:01 ゆみ

アバター

ありがとうございます。
ポチ

2009/11/27(金) 午前 1:01 -

顔アイコン

勉強させて頂きたいので、転載させて下さいね((*´ω`*))ポチ!

2009/11/30(月) 午後 2:57 海月

こんにちは。初めまして。
転写させて頂きます。ポチ♪

2009/12/11(金) 午後 0:45 チャイナ

参考にさせていただきました(。-人-。)

2010/1/2(土) 午後 1:23 [ あんcn ]

いつもどうだったっけなあとそのたびにYahooブログのトップを開いて検索している有様なので、転載させていただきます。ありがとうございました。( ..)φメモメモ

2010/6/11(金) 午後 8:08 Yummy

顔アイコン

こんにちは。
勉強をしにあちこちのページを見に来てます。
この記事転載させてください。
分らないときに検索で調べると最後に分りやすい回答だ!と名前を見るとOYAJIさん。 凄いです、いつもありがとうございます。

2010/7/18(日) 午前 6:01 [ bell ]

顔アイコン

すごくわかりやすくて 助かりました。。

ありがとうございました!

2011/9/30(金) 午後 1:25 [ - ]

顔アイコン

只今 勉強中です
今 色々なページを 拝見しております
簡単モードで 投稿と 思いますが
これも 難しいが 面白そうですね
アッと このページは 初心者の気おつけるべき項目のページから
来ました
勉強させてください
よろしくお願いします

2011/12/21(水) 午後 1:07 siho

開く トラックバック(4)


.


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

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

みんなの更新記事