Yahoo!BLOGS 用「Wiki文法タグ自動作成」β版


※2005/12/12〜随時更新中です。β版（笑）のWiki文法タグ自動作成ページです。このページはJavaScriptを使用しています。 質問や、要望があれば項目毎にリンクしてあるブログの各関連記事にお願いします。朝もやの小道：管理人しん。

2006/08/14
　マウスカーソルを乗せたり、クリックしたりしたらイベントが起こる「DHTML」を使ったWikiを
　公開していましたが、Yahoo!ブログの仕様変更なのか使えなくなったので非公開にしました。
　同じく「画像クリックでリンク先を開く」も使えなくなっております。
　同じく「添付画像にリンクを貼る」も非公開にしました。ご了承ください。
2006/08/15
　スタイルシート編で非公開にした「onMouse」関係を削除した後にプログラムミスで正常に動かなく
　なっていたのを修正しました。失礼しました。

説明ビデオ（別ウインドウで開きます）

文字修飾 編 ハイパーリンク 編 スタイルシート 編
文字列を太字にしてみる 文字にハイパーリンクを貼る 文字色とフォントサイズを変える

　　このページの使い方は、この記事に軽く説明しています。

文字修飾 編

　作成ボタン、その前の文字にカーソルを合わせるとコメントが出ます。
太字 テキスト入力エリア
斜体　*1
斜体　*1
見出し1 上のテキストエリアに文字を入力後、
左の作成ボタンを押すと、下にタグが表示されます。
IEをお使いならクリップボードにもコピーしてますので
投稿画面で「右クリック→貼り付け」してください。
見出し2
見出し3
見出し4 コード表示エリア
見出し5
　引用1

引用

2

引用
3

「引用2」は、ハイパーリンクも使用可です。上の太字なども反映されます。改行は1行分空きます。
「引用3」は、画像([[attached()]]、[[img()]]以外は基本的に投稿時のまま表示されます。
*1　Yahoo!ブログのサポート外です。ご利用は自己責任でお願いします。

ハイパーリンク 編

リンクを貼りたい時や、他のWEBページの画像を貼り付けたいときに使います。
　（直リンク(*2)の画像には気を付けて下さい)
　入力ボックスかその前の文字、ボタンにカーソルを合わせるとコメントが出ます。
関連記事1 関連記事2

サイズを省略した際は、画像の元のサイズで表示されますので、幅560を超えている場合は表示が崩れます。
幅、高さいずれかのみを入力した場合は、そちらを基準に自動的に拡大(縮小)表示されます。
　WMVなど動画は、プレーヤーの表示域の分、サイズの指定で高さを「45」プラスしてください。
　（例:320×240の動画の場合、幅320、高さ285）
確認のうえ、下の「タグ作成ボタン」をクリック！

URLを貼り付けてください
　

リンクする文字を入力してください。（画像ならカーソルが乗ったときに表示される説明文、マルチメディアなら無効)
　
　画像貼付ならサイズを入力してください。　マルチメディア(※)ならサイズと再生方法、位置を選択。
　サイズ(半角)：幅 ×高さ 　　 再生方法 　　位置

ボタンを押すとクリップボードにコピーもします。記事にそのまま貼り付けてください。
タグ作成ボタン 拡張子 タグ表示エリア
.html　.htm
.html　.htm
.jpg　.gif　.png
.mp3.wmv.mov.swf　*1

*1 Yahoo!ブログのサポート外です。ご利用は自己責任でお願いします。
*2 直リンクとは、他のホームページなどで公開されている画像のURLを指定し表示する事で
　　で、その多くが他のページからの表示を許可・想定していません。(直リンクOK)の記述の無い画像への
　　直リンクは、マナー違反とサーバー負荷増大などの迷惑になりますので注意してください。
　　自分のブログからの直リンク画像に関しては問題ないと思います。


このページのトップへ

添付画像 編　　　　[[attached()]]

添付画像を記事の好きな場所に挿入する事が出来ます。*1

作成ボタンを押すとクリップボードにコピーもします。記事にそのまま貼り付けてください。

添付画像の を で

