★Wiki のお勉強★ - 詳細表示 - ☆ Kiyo blog ☆

ブログ記事の背景に色を付ける方法

今回は、とても便利で簡単なwikiをお教えしますよ～＾＾

ブログ記事の背景に色を付けることが出来ます。
ひとつのwikiで文字や写真をすべて入れられるので、とても便利です。

　ベージュバックに茶色文字。　フォントは10pt、メイリオを使用。　全角スペースを入れると改行します。　

記事富山旅行で使用していますので、参考にしてみてください。
↓こちらがコードです。

||<#F5F5DC'style='width:530px;color:#A7996D;font-size:10pt;font-family:メイリオ;text-align:center;word-spacing:530px;'``　ベージュバックに茶色文字。　フォントは10pt、メイリオを使用。　全角スペースを入れると改行します。　||

文字の最初と最後にも全角スペースを入れると、背景部分に余裕が出ます。

写真も入れてみましょう。
アップロードした写真を[[attached()]]で簡単に入れることができます。

　ベージュバックに茶色文字。　

　フォントは10pt、メイリオを使用。　

　全角スペースを入れると改行します。　

↓コードです。文字と同じように[[attached()]]を入れます。

||<#F5F5DC'style='width:530px;color:#A7996D;font-size:10pt;text-align:center;font-family:メイリオ;word-spacing:530px;'``　ベージュバックに茶色文字。　[[attached(画像番号,center)]]　フォントは10pt、メイリオを使用。　[[attached(画像番号,center)]]　全角スペースを入れると改行します。　||

このようにして、写真を複数載せることが出来ます。
[[attached()]]の前後にもスペースを入れています。

文字を左寄せにして、色を変えてみましょう

　ピンクバックに赤色文字　フォントは9pt、メイリオを使用　記事「餅文春の限定スイーツ」で使用　

↓コードです。

　　↓背景色　　　　　　　　　　　　↓文字色　　　　　　　　↓文字サイズ　　↓フォント
||<#FFF0F5'style='width:530px;color:palevioletred;font-size:9pt;font-family:メイリオ;word-spacing:530px;'``　ピンクバックに赤色文字　フォントは9pt、メイリオを使用　 記事「餅文春の限定スイーツ」で使用　||

背景色、文字色、文字サイズ、フォントはお好みで変えることができます。
いろんな組み合わせを作って楽しんでみてくださいね＾＾

私の記事で使用しています。参考にしてみてください。
餅文　春の限定スイーツ
ごまめ家らーめん【うま塩】
富山旅行　その①【雪の合掌集落】
「空」2/21しましまピンク

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

◆フォントいろいろ
★いろんなフォント★【ポップ文字】　　★いろんなフォント★【和風文字】

　　◆文字色指定にはカラーネームとカラーコードどちらも使用できますが、
　　　背景色指定にはカラーコードしか使えません。

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

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

★★★参考になったら、傑作ポチっとしてくれると嬉しいです（＾-＾）★★★

　制作元

☆Kiyo blog☆

【追記】
カメも見つめる藤の花でも使用しました。
参考にしてください。

コメント（34）

トラックバック（0）

帯の中に影付き文字を入れる

■帯の中に影付き文字を入れる

こちらはＫｉｙｏｂｌｏｇの記事で使用したものです。
①

★ｋｉｙｏｂｌｏｇ★　帯の中に影付き文字

