☆勉強部屋☆

第11回：Wiki エディタ Neo で、高度な Wiki タグの背景を使う♪

WikiエディタNeoとは　初心者でも簡単にWiki文法を使った記事が書けちゃう画期的ソフトです(^^

※ 最新版は、ダウンロード 書庫にあります。

第11回：Wiki エディタ Neo で、高度な Wiki タグの背景を使う (^^

まえがき

『高度な Wiki タグの背景』をちゃんと理解して、使用するのはとても難しいため
今回の記事では、手順のみを解説します。

『高度な Wiki タグの背景』をちゃんと理解したい場合は、下記の記事を参考にしてください。
第８回：高度な Wiki タグの背景を追う♪
第９回：高度な Wiki タグの背景を追う②♪
第10回：高度な Wiki タグの背景を追う③♪

手順１：背景に使用する画像を用意する

① ご自身で作成した画像や著作権フリーの画像を用意する。
② 『用意した画像』を『非公開記事』に添付して、投稿する。

手順２：背景に使用する画像のアドレスと大きさを調べる

③ 下の記事を参考にして画像のアドレスと大きさを調べる。
記事に添付した画像のアドレスを調べるには？

背景に使用する画像：

https://blogs.yahoo.co.jp/IMG/ybi/1/a9/f8/for_you_jpn/folder/1290114/img_1290114_34091233_0

背景に使用する画像のアドレス：
ｈｔｔｐ：//img.blogs.yahoo.co.jp/ybi/1/a9/f8/for_you_jpn/folder/1290114/img_1290114_34091233_0?1252462624

背景に使用する画像の大きさ：
100 × 100 ピクセル

手順３：高度な Wiki タグを作成する

④ 上のように『タグ挿入』ペインの『リセット』ボタンを押す。

⑤ 上のように『文字スタイル』と『境界線スタイル』を閉じる。
⑥ 『余白スタイル』と『背景スタイル』を開く。
※ 各『スタイル』を閉じたり開いたりするには、『スタイル』の前にある『+』または『－』をクリックします。

⑦ 上のように『セルスタイル』の高さに、今回使用する背景画像の高さ 100 と入力する。
⑧ 上のように『余白』に、0 と入力する。

⑨上のように『タグ挿入』ボタンをクリックする。

||<#FFFFFF' style='width:546px;text-align:center;height:100px;vertical-align:middle;padding:0px;background-image:url(http://);' ``　||

※ 上のような Wiki タグが作成されれば、成功です♪

手順４：画像のアドレスを入力する

⑩ 手順２で調べたアドレスを上で作成したタグの background-image:url(http＆＃58;//) の
　　部分にある // の後ろに入力する。
※ 調べたアドレスの先頭にある ｈｔｔｐ:// は入力しないこと。

||<#FFFFFF' style='width:546px;text-align:center;height:100px;vertical-align:middle;padding:0px;background-image:url(http＆＃58;//img.blogs.yahoo.co.jp/ybi/1/a9/f8/for_you_jpn/folder/1290114/img_1290114_34091233_0?1252462624);' ``　||

※ ＆＃は、本来は半角ですが、ここでは説明のため全角になっています。

⑪ 最後に、上で作成したタグの ``　|| の部分にある『全角スペース』の代わりに文章を入力する。

||<#FFFFFF' style='width:546px;text-align:center;height:100px;vertical-align:middle;padding:0px;background-image:url(http＆＃58;//img.blogs.yahoo.co.jp/ybi/1/a9/f8/for_you_jpn/folder/1290114/img_1290114_34091233_0?1252462624);' ``これは、非常に簡単な例です♪||

※ ＆＃は、本来は半角ですが、ここでは説明のため全角になっています。

《下が実際の記事に投稿した場合の例です》

これは、非常に簡単な例です♪

《上が実際の記事に投稿した場合の例です》

あとがき

今回は、非常に簡単な例です。

文章の文字の色や大きさを変えたりする方法については
Wiki エディタ Neo に付属のヘルプを読んでくださいね。
※ Wiki エディタ Neo の右上にある『？』マークをクリックするとヘルプをご覧になれます。

By 優（ゆう）

https://blogs.yahoo.co.jp/IMG/ybi/1/a9/f8/for_you_jpn/home/imgnick?1195791711

コメント（28）

トラックバック（0）

記事に添付した画像のアドレスを調べるには？

WikiエディタNeoとは　初心者でも簡単にWiki文法を使った記事が書けちゃう画期的ソフトです(^^

※ 最新版は、ダウンロード 書庫にあります。

この記事は『第11回：Wiki エディタ Neo で、高度な Wiki タグの背景を使う』の
画像をアップするためのものです。

※ 本来は、『非公開』で投稿するのですが、説明のために『公開』にしています。

←アドレスを調べたい記事に添付した画像

記事に添付した画像のアドレスを調べる

① 調べたい画像の上で、右クリックする。
② 『メニュー』の『プロパティ』をクリックする。
イメージ 2

③ 上のような『プロパティ』ダイアログが表示されたら『アドレス(URL)』を記憶する。
※ 上の例では、『ｈｔｔｐ：//img.blogs.yahoo.co.jp/ybi/1/a9/f8/for_you_jpn/folder/1290114/img_1290114_34091233_0?1252462624』

《アドレスのコピー方法》
④ 上のような『プロパティ』ダイアログが表示されたら『アドレス(URL)』をマウスを使って選択する。
イメージ 3

⑤ 上のように、反転表示された文字列（画像のアドレス）の上で、右クリックする。
⑥ 『メニュー』の『コピー』をクリックする。

記事に添付した画像の大きさを調べる

① 調べたい画像の上で、右クリックする。
② 『メニュー』の『プロパティ』をクリックする。
イメージ 2

③ 上のような『プロパティ』ダイアログが表示されたら『大きさ』を記憶する。
※ 上の例では、『100 × 100 ピクセル』

By 優（ゆう）

第10回：高度な Wiki タグの背景を追う③♪

http://www.geocities.jp/for_you_jpn/banner/wikieditor.png
Wiki エディタ Neo とは、初心者でも簡単にWiki文法を使って、記事が書けるお助けツールです (^^
※ 最新版は、ダウンロード 書庫にあります。

第10回：高度な Wiki タグの背景を追う③ (^^

前回のあらすじ

前回は『高度な Wiki タグの背景を追う②』で、背景について、さらに詳しく追いかけました

https://s.yimg.jp/images/mesg/emoticons/7/26.gif

忘れてしまった方などは↓を読んでください

https://s.yimg.jp/images/mesg/emoticons/7/77.gif

第９回：高度な Wiki タグの背景を追う②♪

で、今回は『高度な Wiki タグの背景を追う③』で、背景の深みへと導きます。

https://s.yimg.jp/images/mesg/emoticons/7/43.gif

まえがき

『高度な Wiki タグの背景』を理解するには、Yahoo! ブログ特有の『コード変換』について
前もって、知っておいて頂かなくてはなりません。

ですから、『コード変換』ってなに

https://s.yimg.jp/images/mesg/emoticons/7/7.gif

という方は、↓の記事を読んでから、本記事を読み進めて頂くことをお勧めいたします。
Wiki エディタ Neo のコード変換機能について♪

では、『究極の背景ワールド』へ出かけましょう♪

https://s.yimg.jp/images/mesg/emoticons/7/36.gif

背景に画像を表示する

使う画像は、↓これ 64×64 の大きさです。

https://s.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif

背景に画像を表示する単純なサンプル♪

||<#FFFFFF' style='background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);height:48px;' ``'''背景に画像を表示する単純なサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

背景の画像を繰り返し表示しないサンプル♪

||<#FFFFFF' style='background-repeat:no-repeat;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);height:48px;'' ``'''背景の画像を繰り返し表示しないサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

例	プロパティ名	値	単位	説明
background-repeat:no-repeat;	background-repeat	no-repeat	なし	繰り返し表示を『しない』に指定

※ 他の値として、repeat-x（横方向のみ繰り返す）・repeat-y（縦方向のみ繰り返す）がある

応用例

◇ 画像を左端に表示し、上下方向中央に文字列を表示する。

余白設定を組み合わせたサンプル♪

||<#FFFFFF' style='padding-left:72px;background-repeat:no-repeat;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);height:48px;' ``'''余白設定を組み合わせたサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

例	プロパティ名	値	単位	説明
padding-left:72px;	padding-left	72	px	左余白を 72(64+8) ドットに指定

※ それ以外の余白は、Yahoo! ブログ標準の 8 ドットのまま

上の『応用例』は、余白を使用しなくても同じようなことは可能です。
が、それは、また次の機会にでも。。。

どうです、面白そうなこと思いつきましたか？

https://s.yimg.jp/images/mesg/emoticons/7/40.gif

では、次へ参りましょう。

画像の位置を変更する

背景の画像を中央に表示するサンプル♪

||<#FFFFFF' style='background-＆＃112;osition:center;background-repeat:no-repeat;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);height:48px;' ``'''背景の画像を中央に表示するサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

例	プロパティ名	値	単位	説明
background-position:center;	background-position	center	なし	画像表示位置を中央に指定

※ position の [ p ] を『コード変換』する必要があります。

応用例

◇ セルの横幅を適当 ( 270 px ) に指定し、画像を右端に表示する。

背景の画像を右端に表示するサンプル♪

||<#FFFFFF' style='width:270px;background-＆＃112;osition:right;background-repeat:no-repeat;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);height:48px;' ``'''背景の画像を右端に表示するサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

『究極の背景ワールド』、お楽しみいただけましたか？
今回も、文字数制限により、残念ながら終了です。

次回をお楽しみに♪

By 優（ゆう）

前回のあらすじ

前回は『高度な Wiki タグの背景を追う①』で、背景について説明しました

忘れてしまった方などは↓を読んでください

第８回：高度な Wiki タグの背景を追う♪

で、今回は『高度な Wiki タグの背景を追う②』で、さらに詳しく追いかけて行きます。

まえがき

『高度な Wiki タグの背景』を理解するには、Yahoo! ブログ特有の『コード変換』について
前もって、知っておいて頂かなくてはなりません。

ですから、『コード変換』ってなに

という方は、↓の記事を読んでから、本記事を読み進めて頂くことをお勧めいたします。
Wiki エディタ Neo のコード変換機能について♪

では、『禁断の背景ワールド』へ出かけましょう♪

背景に画像を表示する

使う画像は、↓これ 64×64 の大きさです。

改行のある文字列の背景に　画像を表示するサンプル♪　by優（ゆう）

||<#FFFFFF' style='word-spacing:537px;font-size:12px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''改行のある文字列の背景に　画像を表示するサンプル♪　by優（ゆう）'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

[ word-spacing ] の値は、↓の記事を読めば分かりますね

https://s.yimg.jp/images/mesg/emoticons/7/68.gif

第７回：高度な Wiki タグの横幅の謎②♪

どうです、改行のある文字列の背景に画像が表示されましたか

でも、このままでは、納得できませんね。

https://s.yimg.jp/images/mesg/emoticons/7/17.gif

セルの高さを背景の画像に合わせる

改行のある文字列でも　セルの高さを背景の画像に合わせたサンプル♪　by優（ゆう）

||<#FFFFFF' style='height:112px;word-spacing:537px;font-size:12px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''改行のある文字列でも　セルの高さを背景の画像に合わせたサンプル♪　by優（ゆう）'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

[ height ] の値は、↓の記事の応用です。
第８回：高度な Wiki タグの背景を追う♪

文字領域の高さ[ height ]＝
画像２個分の高さ－（（上辺＋下辺の境界線の幅）＋（上部＋下部の余白））

文字領域の高さ[ height ]＝64×2－（（0＋0）＋（8＋8））
文字領域の高さ[ height ]＝112

高さについては、マスターできましたよね

https://s.yimg.jp/images/mesg/emoticons/7/65.gif

では、横幅もこの調子でがんばりましょう

https://s.yimg.jp/images/mesg/emoticons/7/39.gif

改行のある文字列でもセルの横幅を画像が途中で切れないように合わせる

改行のある文字列でも　セルの横幅を画像が途中で　切れないように合わせたサンプル♪

||<#FFFFFF' style='width:304px;height:112px;word-spacing:295px;font-size:12px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''改行のある文字列でも　セルの横幅を画像が途中で　切れないように合わせたサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

[ width ] の値は、↓の記事
第６回：高度な Wiki タグの横幅の謎①♪
[ word-spacing ]の値は、↓の記事の応用です。
第７回：高度な Wiki タグの横幅の謎②♪

横幅[ width ]＝画像5個分の幅－（（左辺＋右辺の境界線の幅）＋（左側＋右側の余白））

横幅[ width ]＝64×5－（（0＋0）＋（8＋8））
横幅[ width ]＝304

横幅[ word-spacing ]＝
画像5個分の幅－（文字の高さ×0.75＋（（左辺＋右辺の境界線の幅）＋（左側＋右側の余白）））

横幅[ word-spacing ]＝64×5－（9×0.75＋（0＋0）＋（8＋8））
横幅[ word-spacing ]＝295

上の式、正しくは

横幅[ word-spacing ]＝64×5－（12×0.75＋（0＋0）＋（8＋8））
横幅[ word-spacing ]＝295

です。。。(^^;　[ 2009/06/17 更新 ]

れんれんさん ありがとうございます m(_ _)m

『禁断の背景ワールド』、お楽しみいただけましたか？

https://s.yimg.jp/images/mesg/emoticons/7/66.gif

次回をお楽しみに♪

By 優（ゆう）

前回のあらすじ

前回は『高度な Wiki タグの横幅』に関する二つ目の謎を解き明かしました

忘れてしまった方などは↓を読んでください

第７回：高度な Wiki タグの横幅の謎②♪

で、今回は『高度な Wiki タグの背景』を詳しく追いかけて行きます。

まえがき

『高度な Wiki タグの背景』を理解するには、Yahoo! ブログ特有の『コード変換』について
前もって、知っておいて頂かなくてはなりません。

ですから、『コード変換』ってなに

という方は、↓の記事を読んでから、本記事を読み進めて頂くことをお勧めいたします。
Wiki エディタ Neo のコード変換機能について♪

では、さっそく参りましょう♪

背景に画像を表示する

使う画像は、↓これ 64×64 の大きさです。

文字列の背景に画像を表示する一番単純なサンプル♪

||<#FFFFFF' style='background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''文字列の背景に画像を表示する一番単純なサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

例	プロパティ名	値	単位	説明
background-image:url(アドレス);	background-image	url(アドレス)	なし	背景に画像を指定

※ アドレスは、http: のどれか一文字を『コード変換』する必要があります。

どうです、背景に画像が表示されましたか

でも、このままではしっくりきませんよね。

セルの高さを背景の画像に合わせる

セルの高さを背景の画像に合わせたサンプル♪

||<#FFFFFF' style='height:48px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''セル？の高さを背景の画像に合わせたサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

例	プロパティ名	値	単位	説明
height:48px;	height	48	px	セル？の高さを 48 ドットに指定

あれ、ちょっと待ってください

https://s.yimg.jp/images/mesg/emoticons/7/104.gif

確か、画像の大きさは、64×64 でしたよね？

セルの高さと文字領域の高さ[ height ]の関係

文字領域の高さ[ height ]＝セルの高さ－（（上辺＋下辺の境界線の幅）＋（上部＋下部の余白））

という関係になっています。

これに、先ほどの例を当てはめてみます。

求めたい値は、文字列の高さ[ height ]
セルの高さは、画像の高さである 64
境界線は、指定していませんので 0
余白は、Yahoo! ブログ標準の 8

文字領域の高さ[ height ]＝64－（（0＋0）＋（8＋8））
文字領域の高さ[ height ]＝48

ここまでは、問題ありませんよね

https://s.yimg.jp/images/mesg/emoticons/7/76.gif

では、ついでに横幅も指定してみましょう

セルの横幅[ width ] を画像が途中で切れないように合わせる

セルの横幅を背景の画像に合わせたサンプル♪

||<#FFFFFF' style='width:496px;height:48px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''セルの横幅を背景の画像に合わせたサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

なぜ、横幅[ width ] が 496 なのかは、ご自分で考えてみてください

https://s.yimg.jp/images/mesg/emoticons/7/102.gif

ということで、今回はこれにて終了です

次回をお楽しみに♪

By 優（ゆう）

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

まえがき

手順１：背景に使用する画像を用意する

手順２：背景に使用する画像のアドレスと大きさを調べる

手順３：高度な Wiki タグを作成する

手順４：画像のアドレスを入力する

あとがき

記事に添付した画像のアドレスを調べる

記事に添付した画像の大きさを調べる

前回のあらすじ

まえがき

背景に画像を表示する

応用例

画像の位置を変更する

応用例

前回のあらすじ

まえがき

背景に画像を表示する

セルの高さを背景の画像に合わせる

改行のある文字列でもセルの横幅を画像が途中で切れないように合わせる

前回のあらすじ

まえがき

背景に画像を表示する

セルの高さを背景の画像に合わせる

セルの高さと文字領域の高さ[ height ]の関係

セルの横幅[ width ] を画像が途中で切れないように合わせる

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

最新の記事一覧

最新のコメント

最新のトラックバック

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