一枚画像の上に文字を書いて行く場合（１）

　ここに文字を書いて行きます　全角スペースで改行できます　文字のバランスは確認を押して　確かめながら調整してください　画像も入りますよ　↓　

　この様な感じです　マウスのカーソルも変えてありますよ＾＾　記事の上にマウスカーソルを持ってきてみて下さい　

↑
上のwiki文法です
↓
||<#FFFFFF' style='background-image:url(http://img.blogs.yahoo.co.jp/ybi/1/09/8e/koimo98/folder/867378/img_867378_27358537_4?1248018670);width:514px;height:460px;text-align:center;word-spacing:510px;font-size: 10pt;font-weight:bold;color:#950000;font-family:ＭＳ Ｐ明朝;line-height:12pt;background-repeat:no-repeat;cursor:url(http://マウスカーソルのＵＲＬ)'``　ここに文字を書いて行きます　全角スペースで改行できます　文字のバランスは確認を押して　確かめながら調整してください　画像も入りますよ　↓　[[attached(１)]]　この様な感じです　マウスのカーソルも変えてありますよ＾＾　記事の上にマウスカーソルを持ってきてみて下さい　||




少し説明

全角スペースを入れるとそこで改行いたします
半角スペースを入れるとレイアウトが崩れますので絶対に入れないで下さい
又、顔文字や記号等を入れると時としてレイアウトが崩れますので注意が必要です


text-align:center　⇒文字や画像の位置をセンター揃えに指示しています

font-family:ＭＳ Ｐ明朝　⇒文字の書体を指示しています

font-weight:bold　⇒文字の太さを太字に指示しています

color:#950000　⇒文字の色を指示しています

font-size:10pt　⇒文字の大きさを指示しています　通常は８～１０ptぐらいのものでしょうか

width:514px　⇒画像の横幅を入れてやります

height:460px⇒画像の縦幅を入れてやります

background-repeat:no-repeat⇒文字の行数などが増えて画像をはみ出した場合に画像が繰り返さない様に入れてやります。これを入れておかないと画像が繰り返して表示されおかしな物になります