文字はセンター合わせになります。
見本は太字になっています。17pt以上でより太くなるので、文字サイズを大きくする場合や、
他のフォントを使う場合は「'''」をとって調整してください。
見本①のコードはこちらです↓

||<#ffccff' style='solid;border-color:#cc00ff;border-width:3px;width:540px;text-align:center;font-size:16pt;filter:Blur(strength=8,direction=60);color:#2B60FF;``'''★ｋｉｙｏ ｂｌｏｇ★　帯の中に影付き文字'''||

他にも色を変えて使用していますので紹介します。

②色を変えます

★ｋｉｙｏｂｌｏｇ★　帯の中に影付き文字

③文字サイズを小さくすると、帯の幅も狭くなります

★ｋｉｙｏｂｌｏｇ★　帯の中に影付き文字

④文字サイズを大きくして、枠も太くします（文字は細字です）

★ｋｉｙｏｂｌｏｇ★　帯の中に影付き文字

緑色の部分をかえて、いろんな組み合わせが出来ます。
||<#809FFF'＝帯の色　border-color:#2B60FF;＝枠の色　color:#FFFF00;＝文字の色
border-width:5px;＝枠の太さ

②
||<#809FFF' style='solid;border-color:#2B60FF;border-width:3px;width:540px;text-align:center;font-size:16pt;filter:Blur(strength=8,direction=60);color:#FFFF00;``'''★ｋｉｙｏ ｂｌｏｇ★　帯の中に影付き文字'''||
③
||<#BFFFFF' style='solid;border-color:#2B60FF;border-width:3px;width:540px;text-align:center;font-size:11pt;filter:Blur(strength=8,direction=60);color:#FF2BCA;``'''★ｋｉｙｏ ｂｌｏｇ★　帯の中に影付き文字'''||
④
||<#FFE495' style='solid;border-color:#35509F;border-width:5px;width:540px;text-align:center;font-size:20pt;filter:Blur(strength=15,direction=60);color:#800020;``★ｋｉｙｏ ｂｌｏｇ★　帯の中に影付き文字||

新しく同系色で作ってみました。（文字サイズは16pt　枠の太さは4px）
⑤

★ｋｉｙｏｂｌｏｇ★　帯の中に影付き文字

⑥

★ｋｉｙｏｂｌｏｇ★　帯の中に影付き文字

⑦

★ｋｉｙｏｂｌｏｇ★　帯の中に影付き文字

⑧

★ｋｉｙｏｂｌｏｇ★　帯の中に影付き文字

⑤
||<#FFE4E1' style='solid;border-color:#DB7093;border-width:4px;width:540px;text-align:center;font-size:16pt;filter:Blur(strength=8,direction=60);color:#DC143C;``'''★ｋｉｙｏ ｂｌｏｇ★　帯の中に影付き文字'''||
⑥
||<#FFFACD' style='solid;border-color:#9ACD32;border-width:4px;width:540px;text-align:center;font-size:16pt;filter:Blur(strength=8,direction=60);color:#FF8C00;``'''★ｋｉｙｏ ｂｌｏｇ★　帯の中に影付き文字'''||
⑦
||<#E0FFFF' style='solid;border-color:#66CDAA;border-width:4px;width:540px;text-align:center;font-size:16pt;filter:Blur(strength=8,direction=60);color:#008080;``'''★ｋｉｙｏ ｂｌｏｇ★　帯の中に影付き文字'''||
⑧
||<#E6E6FA' style='solid;border-color:#DA70D6;border-width:4px;width:540px;text-align:center;font-size:16pt;filter:Blur(strength=8,direction=60);color:#9932CC;``'''★ｋｉｙｏ ｂｌｏｇ★　帯の中に影付き文字'''||

こちらの記事で使用しています。

①岡田ジャパン　初戦はスコアレスドロー
②岡田ジャパン初勝利　３－０ボスニア戦
③岡田ジャパン、Ｗ杯予選白星スタート
④大相撲　千秋楽　白鵬優勝

文字の色はカラーチャートⅠとⅡから選んでいます。

カラーチャートⅠ(寒色系)　　　　
カラーチャートⅡ(暖色系)

　　◆文字をお好みの色や大きさに変えられます。
　　　color:#2B60FF＝文字の色　　font-size:16pt＝文字の大きさ

　　◆文字を左寄せにしたい場合は、「text-align:center;」の部分を取って使用できます。

　　◆緑枠内のコードをそのままコピー＆ペーストして使えます。
　　　『Wiki文法を使用』に必ずチェックを入れてください。

バリスタさんの記事を参考にさせていただきました。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

☆お持ち帰りは右下の転載ボタンからどうぞ☆

☆転載される方はコメント残していってくださいね（＾-＾）/☆

　制作元

☆ Kiyo blog ☆

コメント（20）

トラックバック（0）

いろんなフォントで　★一色グラデーション文字★

■一色グラデーション文字

今、kiyoのゲスブで使用しているグラデーション文字です。
文字サイズは26p　文字色はhotpink　
フォントはMystical（英文用）です。

☆ Welcome to Kiyo blog ☆

||<#ffffff' style='width:530px;padding:10px;text-align:center;font-family:Mystical;font-size:26pt;font-weight:bold;color:hotpink;filter:wave(add=true,freq=0,strength=0,lightstrength=100)'``☆ Welcome to Kiyo blog ☆ ||

文字の大きさと色を変えてみましょう

☆ Welcome to Kiyo blog ☆

||<#ffffff' style='width:530px;padding:10px;text-align:center;font-family:Mystical;font-size:20pt;font-weight:bold;color:slateblue;filter:wave(add=true,freq=0,strength=0,lightstrength=100)'``☆ Welcome to Kiyo blog ☆ ||

↓これが変更したところです。
font-size:20pt;　color:slateblue;

他のフォントでも色違いでつくってみました（文字サイズは20ｐ）
文字色はグラデーションで薄くなるので、少し濃い色を選びます。

フォント：メイリオ

☆ Welcome to Kiyo blog ☆

||<#ffffff' style='width:530px;padding:10px;text-align:center;font-family:メイリオ;font-size:20pt;font-weight:bold;color:tomato;filter:wave(add=true,freq=0,strength=0,lightstrength=100)'``☆ Welcome to Kiyo blog ☆||

||<#ffffff' style='width:530px;padding:10px;text-align:center;font-family:メイリオ;font-size:20pt;font-weight:bold;color:indianred;filter:wave(add=true,freq=0,strength=0,lightstrength=100)'``☆ Welcome to Kiyo blog ☆||

フォント：富士ポップ

☆ Welcome to Kiyo blog ☆

||<#ffffff' style='width:530px;padding:10px;text-align:center;font-family:富士ポップ;font-size:20pt;font-weight:bold;color:olivedrab;filter:wave(add=true,freq=0,strength=0,lightstrength=100)'``☆ Welcome to Kiyo blog ☆||

||<#ffffff' style='width:530px;padding:10px;text-align:center;font-family:富士ポップ;font-size:20pt;font-weight:bold;color:teal;filter:wave(add=true,freq=0,strength=0,lightstrength=100)'``☆ Welcome to Kiyo blog ☆||

フォント：HGP創英角ﾎﾟｯﾌﾟ体

☆ Welcome to Kiyo blog ☆

||<#ffffff' style='width:530px;padding:10px;text-align:center;font-family:HGP創英角ﾎﾟｯﾌﾟ体;font-size:20pt;font-weight:bold;color:royalblue;filter:wave(add=true,freq=0,strength=0,lightstrength=100)'``☆ Welcome to Kiyo blog ☆||

||<#ffffff' style='width:530px;padding:10px;text-align:center;font-family:HGP創英角ﾎﾟｯﾌﾟ体;font-size:20pt;font-weight:bold;color:blueviolet;filter:wave(add=true,freq=0,strength=0,lightstrength=100)'``☆ Welcome to Kiyo blog ☆||

文字の色はカラーチャートⅠとⅡから選んでいます。

カラーチャートⅠ(寒色系)　　　　
カラーチャートⅡ(暖色系)

　　◆文字をお好みの色や大きさに変えられます。
　　　color:hotpink＝文字の色　　font-size:20pt＝文字の大きさ

　　◆文字を左寄せにしたい場合は、「text-align:center;」の部分を取って使用できます。

　　◆緑枠内のコードをそのままコピー＆ペーストして使えます。
　　　『Wiki文法を使用』に必ずチェックを入れてください。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

☆お持ち帰りは右下の転載ボタンからどうぞ☆

☆転載される方はコメント残していってくださいね（＾-＾）/☆

　制作元

☆ Kiyo blog ☆

コメント（10）

トラックバック（0）

★長文対応色文字★　影付き太字・影付き細字

前回でお勉強した長文対応色文字の影付きバージョンをお勉強します。
前回の基本のコードに影付きのコードを足して作りました。

■長文対応色文字（太字）・影付き・センター合わせ・文字サイズ11pt

これを基本にします。

記事『お菓子の家』で使用　長文対応色文字（太字）・影付き・センター合わせ　文字サイズ11pt・文字の色#FF809F　全角のスペースを入れると改行します。　これなら長文を書くときに便利ですよ。

||<#FFFFFF'style='font-size:11pt;word-spacing:530px; text-align:center;filter:Blur(strength=10,direction=135);color:#FF809F'``'''記事『お菓子の家』で使用　長文対応色文字（太字）・影付き・センター合わせ　文字サイズ11pt・文字の色#FF809F　全角のスペースを入れると改行します。　これなら長文を書くときに便利ですよ。'''||

