ブログの杜 （Yahoo!ブログ作成講座）

Wiki文法でボックスの文字の色を変更

Wiki文法でボックスの文字の色を変更

「font;color:」を使う事によってボックス内の文字の色を変更する事ができます。

基本サンプル

||<#○' style='font;color:#●;padding:△px;border:□px ◎ #▽' ``ここに文字を入れる||

○にボックスの背景色を指定
●に文字の色を指定する
△にボックスの大きさ（パディング）の値を指定
□に枠の太さの値を指定
◎にボックスの種類を指定する
▽に枠の色を指定

必ず大前提として、全て半角英数字で入力する事

色を指定するには # の後に６桁の0〜9とA〜F間できめる。
赤色を指定する場合は # の後にFF0000とすれば赤くする事ができます。
青色は0000FF、紫にしたい時は赤と青をあわせればよいのでFF00FFとなります。

ボックスの大きさや枠の太さを変える場合は、
px の前に数字をいれてやれば良い、必ず0以上の数字を入れる事

ボックスの種類は全てで8種類あります。
「solid」「double」「groove」「ridge」「outset」「inset」「dotted」「dashed」
このどれかを指定すれば、ボックスの種類を変えることが出来ます。

ここに文字を入れる

ここに文字を入れる

ここに文字を入れる

ここに文字を入れる

ここに文字を入れる

サンプル ソース

||<#FF9999' style='font;color:#FF0000;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

||<#FF9999' style='font;color:#0000FF;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

||<#FF9999' style='font;color:#FF00FF;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

||<#FF9999' style='font;color:#00FFFF;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

||<#FF9999' style='font;color:#FFFF00;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

色だけではなく文字の大きさも変更

文字の大きさを調整する場合は「size」を使う

ここに文字を入れる

ここに文字を入れる

ここに文字を入れる

ここに文字を入れる

ここに文字を入れる

サンプル ソース

||<#FF9999' style='font-size:10px;color:#FF0000;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

||<#FF9999' style='font-size:12px;color:#0000FF;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

||<#FF9999' style='font-size:14px;color:#FF00FF;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

||<#FF9999' style='font-size:16px;color:#00FFFF;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

||<#FF9999' style='font-size:18px;color:#FFFF00;padding:15px;border:5px solid #FF6666' ``ここに文字を入れる||

文字の大きさのみでは、例えば18ピクセルにしたい時は「font-size:18px」
さらに赤い文字にしたい時は「font-size:18px;color:#FF0000」

ここのページでは文字の色の変え方のみですので、
ボックスの色や枠の大きさを変える詳細はトップページへ

YouTube（外部サイト）の動画を、記事に簡単にはりつけられるようになりました

YouTubeの動画を簡単にはりつけられるようになりました

http://blogs.yahoo.co.jp/FRONT/info.htmlより

2007年11月29日 記事編集機能を強化
YouTube（外部サイト）の動画を、Yahoo!ブログの記事に簡単にはりつけられるようになりました。
動画再生ページからクリック2回で、記事の編集画面に動画はりつけ用のWiki文法が自動で入力されます。

●使い方
・YouTube（外部サイト）で、動画を表示します。
・動画の下にある「共有」ボタンを押します。
・http://jp.youtube.com/img/icn_plyract_share_yahoo_16x16.gifアイコン、もしくは「Yahoo!」のリンクを押します。
・選んだ動画のWiki文法が入力された状態の記事編集画面が開きます。
◆ 関連リンク
ヘルプ - Wiki文法について

YouTube（外部サイト）

---

関連ページ
http://blogs.yahoo.co.jp/kagemusyamk1/48783145.html
こっち↑のページは不要になったか・・・な？
でも上記のアドレス先の方法でコードさえわかってしまえば↓この様なことができる。

http://jp.youtube.com/cp/vjVQa1PpcFMTU-_QRjv7ilV1oHNu98Gw9ngrFuo5cY4=
※音量が聞こえない方は↑のボリュームをマウスぐぐっとやって上げてください

