ここから本文です
☆ Kiyo blog ☆
歩いているよ。

書庫★グラデーション帯★

転載をされる方は必ずコメントを残していってください

記事検索
検索

全1ページ

[1]

横グラデーション帯（3）　〜夏色カラー〜

前に作った横グラデーション帯が好評でしたので、色違いをまた作ってみました。
今度は夏らしくクリアなカラーにしてみました。

��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪

��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#FF95AF,endcolorstr=#CA95FF,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#E895FF,endcolorstr=#809FFF,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#B395FF,endcolorstr=#95FFFF,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#55D9FF,endcolorstr=#55FF80,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#55FFD5,endcolorstr=#D5FF55,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#BFFF80,endcolorstr=#FFD555,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#FFFF55,endcolorstr=#FF9595,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||

◆カラーチャートいろいろ
カラーチャート��(寒色系)　　　カラーチャート��(暖色系)　　　　カラーネーム　超ペールカラー☆

　　◆色指定には、カラーコード、カラーネームどちらも使用できます。

　　◆緑枠内のコードをそのままコピー＆ペーストして使えます。

　　◆『Wiki文法を使用』に必ずチェックを入れてください。


★★★お持ち帰りは右下の転載ボタンからどうぞ★★★　★★★転載される方はコメント残していってくださいね（＾-＾）/★★★

　制作元
☆Kiyo blog☆

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

縦グラデーション帯で見出しを作る

こちらは記事「未来講師めぐる」最終回！★１００％ユーキっす！★
で使用した縦グラデーション帯です。
グラデーション帯の中に色文字をセンター配置に、そして枠付きです。
文字は太字。大きさは11ptです。

★「未来講師めぐる」ついに最終回〜★

↓コードはこちら
||<#ffffff' style='width:540px;font-size:11pt;color:darkorange;text-align:center;border-style:solid;border-color:orange;border-width:2px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#ffcccc,endcolorstr=#ffffcc,gradienttype=0);``'''★「未来講師めぐる」ついに最終回〜★'''||

同色系で色違いを作ってみました。
エンドカラーは全て同じ色にしています。

��
★Kiyo blog★　縦グラデーション帯♪
��
★Kiyo blog★　縦グラデーション帯♪
��
★Kiyo blog★　縦グラデーション帯♪
��
★Kiyo blog★　縦グラデーション帯♪


文字サイズを変えると、帯の幅も変わります。（文字サイズ14pt）
��
★Kiyo blog★　縦グラデーション帯♪
��
★Kiyo blog★　縦グラデーション帯♪

��
||<#ffffff' style='width:540px;font-size:11pt;color:OrangeRed;text-align:center;border-style:solid;border-color:Salmon;border-width:2px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#FFBFBF,endcolorstr=#FFFFD5,gradienttype=0);``'''★Kiyo blog★　縦グラデーション帯♪'''||
��
||<#ffffff' style='width:540px;font-size:11pt;color:#FF55D5;text-align:center;border-style:solid;border-color:#FF95E4;border-width:2px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=Pink,endcolorstr=#FFFFD5,gradienttype=0);``'''★Kiyo blog★　縦グラデーション帯♪'''||
��
||<#ffffff' style='width:540px;font-size:11pt;color:MediumPurple;text-align:center;border-style:solid;border-color:#CA95FF;border-width:2px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#D1BFFF,endcolorstr=#FFFFD5,gradienttype=0);``'''★Kiyo blog★　縦グラデーション帯♪'''||
��
||<#ffffff' style='width:540px;font-size:11pt;color:#2b60ff;text-align:center;border-style:solid;border-color:#5580FF;border-width:2px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=Powderblue,endcolorstr=#FFFFD5,gradienttype=0);``'''★Kiyo blog★　縦グラデーション帯♪'''||

�ァ　　　　　　　　　　　　　　　　　　　、�文字サイズの指定
||<#ffffff' style='width:540px;font-size:14pt;color:#00B6EA;text-align:center;border-style:solid;border-color:#00C6FF;border-width:2px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=Paleturquoise,endcolorstr=#FFFFD5,gradienttype=0);``'''★Kiyo blog★　縦グラデーション帯♪'''||
��
||<#ffffff' style='width:540px;font-size:14pt;color:#00D535;text-align:center;border-style:solid;border-color:#00EA3A;border-width:2px;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#D5FF55,endcolorstr=#FFFFD5,gradienttype=0);``'''★Kiyo blog★　縦グラデーション帯♪'''||

カラーチャートから色を選んで変えることもできます。

◆カラーチャートいろいろ
カラーチャート��(寒色系)　　　カラーチャート��(暖色系)　　　　カラーネーム　超ペールカラー☆

