2009年06月19日の記事一覧 - 詳細表示

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 優（ゆう）

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

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

優（ゆう）の良品

過去の投稿日別表示