フル画面モードで見るならココをクリック

YouTubeをブログに貼り付ける方法

You Tubeをブログに貼り付ける方法

まず基本としてこのソースを覚えましょう

基本ソース

[[embed(ここにURLを入れる,0,425,350)]]

解説しますと
基本的に音声・映像・フラッシュの貼り付け方と同じです。
1.ここにURLを入れる→はYou Tubeの映像のある場所のURLをはりつけます。
2.現在では「0」と表示していますが自動で映像を流す「ON」か「OFF」の違いオンにするのであれば「1」
3.現在では「425」と表示していますがこれは映像の横幅の値です。
4.現在では「350」と表示していますがこれは映像の縦幅の値です。

実践をサンプルを用いて解説

詳細は下記の通りの方法なのでよく読んで理解しましょう
ちょっと分かりにくいと思いますので例をとりあげています。

例えばこのアドレス先のYouTubeにあるこのページの映像を使いたいとする。
http://www.youtube.com/watch?v=_hBeRAhAnsI

そこに「Embed」のテキストエリアの中にあるURLを抜き出します。

これがEmbedのソース

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/_hBeRAhAnsI"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/_hBeRAhAnsI" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

これではまだ使い物にならないのである部分を抜き出します。

---

抜き出す部分は下記の部分で

サンプルソースです。

<param name="movie" value="http://www.youtube.com/v/_hBeRAhAnsI">

または

<embed src="http://www.youtube.com/v/_hBeRAhAnsI" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350">

これが本体となるURLで、これをさらに必要な部分だけを抜き出す

---

これが本当に必要なURLです。

サンプルソースです。

http://www.youtube.com/v/_hBeRAhAnsI

つまり、これで準備が整います。

---

そこで上記でも解説した基本ソースをここで使うのです。

基本ソース

[[embed(ここにURLを入れる,0,425,350)]]

---

「ここにURLを入れる」という所に、そのURLを入れる

変更後のサンプルソースです。