*1Yahoo!ブログのサポート外です。ご利用は自己責任でお願いします。
回り込みって？
　左回り込みは、画像を左に置き、文字がその右側に表示されます。
　右回り込みは、画像を右に置き、文字がその左側に表示されます。
　回り込みなし、中央寄せは、文字の位置には関与しません。
●転載をした場合、挿入した位置はリセットされ、画像は記事の上部に移動されます。


このページのトップへ

スタイルシート 編　　　　||<#FFFFFF' ``|| を使った修飾

セル(表の１マス)にスタイルシートといわれる構文を付加することにより、 文字の色や枠の色などを変える事が出来るようになるようです。 しかし、Yahooのサポート外な上、HTMLにブログが変換する際に出来るHTMLソースの文法にも 正常に反映されておらず、ブラウザが何とか表示しているに過ぎないのです。 いつまで使用できるか、そもそも使って不具合は無いのか?という疑問があるので、 そのリスクも考えた上で使用してください。
・OperaやFireFoxなどIEコンポーネントを使用していないブラウザでは正常に表示されません。
・全てサポート外ですので、ご利用は自己責任でお願いします。
・基本的に数字は半角で入力してください。

背景色見本　この他の色は、気が向いたら追加します。希望があれば言ってください。
白 黒 ねずみ色 向日葵色 ポカリ色
スカイブルー ストロベリー 薄紅梅 桜色 青竹色
エメラルドグリーン 草色 若緑 あやめ色 藤色
海老茶 柿色 キツネ色 橙色 スケッチブック
バブル:グリーン バブル:ブルー バブル:オレンジ

文字色見本　「メニュー色：一般」から後ろは、ブログのメニューで各背景別に使われている色です。
黒 ねずみ色 向日葵色 ポカリ色 スカイブルー ストロベリー
薄紅梅 桜色 青竹色 エメラルドグリーン 草色 若緑
あやめ色 藤色 海老茶 柿色 キツネ色 橙色
メニュー色:一般 風景:グリーンヒル 風景:クリフコースト 風景:パームツリー バブル:グリーン バブル:ブルー
バブル:オレンジ スケッチブック クリスマス・イルミネーション スノーボード 初詣 初日の出