　　◆色指定にはカラーネームとカラーコードどちらも使用できます。

　　◆緑枠内のコードをそのままコピー＆ペーストして使えます。

　　◆『Wiki文法を使用』に必ずチェックを入れてください。


★★★お持ち帰りは右下の転載ボタンからどうぞ★★★　★★★転載される方はコメント残していってくださいね（＾-＾）/★★★

　制作元
☆Kiyo blog☆

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

横グラデーション帯で見出しを作る（２）

前回作った横グラデーション帯の続きです。
文字制限で書ききれなかったの（＾＾；）

今度は文字を左寄せにしましたよ。
それに合わせたグラデーションの色合いにしてあります。春らしい色で作ってみました。（文字サイズ14Pt）

��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪


エンドカラーは文字が乗らないので薄い色にしています。
でもポイントになる色を持ってくるとちょっと面白いでしょ？
↓こちらがコードです。
��
||<#ffffff' style='width:540px;font-size:14pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=hotpink,endcolorstr=azure,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;font-size:14pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=lightsalmon,endcolorstr=mintcream,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;font-size:14pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=plum,endcolorstr=lightgoldenrodyellow,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;font-size:14pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=deepskyblue,endcolorstr=lemonchiffon,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;font-size:14pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=mediumaquamarine,endcolorstr=lavenderblush,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;font-size:14pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=yellowgreen,endcolorstr=lavenderblush,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
緑色の部分が色指定です。自分の好きな色に変えて作ってみてね。
startcolorstr（左）=hotpink,　endcolorstr（右）=azure


カラーチャートはこちらを参考にしてください。

カラーチャート��(寒色系)　　　カラーチャート��(暖色系)　　　　カラーネーム　超ペールカラー☆

　　◆色指定にはカラーネームとカラーコードどちらも使用できます。

　　◆緑枠内のコードをそのままコピー＆ペーストして使えます。

　　◆『Wiki文法を使用』に必ずチェックを入れてください。


★★★お持ち帰りは右下の転載ボタンからどうぞ★★★　★★★転載される方はコメント残していってくださいね（＾-＾）/★★★

　制作元
☆Kiyo blog☆

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

横グラデーション帯で見出しを作る（１）

前に書いた記事 クイズ「自由記入de多数決！」で使用したグラデーション帯です。

★　結果発表〜〜〜！！　★

||<#ffffff' style='width:540px;text-align:center;font-size:20pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#00C6FF,endcolorstr=#00D535,gradienttype=1)'``★　結果発表〜〜〜！！　★||
緑色の部分を変えることができます。
文字サイズ　　font-size:20pt; 　　　　　　　　　　　　　　　　　　　
フォント　　　font-family:HG創英角ﾎﾟｯﾌﾟ体;
スタートカラー（左側）とエンドカラー（右側）　startcolorstr=#00C6FF,endcolorstr=#00D535,　


色違いを作ってみました。（文字サイズ16Pt）
なるべくきれいに見えるやさしい色合いで作りました。
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪
��
☆Kiyo blog☆Wikiのお勉強♪

��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=orange,endcolorstr=lightpink,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=palevioletred,endcolorstr=palegoldenrod,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=salmon,endcolorstr=mediumpurple,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=mediumaquamarine,endcolorstr=lightsteelblue,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=turquoise,endcolorstr=royalblue,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=orchid,endcolorstr=mediumturquoise,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||
��
||<#ffffff' style='width:540px;text-align:center;font-size:16pt;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ffffff;filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=dodgerblue,endcolorstr=plum,gradienttype=1)'``☆Kiyo blog☆Wikiのお勉強♪||


カラーチャート��(寒色系)　　　　カラーチャート��(暖色系)　　　　カラーネーム　超ペールカラー☆


　　◆色指定にはカラーネームとカラーコードどちらも使用できます。

　　◆緑枠内のコードをそのままコピー＆ペーストして使えます。

　　◆『Wiki文法を使用』に必ずチェックを入れてください。



★★★お持ち帰りは右下の転載ボタンからどうぞ★★★　★★★転載される方はコメント残していってくださいね（＾-＾）/★★★

　制作元
☆Kiyo blog☆

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

全1ページ

[1]

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

アバター
☆ k i y o ☆
非公開 / 非公開
人気度
Yahoo!ブログヘルプ - ブログ人気度について

ブログバナー

検索 検索

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

もっと見る
本文はここまでですこのページの先頭へ

[PR]お得情報

CMで話題のふるさと納税サイトさとふる
毎日お礼品ランキング更新中！
2019年のふるさと納税は≪12／31まで≫

その他のキャンペーン

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