[[embed(http://www.youtube.com/v/_hBeRAhAnsI,0,425,350)]]

完成するとこの通りです。
↓

補足と注意事項

【ユーチューブのアドレスについて】

ユーチューブのYahoo!ブログに使うとき
そこのサイトのテキストエリアには「URL」と「Embed」の二種類があります。

基本ソースに「URL」をそのまま使ってもこのブログで映像が出せる事も可能です。
しかし、たまに「URL」と「Embed」のタグのアドレスが違っていることがあります。
この時には「Embed」を使用するほうが確実ですので、そのやり方をここで説明しております。

---

【映像の幅を変える時について】

3.現在では「425」と表示していますがこれは映像の横幅の値です。
4.現在では「350」と表示していますがこれは映像の縦幅の値です。
について

数値を変える事によって、自由に映像の幅を変えられます。
横幅の最大値はこのブログの都合上「560」が限界で、これを超えるとページのデザインが乱れます。

---

【自動再生について】
自動で映像を流す「ON」か「OFF」の違いについてですが
Youtubeでは無意味ですので「０」ゼロの設定のままでOKです。

Wiki文法でカラーラインを引く

Wiki文法でカラーラインを引く

もともとはテーブルに背景色を付ける物ですが、これを応用して
そこに文字を入れずにいると、ただの線になってしまいます。

基本サンプル
||<○' style='width:△px' ``||

○にカラーを指定する
△にラインの長さの値を入れる（1〜560）

赤色ライン

橙色ライン

黄色ライン

黄緑色ライン

緑色ライン

青緑色ライン

青色ライン

青紫色ライン

紫色ライン

赤紫色ライン

サンプルソース

||<#FF9999' style='width:560px' ``||
赤色ライン

||<#FFAA99' style='width:560px' ``||
橙色ライン

||<#FFFF99' style='width:560px' ``||
黄色ライン

||<#AAFF99' style='width:560px' ``||
黄緑色ライン

||<#99FF99' style='width:560px' ``||
緑色ライン

||<#99AAFF' style='width:560px' ``||
青緑色ライン

||<#9999FF' style='width:560px' ``||
青色ライン

||<#AA99FF' style='width:560px' ``||
青紫色ライン

||<#FF99FF' style='width:560px' ``||
紫色ライン

||<#FF99AA' style='width:560px' ``||
赤紫色ライン

Wiki文法で太さの違うカラーラインを引く

heightで太さ（縦幅）を指定する事で太さを変えられます。

基本サンプル
||<○' style='width:△px;height:□px'``||

○にカラーを指定する
△にラインの長さの値を入れる（1〜560まで）
□にラインの太さの値を入れる（1以上）

赤色ライン

橙色ライン

黄色ライン

黄緑色ライン

緑色ライン

青緑色ライン

青色ライン

青紫色ライン

紫色ライン

赤紫色ライン

サンプルソース

||<#FF99AA' style='width:560px;height:2px' ``||
赤色ライン

||<#FFAA99' style='width:560px;height:3px' ``||
橙色ライン

||<#FFFF99' style='width:560px;height:4px' ``||
黄色ライン

||<#AAFF99' style='width:560px;height:5px' ``||
黄緑色ライン

||<#99FF99' style='width:560px;height:6px' ``||
緑色ライン

||<#99AAFF' style='width:560px;height:7px' ``||
青緑色ライン

||<#9999FF' style='width:560px;height:8px' ``||
青色ライン

||<#AA99FF' style='width:560px;height:9px' ``||
青紫色ライン

||<#FF99FF' style='width:560px;height:10px' ``||
紫色ライン

||<#FF99AA' style='width:560px;height:11px' ``||
赤紫色ライン

Wiki文法で画像を使ってカラーラインを引く

画像によっては様々なラインが引ける事が出来ます。
GIFアニメも可能なので、動的に表現も可能なのが特徴
※ラインの画像を使うときは横幅が最大で560pxですので、ご注意！

これの仕方は画像の貼り付け方と同じです。

Wiki文法で見出しを使ってラインを引く

見出しを使うときに文字を入れる代わりにスペースを入れると
ライン？になってしまいます。

　

　

　

　

　

サンプルソース

= 　 =
== 　 ==
=== 　 ===
==== 　 ====
===== 　 =====

文字を小さく出来ても、ラインの太さは変わらないようです。
残念・・・

Wiki文法でボックスの大きさを変更

Wiki文法でボックスの大きさを変更

パディング（padding）を使うと
ボックスの大きさを変更する事も出来ます。

基本サンプル

||<○' style='padding:△px;border:□px ◎ ▽' ``ここに文字を入れる||

○にボックスの背景色を指定
△にボックスの大きさ（パディング）の値を指定
□に枠の太さの値を指定
◎に枠の種類を指定する
▽に枠の色を指定

solidボックス

doubleボックス

grooveボックス

ridgeボックス

outsetボックス

insetボックス

dottedボックス

dashedボックス

サンプルソース

||<#FF6666' style='padding:10px;border:2px solid #FF3333' ``solidボックス||

||<#FF66FF' style='padding:15px;border:3px double #FF33FF' ``doubleボックス||

||<#6666FF' style='padding:20px;border:4px groove #3333FF' ``grooveボックス||

||<#66FFFF' style='padding:25px;border:5px ridge #33FFFF' ``ridgeボックス||

||<#66FF66' style='padding:30px;border:6px outset #33FF33' ``outsetボックス||

||<#AAFF66' style='padding:35px;border:7px inset #66FF33' ``insetボックス||

||<#FFAA66' style='padding:40px;border:8px dotted #FF6633' ``dottedボックス||

||<#FF6666' style='padding:45px;border:9px dashed #FF9933' ``dashedボックス||