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

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

全体表示

[ リスト ]

★ このブログをあなたの MY Yahoo! に追加♪

超簡単!!画像の位置変化と色文字の表示方法♪【2】


※以下の説明は全て記事作成時に「Wiki文法使用」にチェック入れて書いて下さい

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


文字の間に画像を入れる方法

例1  記事中の任意の場所に投稿した画像を配置する方法

■ 「新規投稿」で記事に画像を投稿する方法♪ ■

「新規投稿」で記事に複数の画像を投稿する場合は記事入力画面の下の 「画像添付」欄

『複数の画像をアップロード』 を投稿枚数分押して、

参照 をクリックし、パソコン内から画像を選んで下さい。

■記事に3枚の画像をアップロード(投稿)する場合■


■書式■

上です
[[attached(1)]]
中です
[[attached(2)]]
下です
[[attached(3)]]

※カッコ内の数字は半角にして下さい

表示例1

上です
(1番目の画像)
中です
(2番目の画像)
下です
(3番目の画像)

と表示されるようになります。


例2 文章と文章の間に画像を入れる

■書式■

あいう[[attached(1)]]えお[[attached(2)]]かきく

表示例2



あいう (1番目の画像) えお (2番目の画像) かきく


という順番で文字と画像が表示出来ます。

例3 [[attached( )]] を使った画像位置変化

■書式■

[[attached(1,left)]]  → 意味:1番目の画像を左寄せ
[[attached(2,center)]] → 意味:2番目の画像をセンターリング
[[attached(3,right)]]  → 意味:3番目の画像を右寄せ

※ソース内容について
[[attached(画像の番号,場所)]] という意味です
※カッコ内の数字は半角に

表示例3

1番目の画像

                         2番目の画像


                                                         3番目の画像

■ Wiki文法で文字の大きさと色をつける方法


■ご注意■ この方法では色文字は1行ごとでしか書けません。また行間も大きくなります。

■追記・ご注意■
2007.05.22 に行なわれた、Yahooブログの仕様変更により
Wiki文法で文字を大きくする方法が一部反映しないようになってしまいました


大きく

|<#FFFFFF'style='font-size:40pt;font-weight:bold;color:blue'``大きく||

※以前のタグでは反映しませんのでご注意


カラーネームの使用法

上の文字の色や下の線の色の指定方法ですが、カラーの指定の方法に2種類あります。
文字の所の color:blueという指定方法と、線の所の #0000FFは同じ色の指定です

#0000FF という表記は16進数といいます 


||<#FFFFFF'style='font-size: 40pt;color:#FF0000'``色の指定||

色の指定


カラーネームについては
色見本のサイト をご利用下さい


カラーのラインの記述方法

青線
||<#0000FF' style=width:560px;` `||

赤線
||<#FF0000' style=width:560px;` `||

※テーブル枠の色を変更する方法です。

青線
赤線

画像のサイズを大きく(小さく)表示させる方法


では次に画像サイズを元の画像よりも大きく表示させたり小さく表示させる方法を紹介します

これはサイズ指定をせずに、元のサイズのままでの表示です
横240ピクセル高さ320ピクセル この画像サイズは 横 240 高さ 320(ピクセル)です

