J・R・A

☆ 更新は不定期ですが遊びに来てくださいね ☆

WiKi文法 （１１Ｆ）

[ リスト | 詳細 ]

WiKi文法の授業を受けませんか？ファン限定も見てね♪

記事検索
検索

全12ページ

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

[ 前のページ | 次のページ ]

背景をグラデーションにして、文字枠をつける

��solid

グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:solid 
#FF2B60 3px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr
=#FFBF80,endcolorstr=#EA7500,gradienttype=0);' ``グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。||

��dashed

グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:dashed
 #001B6A 3px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorst
r=#2BFFCA,endcolorstr=#007495,gradienttype=0);' ``グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。||

��double

グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:double
 #FF99CC 6px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorst
r=#FF5580,endcolorstr=#FF0039,gradienttype=0);' ``グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。||

��ridge

グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:ridge 
#53006A 3px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr
=#8095D5,endcolorstr=#002BAA,gradienttype=0);' ``グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。||

��dotted

グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:dotted
 #D56A00 6px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorst
r=#BFFF00,endcolorstr=#00AA2B,gradienttype=0);' ``グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。||

��inset

グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。

||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:inset 
#00C6FF 6px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr
=#8455FF,endcolorstr=#740095,gradienttype=0);' ``グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。||