色を変えてみましょう

記事『ふたご座流星群』で使用　長文対応色文字（太字）・影付き・センター合わせ　文字サイズ11pt・文字の色blue

||<#FFFFFF'style='font-size:11pt;word-spacing:530px; text-align:center;filter:Blur(strength=10,direction=135);color:blue '``'''記事『ふたご座流星群』で使用　長文対応色文字（太字）・影付き・センター合わせ　文字サイズ11pt・文字の色blue'''||

サイズを変えてみましょう
文字サイズ10pt

長文対応色文字（太字）・影付き・センター合わせ　文字サイズ10pt・文字の色#A850C5

文字サイズ12pt

長文対応色文字（太字）・影付き・センター合わせ　文字サイズ12pt・文字の色#A850C5

文字サイズ10pt
||<#FFFFFF'style='font-size:10pt;word-spacing:530px; text-align:center;filter:Blur(strength=10,direction=135);color:#A850C5'``'''長文対応色文字（太字）・影付き・センター合わせ　文字サイズ10pt・文字の色#A850C5'''||

文字サイズ12pt
||<#FFFFFF'style='font-size:12pt;word-spacing:530px; text-align:center;filter:Blur(strength=10,direction=135);color:#A850C5'``'''長文対応色文字（太字）・影付き・センター合わせ　文字サイズ12pt・文字の色#A850C5'''||