ソースは
[[img(http://〜〜.jpg)]]
と入力します。(gif画像またはpng画像も可)

全く同じ画像を半分の大きさで表示します 横 120 高さ 160 となります
横120高さ160
この場合は
[[img(http://〜〜.jpg,120,160)]]
と、画像のURLの後に ,(カンマ)を入れて 画像URL , 横幅 , 高さ と入力すれば、
元の画像サイズではなく、指定された数値のサイズで表示されます。

alt属性(マウスONで表示される言葉)を入れる場合は

[[img(http://〜〜.jpg,120,160,alt文)]]

このようにして「alt文」の位置に言葉を入れて下さい。



画像サイズ・ファイルサイズ縮小の例

■サイズは元画像が 約78KB あるのに対しこれはわずか 18.5KB です■

https://blogs.yahoo.co.jp/IMG/ybi/1/a3/73/uragoe_2ch/folder/180830/img_180830_15532661_2?20051107161442.jpg

■画像の大きさを少し縮小し、サイズも 9.7KB に抑えてみました■

https://blogs.yahoo.co.jp/IMG/ybi/1/a3/73/uragoe_2ch/folder/180830/img_180830_15532661_3?20051107161442.jpg

■ 画像のファイルサイズを小さくしましょう
★いずれも → 超簡単!!大きな写真は縮小しよう♪ の記事の BTJ32 という無料ソフトで
ファイルサイズ縮小・画像サイズ変更したものです。


■ 画像についてのまとめ記事 はコチラです
■ 超簡単!!画像・写真の投稿方法♪


★ ブログ初心者の皆様はまずコチラをよく読んで下さいね★



YTO YTT S2 CYOKANTAN chokantan gazo gazouichi mojiiro moji iro ichi 2007N 0279


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

以下のリンクは1日1度だけクリックして開いてもらえれば嬉しいです♪
ブログランキング にほんブログ村






★記事作成元★


超簡単!!画像の位置変化と色文字の表示方法♪【2】
記事作成日 : 2007.03.26
最終更新日 : 2009.10.15

閉じる コメント(316)

顔アイコン

ほうほう@
なんか、できるきがします@

ともろくいいですか??

2009/11/1(日) 午後 9:06 [ ぼぶ ]

顔アイコン

とても参考になりましたァ!!!!
ありがとゥございますっ!!!!感謝してますっ><
文字を小さくするやり方とヵまったく分からなかったので。。。
やっとつかえるようになりましたァ!!!
また、ちょくちょくここに来て分からないことがあったら
参考にさせていただいてもよろしいでしょうか??

けさくポチですっ♪

2009/11/15(日) 午後 3:38 [ - ]

顔アイコン

とてもありがたい記事です!!!
けさくぽち!
あと転載していいですか?

2009/11/25(水) 午後 8:30 呂李 仮閉鎖 メッセ×

顔アイコン

転載します

2009/11/25(水) 午後 9:11 相楽@復活

参考になりました。ありがとうございます(^^)
ファンポチさせて頂きますね。ポチ☆彡

2009/12/3(木) 午後 6:08 星奈☆彡

顔アイコン

はじめまして。
内容が非常に参考になりました。
ファンポチさせてくださいね。
ポチ

2009/12/23(水) 午前 8:02 [ テンテン ]

顔アイコン

はじめまして。
色とか画像の位置変化が全然分からなくて、とても参考になりました!
けさくポチです^^
あと転載してもいいでしょうか?

2009/12/25(金) 午前 11:21 [ 5 ]

アバター

まゆさん : はい、いいですよ。
・・・というか、「転載してもいいでしょうか?」と
質問形式で聞かれてしまうと、こちらとしては
「返事をしてあげなければ、相手は返答を待ってるかもしれない」
っていうプレッシャーがかかってしまいますので
(平たく言うと、いちいち返事をしなきゃならない事になるので)
今後転載したい記事があった場合は
「転載させて戴きました」などというように、転載後に
報告する形で書いていただければありがたいです。

2009/12/25(金) 午後 0:44 OYAJI

顔アイコン

転載しますp

2010/1/10(日) 午前 11:14 瑞穂#°≪フリーバトンメッセ×≫放置中

顔アイコン

転載します@

2010/1/10(日) 午前 11:15 瑞穂#°≪フリーバトンメッセ×≫放置中

画像のアップについて、記事を参考にさせていただきました。
ありがとうございました!!
10の法則も拝見させていただき、勉強になり
また共感いたしました☆
これからもいろいろと勉強させて下さい!!

ファンぽちさせていただきます!!

2010/1/27(水) 午前 1:21 [ キキ ]

顔アイコン

参考になりました!

傑作させていただきますね♪

2010/2/27(土) 午前 9:39 ちょこ@人見知り卒業(予定)

分かりやすいです 有難うございます
転載させていただきます ♪

2010/3/9(火) 午後 11:50 はまとら

参考になりました〜
これからもよろしくお願いします〜♥
wぽちっ★

2010/3/17(水) 午後 0:59 ここりん

色々試してみましたら カラー文字入りました。

有難うございました★
m(__)m

2010/4/26(月) 午後 11:52 [ yu ]

顔アイコン

突然すみません。質問です。
今日,ちゃんとWiki文法にチェックも入れて「[[attached(1,center)]]」で画像を入れてみたのですが,確認画面で試しに見てみても「[[attached(1,center)]]」としか表示されません。
新機能になって,Wiki、HTMLモードでの画像表示は出来なくなってしまったのでしょうか?
ちなみに,かんたんモードでもやってみたのですが,「容量は1MBまで」のようなウィンドウが出てきます。画像は0.99MBだったのに……。

2010/5/1(土) 午後 5:36 紅楽@仙台

アバター

aka_5828さん : おそらく画像容量計算の誤差によるものだと
思いますので、その画像をもうちょっと小さいサイズに縮小すれば
アップ出来ると思いますよ。
参考
http://www.first-pclife.com/pcbenri/datatani.html

2010/5/1(土) 午後 7:47 OYAJI

顔アイコン

ありがとうございます!
試してみますね♪

2010/5/1(土) 午後 8:28 紅楽@仙台

顔アイコン

ブログ初心者です。HTMLが少し理解できたとおもったら、今度はWIKI?なんじゃそれ。→そういう訳でのぞかせてもらいました。自分のブログに利用させていただきます。
参考になりました。ありがとうございます。

2010/5/24(月) 午後 1:41 [ K ]

顔アイコン

参考にさせてもらいました!

ありがとうございます!

2011/10/1(土) 午後 4:12 [ だるま ]

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


.


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

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

みんなの更新記事