line-height:12pt　⇒文章の行間を指示しています　通常は文字のptと同じぐらいに設定すれば良いかと(px pt em どれでも使えます）

word-spacing:510px　⇒全角スペースで改行できるようにスペースの幅を指示しています

background-image:url(http＆＃58//背景画像のＵＲＬをここに入れます)　修正など更新する度に『http：//』の『：』を『＆＃58』に半角にて書き換えて下さい

cursor:url(http＆＃５８//・・・・マウスカーソルのＵＲＬ)　⇒マウスカーソルの変更をＵＲＬを使って指示しています　これも修正など更新する度に『http：//』の『：』を『＆＃58』に半角にて書き換えて下さい　

wiki文法使用にチェックをお忘れなく(*^^)v

転載元: 勝手気ままなボヤキ部屋

コメント（6）

トラックバック（0）

◆「秘密の書庫」の画像整理

「秘密の書庫」の画像整理

https://blogs.yahoo.co.jp/IMG/ybi/1/50/70/first0813rei/folder/982151/img_982151_15709742_9?1247105526

画像の整理をしようと思ったのですが、仕方を忘れてしまって・・・

なので、記事にしておこうと思いましたが、

どこで教えてもらったのかも、分からなくなっちゃったんです。。。

でも、とても便利だと思うので、紹介しますネ！

https://blogs.yahoo.co.jp/IMG/ybi/1/50/70/first0813rei/folder/982151/img_982151_15709742_8?1247105526

[[attached(１,left)]]
[[attached(２,center)]]
[[attached(３,right)]]
　　　　　　　　　　　　　（　画像番号は、半角文字で…　）

通常、画像を ↑ このようにＵＰすると・・・ ↓ のようになってしまいます。

https://blogs.yahoo.co.jp/IMG/ybi/1/50/70/first0813rei/folder/982151/img_982151_15709946_10?1250005242

https://blogs.yahoo.co.jp/IMG/ybi/1/50/70/first0813rei/folder/982151/img_982151_15709946_9?1250005242

https://blogs.yahoo.co.jp/IMG/ybi/1/50/70/first0813rei/folder/982151/img_982151_15709946_13?1250005242

||||||||          ←　この数は、８本なんですが、４本、６本でも大丈夫そうでした！ 
||[[attached(１)]]
||[[attached(２)]]
||[[attached(３)]]
||||||||
||[[attached(４)]]
||[[attached(５)]]
||[[attached(６)]]
                     　　（　画像番号は、半角文字で…　）

↑ このようにすると・・・ ↓ のように並べることが出来ます。

★ お花の素材は、再配布禁止のため　↓　こちらからどうぞ。。。


	Little Garden

https://blogs.yahoo.co.jp/IMG/ybi/1/50/70/first0813rei/folder/982151/img_982151_15709742_10?1247105526

この記事を投稿した後に、

ｋｏｉｍｏさん

から別なやり方を教えていただきましたので、そちらも紹介しますね！

[[attached(画像番号)]][[attached(画像番号)]][[attached(画像番号)]]
※ 画像番号は半角数字で・・・

単純に、これで出来たんです～

その他に、

||<#ffffff'``||
||[[attached(画像番号)]]
||[[attached(画像番号)]]
||[[attached(画像番号)]]
||<#ffffff'``||
||[[attached(画像番号)]]
||[[attached(画像番号)]]
||[[attached(画像番号)]]

これを使うと、画像の上についている薄い線が無くなって綺麗になります。

皆さん、惑わせてしまって申し訳ありません。。。　m(_ _)m

いろいろ試してみて下さいネ！

コメント（21）

トラックバック（1）

◆画像をポイントすると文字…

　　下のバラの写真に「マウスポインタ」を置いてみて下さい！

　　　普通は「イメージ１」のように表示されますよね～

[[img(　　　画像のＵＲＬ　　　　　,横サイズ,縦サイズ,表示させる文字)]]
　　　　　　　　↓　　　　　　　　　　　↓　↓　　　　↓
[[img(http://img2.blogs.yahoo.co.～～～,140,93,表示させる文字)]]

　　※「 表示させる文字 」以外は、すべて半角英数字で…

↑のようにすると・・・

↓に「マウスポインタ」を置いてみて下さい！

どうですか、ちゃ～んと「花の名前」の文字が出て来ましたか？

写真を『クリック』してみて下さい！

・

変わった花でビックリですよね!!

花の名前は、『時計草』で、『トケイソウ科』だそうです。

　　　写真は、【草花写真館】で見つけてきました。。。


	勝手気ままなボヤキ部屋

コメント（7）

トラックバック（0）

◆隠し文字

　隠し文字って、　今までちょこちょこ見かけてはいたんですが、　難しそうでスルーしていました。　でも、以外に単純。　背景と文字の色を同じにするだけだったんです。　　


	ＴＥＲＥＳＡのＷｉｋｉ文法ブログ

　… 基本ソース …

||<#FFFFFF' style='color:#FFFFFF' ``ここに文字||

↓ ここを ドラッグ して下さい。

こんな感じで、出てきますヨ！

ちょっとアレンジして、遊んでみましょう。

||<#FFFFFF' style='width:300px;border:dotted 8px #FF0000;font-size:20pt;color:#FFFFFF'``'''ここに文字'''||

点線の中を ドラッグ して下さい。

☆ありがとうございます

それでは、ちょっとなぞなぞでも出してみましょうか？

いつも、みんなに踏みつけられている、かわいそうなペットはな～に？


答えは、こちらをドラッグ→	カーペット

||<#FFFFFF' ``||
||<#FFFFFF' style='font-size:13pt;color:#FF0000'``答えは、こちらをドラッグ→
||<#ffe4e1' style='border:double #ff69b4 5px;font-size:14pt;color:#ffe4e1'``'''ここに文字'''
||<#FFFFFF' ``||

コメント（6）

トラックバック（0）

◆字体変更

◆字体変更◆

…基本ソース…
||<#FFFFFF' style='font-family:HG創英角ﾎﾟｯﾌﾟ体;font-size:15pt;color:#FF66FF' ``ＨＧ創英角ポップ体　ならこんな感じ||

…太字にする場合…
||<#FFFFFF' style='font-family:HG創英角ﾎﾟｯﾌﾟ体;font-size:15pt;color:#FF66FF' ``'''ＨＧ創英角ポップ体（太字）ならこんな感じ'''||

＊ 字体は、使用したい字体に変更する。
＊ アルファベット・カタカナは、半角文字で…

ＨＧ創英角ポップ体　ならこんな感じ

ＨＧ創英角ポップ体（太字）ならこんな感じ

ＨＧＰ創英角ポップ体　ならこんな感じ

ＨＧＰ創英角ポップ体（太字）ならこんな感じ

ＨＧ丸ゴシックＭ－ＰＲＯ　ならこんな感じ

ＨＧ丸ゴシックＭ－ＰＲＯ（太字）ならこんな感じ

ＨＧゴシックＥ　ならこんな感じ

ＨＧゴシックＥ（太字）ならこんな感じ

ＨＧ創英角ゴシックＵＢ　ならこんな感じ

ＨＧ創英角ゴシックＵＢ（太字）ならこんな感じ

ＨＧ行書体　ならこんな感じ

ＨＧ行書体（太字）ならこんな感じ

ＨＧ正楷書体－ＰＲＯ　ならこんな感じ

ＨＧ正楷書体－ＰＲＯ（太字）ならこんな感じ

ＭＳ明朝　ならこんな感じ

ＭＳ明朝（太字）ならこんな感じ

ＨＧ教科書体　ならこんな感じ

ＨＧ教科書体（太字）ならこんな感じ

日	月	火	水	木	金	土
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	31

ふわふわ

◆Ｗｉｋｉ文法

一枚画像の上に文字を書いて行く場合（１）

コメント（6）

トラックバック（0）

◆「秘密の書庫」の画像整理

コメント（21）

トラックバック（1）

トラックバックされた記事

◆画像をポイントすると文字…

コメント（7）

トラックバック（0）

◆隠し文字

ちょっとアレンジして、遊んでみましょう。

それでは、ちょっとなぞなぞでも出してみましょうか？

コメント（6）

トラックバック（0）

◆字体変更

コメント（3）

トラックバック（0）

Yahoo!ブログからのお知らせ

最新の記事一覧

最新のコメント

最新のトラックバック

訪問者履歴

ブログリンク

標準グループ

wiki文法

Yahoo!からのお知らせ

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