■長文対応色文字（太字）・影付き・左寄せ・文字サイズ11pt

「center」を取ると左寄せになります

長文対応色文字（太字）・影付き・左寄せ　文字サイズ11pt・文字の色#50A8C5　左寄せだと長い文章にも合いますよ

||<#FFFFFF'style='font-size:11pt;word-spacing:530px;filter:Blur(strength=10,direction=135);color:#50A8C5'``'''長文対応色文字（太字）・影付き・左寄せ　文字サイズ11pt・文字の色#50A8C5　左寄せだと長い文章にも合いますよ'''||

■長文対応色文字（細字）・影付き・センター合わせ・文字サイズ11pt

「'''」を取って細字にします

長文対応色文字（細字）・影付き・センター合わせ　文字サイズ11pt・文字の色#FF809F　細字はやさしいイメージになりますね

||<#FFFFFF'style='font-size:11pt;word-spacing:530px; text-align:center;filter:Blur(strength=10,direction=135);color:#FF809F'``長文対応色文字（細字）・影付き・センター合わせ　文字サイズ11pt・文字の色#FF809F　細字はやさしいイメージになりますね||

■長文対応色文字（細字）・影付き・左寄せ・文字サイズ11pt

「center」を取って左寄せにします

長文対応色文字（細字）・影付き・左寄せ　文字サイズ11pt・文字の色#FF809F　左寄せだと長い文章にも合いますよ

||<#FFFFFF'style='font-size:11pt;word-spacing:530px;filter:Blur(strength=10,direction=135);color:#FF8000'``長文対応色文字（細字）・影付き・左寄せ　文字サイズ11pt・文字の色#FF809F　左寄せだと長い文章にも合いますよ||

　　◆文字をお好みの色や大きさに変えられます。
　　　color:#FF809F＝文字の色　　font-size:11pt＝文字の大きさ

　　◆緑枠内のコードをそのままコピー＆ペーストして使えます。
　　　『Wiki文法を使用』に必ずチェックを入れてください。

【参考記事】はこちら→　　『お菓子の家』　　『ふたご座流星群』

☆転載される方はコメント残していってくださいね（＾-＾）/☆

転載元

☆ Kiyo blog ☆

コメント（6）

トラックバック（0）

★長文対応色文字★　太字・細字、センター合わせ・左寄せ

棚上げしていたお勉強の記事をアップします＾＾；

Wiki文法って簡単に文字の色や大きさをかえられて、とっても便利ですよね。
でもコードが長いものだと、たくさん使いすぎて文字制限オーバーしちゃうことありませんか？
え？ない？。。。私はありました＾＾；
今回は長文に対応したものをお勉強します。

■長文対応色文字（太字タイプ）　センター合わせ

これを基本にします

長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ11pt　全角のスペースを入れると改行します。　これなら長文を書くときに便利ですよ。

||<#FFFFFF'style='font-size:11pt;word-spacing:530px; text-align:center; color:#CA95FF'``'''長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ11pt　全角のスペースを入れると改行します。　これなら長文を書くときに便利ですよ。'''||

私の記事の中で使用していますので、参考にしてみてください。

『記憶の街歩き』で使用　長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ11pt　文字の色#A76D6D

||<#FFFFFF'style='font-size:11pt;word-spacing:530px; text-align:center; color:#A76D6D'``'''『記憶の街歩き』で使用　長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ11pt　文字の色#A76D6D'''||