ボーダーの見本　(見本では、border: ○○ 7px #89BDDE;　で指定しています。色の種類は文字色と共通です。）

solid

double

dotted

dashed

inset

outset

groove

ridge


2006/04/15〜
文字列の入力が一番上に変更になっています。ご注意下さい。　更に完成タグがここにも表示されます↓
文字列

最初に表示される文字列の入力をしてください。		 　　タグ
プロパティ 選択項目(入力項目) 説 明 作
　　 背景色の設定です。必須。関連記事3


文字の色を指定します。
右のパレットをクリック
して下さい。
関連記事3		 指定なし + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +

フォントサイズ　 pt　 30pt 20pt 15pt 10pt フォントの大きさを指定します。 関連記事3
斜体 指定する 文字に斜体の装飾をつけます。
太字 太さの例、標準400、太字700。ほとんどのフォントでは変化なし。
指定する 英半角用。小文字を小さな大文字に変換します。 関連記事4
フォント指定 英文字フォントは、半角のみに対応しています。
太字などには非対応のようです。(*印は機種依存です。)関連記事6
上線、下線、取り消し線 　 　 上線、下線、取り消し線の指定。複数指定可。(注・アニメはしません。)関連記事4
半角スペースの幅

 指定する。 　半角スペース幅 px 　スペースの幅をpx単位(半角数字)で指定します。
　同じセル幅も指定することにより長い文字列を半角スペースで改行できます。関連記事4
行の高さ
　　　　		 pt 行の高さ。フォントの大きさ以上を指定しないと重なる。関連記事4
文字間隔の幅 pt 文字間隔の幅をpt単位で指定します。関連記事4
横位置
　　　　		 枠内での水平位置を指定します。関連記事3
縦位置
　　　　		 枠内での垂直位置の指定をします。関連記事3
背景画像 URL 画像のURLを貼り付けてください。★ 関連記事7
背景画像の繰り返し 背景画像の繰り返し方を指定します。タイル状が既定です。 関連記事8
背景画像の位置 横位置
縦位置 		背景画像の位置を指定します。トラブル防止のため指定するなら縦横どちらも指定してください。 関連記事8
セル幅
　　　		 px　　　(560まで) セルの横幅を指定します。半角数字で。
セル高さ
　　　		 px セルの高さを指定します。半角数字で。
余白まとめて指定　
　　		 　px セルの余白をまとめて指定します。半角数字で。 関連記事2
余白を個別に指定　

　　		 　　　　　　上px
　　左px　 　　右px
　　　　　　下px 		　指定したものだけ追加します。
　まとめて指定したときは指定しないで下さい。
　半角数字で。 関連記事2
ボーダー全て指定
　　		 種類
太さpx　　　　　枠の色　↓
枠の四方をまとめて指定します。太さは半角数字で。
関連記事3
　上ボーダー指定
　　		 種類
太さpx　　　　　枠の色　↓
　上の枠のみ指定します。太さは半角数字で。
関連記事3
　右ボーダー指定
　　		 種類
太さpx　　　　　枠の色　↓
　右の枠のみ指定します。太さは半角数字で。
関連記事3
　左ボーダー指定
　　		 種類
太さpx　　　　　枠の色　↓
　左の枠のみ指定します。太さは半角数字で。
関連記事3
　下ボーダー指定
　　		 種類
太さpx　　　　　枠の色　↓
　下の枠のみ指定します。
関連記事3

IEならタグ作成と同時にクリップボードにコピーしてます。も同じ機能です。

★　大きさ注意。あくまで、セルの背景なので、セルの大きさを 指定しないと、画像が大きいとすべて表示されなかったり、逆に小さな画像だと 繰り返し表示されたりします。
・色の名称は「色取鳥ｉ」などから引用させて頂いております。
　2005/12/19現在、作者様HPは管理中のようです。DLはベクターで。

ご意見ご要望などは、こちらのブログの記事か各関連記事にお願いします→Wikiタグ自動作成



このページのトップへ　　 トップメニューに戻る

更新履歴
2005/12/12
　暫定公開。Yahoo純正のwiki+斜体のみの対応。
　ハイパーリンク編も追加。
2005/12/16
　マルチメディア再生タグ、「embed」に対応。
2005/12/17
　添付画像「[[attached()]]」に対応。
2005/12/19
　スタイルシートの部分もあらかた出来たので、暫定公開します。全ての動作チェックを
　していませんので、スペル間違いなどあるかもしれません。また、動作しない場合もあ
　りますので、お気をつけ下さい。
　動かないものがあれば教えていただけると助かります。動作しない時は、やたらめったら
　指定しまくると、何が原因か分からないので、出来れば少しずつ追加していくようにして下さい。
2005/12/20
　背景画像と縦位置のScriptを作るのを忘れていたので、こっそり修正(汗)
　グラデーション文字などの「filter:」を追加するかで迷ってます。（追加するのは簡単
　なんですが、文字の大きさ等と同じくしてOperaとかでは全く反映されないんですよね。
　私がOpera使ってるもんで、制作意欲が･･･（笑）)
　【夜に追加】マウスカーソルが乗っかると背景画像が変化するように出来ました。
　オーバーだけ指定するとそれだけ追加、アウトも指定すると、元の背景も一緒に設定します。
　「:」の「&#58;」への置換もやってます。必ず、セルサイズを指定してください。
2005/12/21
　各項目の説明やボタンなどにコメントが出るようにしました。適当にカーソル合わせてみてください。
　word-spacingの説明が変だったので、修正しました。
2005/12/25
　スモールキャップを「font」の中から出しました。まとめて指定すると反映されないようです。
2006/02/08
　フォントサイズも「font」の中から出しました。Operaでも表示できるようになりましたが、余白paddingの
　数値を15px位上下に入れないと、文字が切れますので注意してください。
2006/03/14
　背景画像の指定の際の「&#58」を正常に置換できていなかったので、修正しました。
2006/03/19
・添付画像のハイパーリンクを追加しました。コードをスタイルシートの文字列の所に貼り付けて使用してください。
・背景画像の位置、繰り返しの指定を追加しました。位置指定の注意事項として、縦横どちらかが指定なし、
　逆のどちらかが中央寄せ指定の場合、「background-position:center;」となり、縦横ともcenter指定した
　事になってしまいます。この場合、必ず両方指定してください。
2006/03/20
　セルの幅、高さ指定をスタイルシートではなく、DHTMLにて指定するように変更しました。
2006/04/08
　今更ですが、このページを効率的に使う方法をビデオにしてみました。記事はこちら
　添付画像[[attached()]]にハイパーリンクを貼るwikiが改修され、使えなくなりましたのでこのページも改正しました。
2006/04/10
　添付画像にハイパーリンクを貼る方法にDHTMLで対応できるということでしたので、こちらも対応しました。
　リンク画像にハイパーリンクもスタイルシート編で対応できます。
2006/04/15
・タグ作成ボタンを増やしました。各項目の右にあるボタンで作成されたタグがクリップボードにコピーされます。
　どのボタンも同じ効果なので、どこで押してもタグ作成できるようになりました。
・フォントに「HGP創英角ﾎﾟｯﾌﾟ体」「HG創英角ﾎﾟｯﾌﾟ体」「HG丸ｺﾞｼｯｸM-PRO」を追加しましたが、
　インストールされていないパソコンで表示した場合、ただのゴシック体で表示されるのでご注意下さい。
・「背景画像の繰り返し」で「縦に繰り返し」が「横に繰り返し」と同じ動作になっていたのを修正。
・スタイルシート編の文字列の入力を一番最初に変更しました。
2006/04/19
　スケッチブック背景を使用している方用にブログの背景色と同色の「#F8F8F2」を背景色に追加しました。
　完成タグ表示枠を「文字列」の右側にも作りました。下までスクロールする手間を省けます。
2006/04/21
　バブル:グリーン背景を使用している方用にブログの背景色と同色の「#E3F1E9」を背景色に追加しました。
2006/04/22
　他の背景用の同色と、メニューに使われている色を数色追加しました。
　右の余白をアフィリエイトに利用してみました。多すぎて重かったら言ってください。
　スタイルシートでハイパーリンクを貼るやり方に「新しいウインドウで開く」を追加。
2006/04/24
　innerHTMLを利用して、セルの中でのみですが、HTMLタグが使えるようになりました。
　マーキーやフォントカラーなんかがそのまま使えます。
　「:」「 」「,」「"」「'」をEsc記号に書き換えているので、記事修正の際の事をふまえて
　メモ帳などに完成タグを保存しておいた方がよいです。
2006/04/27
　各項目に関連する記事へのリンクを貼りました。参考にしてください。
2006/04/28
　フォントプロパティの「太字」「斜体」「行の高さ」を従来、一括指定していたんですが、個別で指定することにより、
　Operaでも表示できることが分かったので、変更しました。
2006/04/29
　添付画像編のハイパーリンクの項目に「新しいウインドウで開く」を追加しました。
　作成を押す前に、□にチェックを入れてください。
2006/05/15
　各項目にアニメアイコンを挿入して視認性を高めました。
2006/05/16
　少し左にスキマを設けるwebデザインにしました。
2006/05/19
　各項目のアニメアイコンを修正、追加してみました。
2006/05/27
　文字色のパレット化。クリックで選択できるようになりました。
2006/05/30
　使い方ビデオを変更しました。
2006/06/16
　質問箱設置
2006/06/26
　更新もしていないのに、ブログの最新記事が出るようにして見ました。右のメニューにあります。
2006/08/14
　マウスカーソルを乗せたり、クリックしたりしたらイベントが起こる「DHTML」を使ったWikiを
　公開していましたが、Yahoo!ブログの仕様変更なのか使えなくなったので非公開にしました。
　同じく「画像クリックでリンク先を開く」も使えなくなっております。
　同じく「添付画像にリンクを貼る」も非公開にしました。ご了承ください。
2006/08/15
　スタイルシート編で非公開にした「onMouse」関係を削除した後にプログラムミスで正常に動かなく
　なっていたのを修正しました。失礼しました。