(例）幅(width:400px)と高さ(line-height:40px)を変える

グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。

||<#FFFFFF' style='width:400px;color:white;text-align:center;line-height:40px;border:double
 #FF8000 6px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorst
r=#FF5555,endcolorstr=#BF0000,gradienttype=0);' ``グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。||

＊【gradienttype=0】を【gradienttype=1】に変更すると横のグラデーションになります

　　↓文字色　　　横幅↓(最大560)　　↓文字色　　　　↓文字位置　　↓枠の高さ 　　　↓枠の種類
||<#FFFFFF' style='width:560px;color:white;text-align:center;line-height:20px;border:solid

↓枠の色 ↓枠の太さ
#FF2B60 3px;word-spacing:560px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr

　　↓始まりの色　　　　↓終わりの色　　　 ↓(縦にグラデーション)　　　 　半角スペースで改行↓
=#FFBF80,endcolorstr=#EA7500,gradienttype=0);' グラデーションの中に文字が書けます。 半角スペースを入力すると改行されます。 是非試してください。||

開く トラックバック（0）

画像の投稿 位置 （right center left ）

イメージ 1



イメージ 2




イメージ 3



[[attached(●,left)]]
[[attached(●,center)]]
[[attached(●,right)]]

left→左寄せ　center→センタリング　right→右寄せ

●の数字を変更してください。
例えば3枚投稿するときは1,2,3と数字を変更します。
この方法は自分のPCの中にある画像を投稿する時に、新規投稿で下に画像添付とありますからそこの参照から貼り付けたい画像を選択してください。
画像を添付した順番に1,2,3の数字になります。
文章の途中にも画像を添付出来ますから便利です。
（注）ただし画像の数が多いとブログが重くなります。

開く トラックバック（0）

影を作りましょう

影が出来たよ

背景色↓　　offx=横の影、offy=縦の影のピクセル数                    影の背景色↓
||<#E895FF' style=filter:progid:DXimageTransform.Microsoft.DropShadow(color=#55FFFF,offx=12,off y=12,positive=false); ``影が出来たよ||

真上=45



真上から右45度（右上）に向かって影を伸ばす
||<#FF952B' style=color:#ffffff;font-size:28px;font-family:Impact;position:absolute;filter:progid:DXImageTransform.Microsoft.Shadow(color=#FFFF2B,direction=45,strength=8); ``真上=45||

真上=90



真上から右90度（右）に向かって影を伸ばす
||<#FF952B' style=color:#ffffff;font-size:28px;font-family:Impact;position:absolute;filter:progid:DXImageTransform.Microsoft.Shadow(color=#FFFF2B,direction=90,strength=8); ``真上=90||

真上=180



真上から右180度（下）に向かって影を伸ばす
||<#FF952B' style=color:#ffffff;font-size:28px;font-family:Impact;position:absolute;filter:progid:DXImageTransform.Microsoft.Shadow(color=#FFFF2B,direction=180,strength=8); ``真上=180||

真上=225




真上から右225度（左下）に向かって影を伸ばす
||<#FF952B' style=color:#ffffff;font-size:28px;font-family:Impact;position:absolute;filter:progid:DXImageTransform.Microsoft.Shadow(color=#FFFF2B,direction=225,strength=8); ``真上=225||

真上=270



真上から右270度（左）に向かって影を伸ばす
||<#FF952B' style=color:#ffffff;font-size:28px;font-family:Impact;position:absolute;filter:progid:DXImageTransform.Microsoft.Shadow(color=#FFFF2B,direction=270,strength=8); ``真上=270||

真上=315



真上から右315度（左上）に向かって影を伸ばす
||<#FF952B' style=color:#ffffff;font-size:28px;font-family:Impact;position:absolute;filter:progid:DXImageTransform.Microsoft.Shadow(color=#FFFF2B,direction=315,strength=8); ``真上=315||

開く トラックバック（0）

文字の↓にラインを作成しましょう

アンダーラインの長さは自動的に調整されます

太さは同じでレッドのアンダーラインです

今度はグリーンです

アンダーラインを少し太くしました

もっと太くしてみました

テンテンのアンダーラインです

太くしてみました

もっと太くしてみました

この表示方法は（ｇｒｏｏｖｅ）

この表示方法は（ｒｉｄｇｅ）

この表示方法は（ｉｎｓｅｔ）

この表示方法は（ｏｕｔｓｅｔ）

||<#ffffff' style='border-bottom: 1px blue solid' ``アンダーラインの長さは自動的に調整されます||

||<#ffffff' style='border-bottom: 1px red solid' ``太さは同じでレッドのアンダーラインです||

||<#ffffff' style='border-bottom: 1px green solid' ``今度はグリーンです||

||<#ffffff' style='border-bottom: 3px green solid' ``アンダーラインを少し太くしました||

||<#ffffff' style='border-bottom: 5px green solid' ``もっと太くしてみました||

||<#ffffff' style='border-bottom: 3px magenta dotted' ``テンテンのアンダーラインです||

||<#ffffff' style='border-bottom: 8px magenta dotted' ``太くしてみました||

||<#ffffff' style='border-bottom: 10px magenta dotted' ``もっと太くしてみました||

||<#ffffff' style='border-bottom: 8px red groove' ``この表示方法は（ｇｒｏｏｖｅ）||

||<#ffffff' style='border-bottom: 8px red ridge' ``この表示方法は（ｒｉｄｇｅ）||

||<#ffffff' style='border-bottom: 8px red inset' ``この表示方法は（ｉｎｓｅｔ）||

||<#ffffff' style='border-bottom: 8px red outset' ``この表示方法は（ｏｕｔｓｅｔ）||

開く トラックバック（0）

文字列の位置 （左、中央、右）

☆左に表示☆
☆中央に表示☆
☆右に表示☆

||<#FFFFFF' style='font-size:20pt;width:560px;text-align:left'``☆左に表示☆||
||<#FFFFFF' style='font-size:20pt;width:560px;text-align:center'``☆中央に表示☆||
||<#FFFFFF' style='font-size:20pt;width:560px;text-align:right'``☆右に表示☆||


☆中央に小さく紫色☆ 

||<#FFFFFF'` `||
||<#FFFFFF' style=color:#C600FF;width:560px;text-align:center;``☆中央に小さく紫色☆
||<#FFFFFF'` `||


☆右に大きく赤色☆ 

||<#FFFFFF'` `||
||<#FFFFFF'; style=';color:#FF0000;font:bold 16pt;width:560px;text-align:right;``☆右に大きく赤色☆
||<#FFFFFF'` `||


☆左に書体を変えて大きく青色☆ 

||<#FFFFFF'` `||
||<#FFFFFF' style='font-family:HGP創英角ﾎﾟｯﾌﾟ体 ;font-size:18pt;color:#0040FF;width:560px;text-align:left;``☆左に書体を変えて大きく青色☆
||<#FFFFFF'` `||


■ 解説 ■

||<#FFFFFF' style='text-align:○○○;width:560px' ``文字列||

※ ○○○部分を[left/center/right]を指定して下さい。

開く トラックバック（0）

全12ページ

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

[ 前のページ | 次のページ ]

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

[PR]お得情報

数量限定！イオンおまとめ企画
「無料お試しクーポン」か
「値引きクーポン」が必ず当たる！
ふるさと納税サイト『さとふる』
11／30まで５周年記念キャンペーン中！
Amazonギフト券1000円分当たる！

その他のキャンペーン

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

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

みんなの更新記事
前へ 次へ