文字の大きさを10pにしてみましょう

『宗派を超えて僧侶が一堂に（東京ボーズコレクション）』で使用　長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ10pt　文字の色#3AAFAF

||<#FFFFFF'style='font-size:10pt;word-spacing:530px; text-align:center; color:#3AAFAF'``'''『宗派を超えて僧侶が一堂に（東京ボーズコレクション）』で使用　長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ10pt　文字の色#3AAFAF'''||

『こたつでラグビー観戦＝花園ラグビー場』で使用　長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ10pt　文字の色seagreen

||<#FFFFFF'style='font-size:10pt;word-spacing:530px; text-align:center; color:seagreen'``'''『こたつでラグビー観戦＝花園ラグビー場』で使用　長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ10pt　文字の色seagreen'''||

『「ひので」がとらえた太陽風の源』で使用　長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ10pt　文字の色orange

||<#FFFFFF'style='font-size:10pt;word-spacing:530px; text-align:center; color:orange'``'''『「ひので」がとらえた太陽風の源』で使用　長文対応色文字（太字タイプ）・センター合わせ・文字の大きさ10pt　文字の色orange'''||

■長文対応色文字（太字タイプ）　左寄せ

左寄せにしたい場合は、「center」を取って使用します。

『記憶の街歩き』で使用　長文対応色文字（太字タイプ）・左寄せ・文字の大きさ10pt　文字の色#8A9A7A

||<#FFFFFF'style='font-size:10pt;word-spacing:530px;color:#8A9A7A'``'''『記憶の街歩き』で使用　長文対応色文字（太字タイプ）・左寄せ・文字の大きさ10pt　文字の色#8A9A7A'''||

■長文対応色文字（細字タイプ）　センター合わせ

細字にする場合は、「'''」を取って使用します

長文対応色文字（細字タイプ）・センター合わせ・文字の大きさ10pt　文字の色#CA60AF

||<#FFFFFF'style='font-size:10pt;word-spacing:530px; text-align:center; color:#CA60AF'``長文対応色文字（細字タイプ）・センター合わせ・文字の大きさ10pt　文字の色#CA60AF||

■長文対応色文字（細字タイプ）　左寄せ

長文対応色文字（細字タイプ）・左寄せ・文字の大きさ10pt　文字の色#7A60CA

||<#FFFFFF'style='font-size:10pt;word-spacing:530px;color:#7A60CA'``長文対応色文字（細字タイプ）・左寄せ・文字の大きさ10pt　文字の色#7A60CA||

　　◆文字をお好みの色や大きさに変えられます。
　　　color:#CA95FF＝文字の色　　font-size:16pt＝文字の大きさ

　　◆緑枠内のコードをそのままコピー＆ペーストして使えます。
　　　『Wiki文法を使用』に必ずチェックを入れてください。

☆次回は長文対応色文字の影付きをお勉強します☆

参考記事はこちら↓

記憶の街歩き　　
宗派を超えて僧侶が一堂に（東京ボーズコレクション）
こたつでラグビー観戦＝花園ラグビー場　　
「ひので」がとらえた太陽風の源　　

☆転載される方はコメント残していってくださいね（＾-＾）/☆

転載元

☆ Kiyo blog ☆

☆ Kiyo blog ☆

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

ブログ記事の背景に色を付ける方法

コメント（34）

トラックバック（0）

帯の中に影付き文字を入れる

コメント（20）

トラックバック（0）

いろんなフォントで　★一色グラデーション文字★

コメント（10）

トラックバック（0）

★長文対応色文字★　影付き太字・影付き細字

コメント（6）

トラックバック（0）

★長文対応色文字★　太字・細字、センター合わせ・左寄せ

コメント（21）

トラックバック（0）

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

最新の記事一覧

過去の記事一覧

訪問者履歴

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