自由工房 − Freedom Craft −

FBに移行してしまっています…。

wiki文法。

[ リスト | 詳細 ]

記事検索
検索

全2ページ

[1] [2]

[ 次のページ ]

wiki文法、FLASHの表示に挑戦！

　しばらくぶりのwiki文法です。

　ブログ「＝サッカーだよ☆全員集合！＝」を運営していらっしゃるTAKUMIさんから「ブログでwiki文法を用いてFLASHを使うにはどうしたらいいの？」というリクエストをいただきました。今日はそれについての記事をちょこっと。

　もうすぐサッカー・ドイツワールドカップがスタートしますね！先日、代表選手の発表があってサッカーファンの皆さんもテンションがあがってきていることと思いますが、TAKUMIさんもそんな熱烈サポーターのひとりでいらっしゃいます。そんなTAKUMIさんのリクエストは「ブログやHPを楽しくするWEBツール『ウェブモノ』」というフリー素材を扱うサイト内にある「2006ワールドカップパーツ」で配布されているFLASHをブログ内で使いたいということでした。
http://island.geocities.jp/freedom_craft/wc_Bnr.swf
　さぁ。ワールドカップ2006ドイツ大会まであと……日！というFLASHです。

　ウェブモノの素材は直リンク禁止ですので、ダウンロードして使用することになります。つまり、ダウンロードした素材をご自身のウェブスペースへアップロードして使う、ということになります。ヤフー！ブログでは画像以外のファイルをアップロードすることができないのですが、ヤフー！ブログご利用の皆様であれば簡単にジオシティーズにウェブスペースを設けることができます。今回、自分は素材のアップロードのためだけにジオシティーズのスペースを開設しました。

　と、長い前置きになってしまいました…。

　FLASHにかかわらず、動画や音声のファイルを記事の上で再生・表示させるためのwiki構文は以下のものを使います。
[[embed(表示したいファイルURL，ファイルの属性)]]　　…　　すべて半角英数で入力
　　　URLはhttpから始まる正しいアドレスを記入します。
　　　属性は表示させるファイルによって異なりますが、指定の必要な属性を入力します。

　　　属性は「0，幅，高さ」を入力します。
　　　最初の0はフラッシュのオートスタートを指定する数字です。
　　　幅、高さは任意に変えることができますが、ファイルによって最適な大きさが指定されている
　　　場合もあります。素材サイトや素材に添付するテキストを参考にして下さい。

　　　今回の構文はこのようになっています。最適な大きさが幅375、高さ100となっていましたので、
　　　[[embed(表示したいファイルURL，0，375，100)]]
　　　と表記します。
　実際にやってみると、このようになります。

http://island.geocities.jp/freedom_craft/wc_Bnr.swf

　wiki文法のテーブルを使うことによって、センタリングや右寄せも可能です。テーブル構文についてはこちらを参考にしてください。

　以下のように本文の部分に先ほどの構文を入れてあげます。
||<#ffffff' ``||
||<#ffffff' style='width:560px;text-align:right' ``[[embed(ファイルのURL,0,375,100)]]
||<#ffffff' ``||
　この結果が一番上に表示されているカウントダウンのFLASHです。

　ぜひ、トライしてみてくださいね！
　では〜。

　関連記事：wiki文法、センタリングや右寄せに挑戦！

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

wiki文法、画像の配置を変えてみよう！

ブログに画像を貼り付けて見ましょう。
　ヤフー！ブログの記事を作成する場合に画像をアップロードすると、添付した画像は記事の上部に縦に並んで表示され、記事本文は下部にまとめて表示されます。記事のトップに画像が表示されるのは視覚的には効果的かも知れませんが、オリジナリティは損なわれがちです。そこで、ヤフー！ブログのwiki文法ヘルプには載っていない画像を任意の位置へ配置するための構文をご紹介します。
［[attached(★,☆)]］
　　　★：画像番号　…　半角数字
　　　　　（アップロードした画像の番号。アップロードした順番に画像に番号がつきます。）
　　　☆：配置位置
　　　　　　left　　…　左寄せ（記入無しの場合にはこれになります。）
　　　　　　right　 …　右寄せ
　　　　　　center　…　中央寄せ
　　　注意：'''横幅が560ピクセル以下の画像'''に限り、指定が可能です。
　　　　　　横幅560ピクセル以上の画像は横幅560ピクセルに合わせて縮小されます。
　　　　　　横幅560ピクセル以上の画像は文章の途中に配置は可能ですが、
　　　　　　左右中央揃えの指定はできません。
　以上が画像操作の構文です。自分で用意した画像は、大きさを指定したりすることはできないようです。
まずはとりあえず、画像を貼り付けてみます。
　画像だけではわかりづらいので、適当な文章を以降につなげてみました。
配置位置：left
イメージ 1　セブンイレブンのエクレア、うまいですよ〜☆















　画像は左側に、テキストは画像の右側に表示されます。画像の下へ文章を続ける場合には、画像の高さに見合った「改行」を入力します。ちなみに、15行分の改行をしています。

配置位置：right
イメージ 2　セブンイレブンのエクレア、うまいですよ〜☆















　画像は右側に、テキストは画像の左側に表示されます。画像の下へ文章を続ける場合には、画像の高さに見合った「改行」を入力します。例によって、15行分の改行をしています。

配置位置：center
イメージ 3
　セブンイレブンのエクレア、うまいですよ〜☆

　センタリングの場合には上下に１行分改行され、テキストは画像の下へ表示されます。両脇への回り込みはありません。改行も必要ありません。

　いかがでしたか？
　参考にしていただければと思います♪

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

wiki文法、リンクの貼り方いろいろ。

リンクの文法をいろいろ試してみましょう。
　リンクのはり方は、Yahoo!ブログのヘルプを参照すると、その構文を見ることができます。以下がその構文をそのまま記載したものです。
[http://〜]
　つまり、リンクしたいサイトのURLをカッコ（　[　]　）に入れてやれば完成です。
　実際に使用してみましょう。リンク先のページは同じヤフー！ジャパンのトップページです。基本的に新しいウィンドウが開き、そこに表示されるようになっています。例）の下の灰色枠内部分に使用結果、その下の緑枠内部分が実際に記した構文です。
リンクの基本形。
　例）
　http://www.yahoo.co.jp
[http://www.yahoo.co.jp]

　次に、リンク先のURLを代替のテキストで表示できるようにしてみます。
リンク先のURLを代替のテキストで表示。
　例）
　ヤフー！ジャパン
[http://www.yahoo.co.jp ヤフージャパン]
リンク先URLの後ろに半角スペースを入れて、表示させたいテキストを入力します。

　さて、それでは次に代替テキストに変えてイメージを貼り付けて、リンクボタンとして活用してみます。
リンク先のURLをイメージを使ってボタンとして表示。（ヤフー！側のバグ修正により現在使用不可）
　例）
[[attached(1)]イメージ 1

||<#ffffff' ``[http://www.yahoo.co.jp/ [[attached(１)]][[attached(１)]]||
リンク先URLの後ろに半角スペースを入れて、ボタンとして表示させたいイメージの番号を入力。
番号はアップロードした画像の順番です。
修正などで画像を変更した場合には画像の番号に注意しましょう。
ちなみに、画像は自分でアップロードしたものしか表示できないようです。
リンク先の画像をそのまま使おうとすると上手くいきません。バナー広告対策でしょうか？
　ちなみに、画像を使用したリンクボタン。実はバグであることが判明しています。
　詳細は、この記事を作成するに当たって参考にさせていただいたきろくぶろぐ：mon_7_jpさんのブログをご覧ください。
　β版であるこのブログですので、正式版では使用できない可能性もあります。

　追記
　先日、ヤフー！ブログのメンテナンスが行われた際にバグの修正が行われ、画像をボタンとしてリンクを貼ることができなくなっております。
　いかがでしたか？
　参考にしていただけたら幸いです★

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

wiki文法、テキストの色、大きさ、フォントを変えてみよう！

テキストの色や太さ、フォントを変えてみよう！
　HTMLタグを使用すれば、文中の思い思いの場所で色を変えたり、太字にしたりとデコレーションが楽しめます。しかしながらヤフー！ブログにおいてのHTMLタグの使用には、好みの位置に画像を配置できないなどの制約が多くあります。
　wiki文法を使用すれば、文中の任意の場所へ画像を配置したりすることが可能です。そこで、HTMLタグのように自由度はないですが、今までの記事でご案内したテーブルを使用したデコレーション方法を紹介します。
テキスト全体の色を替えてみます。

テキストの色替えの要素。
color:☆
　　　☆部分はカラーナンバー（#RRGGBB … 16進数によるRGB値）か、
　　　　カラーネーム（Red、Blueといった色名）を使用します。
実際にこのような構文を使用してみます。
||<#ffffff' style='color:#ff0000' ``赤色のテキストにしてみました。||
　赤色のテキストにしてみました。

テキスト全体を太字にしてみます。

テキストの強調（太字）の要素。
font-weight:bold
実際に構文へ盛り込んで使用してみます。
||<#ffffff' style='font-weight:bold' ``太字のテキストで強調してみました。||
　太字のテキストで強調してみました。

テキスト全体の大きさを変えてみます。

テキストの大きさの要素。
font-size:☆　
　　　☆部分はフォントの大きさを指定。
　　　　☆pt（ポイント）
　　　　☆％（標準の大きさに対するパーセンテージ）
　　　　☆mm（ミリメートル）
実際に構文へ盛り込んでみます。
||<#ffffff' style='font-size:15pt' ``テキストの大きさを15ptにしてみました。||
　テキストの大きさを15ptにしてみました。

テキスト全体のフォント（書体）を変えてみます。

テキストのフォント変更の要素。
font-family:☆　
　　　☆部分はフォント名を指定。
　　　　指定したフォントの後に、「,」を入れて更にフォント名を追記していれば、
　　　　１番目に記入したフォントが無い場合に、２番目のフォントを使用して表示されます。
実際に構文へ盛り込んで見ます。
||<#ffffff' style='font-family:ＭＳ 明朝' ``明朝体にしてみました。||
　明朝体にしてみました。

今までの構文を組み合わせて、色・大きさ・太さ・フォントを変えて表示します。

各構文はセミコロン「；」で区切って続けて表記します。
||<#ffffff' style='color:#ff00ff;font-weight:bold;font-size:20pt;font-family:ＭＳ 明朝' ``ピンク色のでっかく太い明朝体です！||
　ピンク色のでっかく太い明朝体です！

　いかがでしたか？
　次回はリンクの文法についてご紹介します。　

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

wiki文法、テーブルを巧みに活用してみよう！

そうか、こういう使い方もあったのか！
　以前にご紹介した「wiki文法、センタリングや右寄せに挑戦！」でのセルを２段使用した場合の行間を狭くする方法や、その他の応用方法です。
　前回の縦に複数列のセルを使用すると、標準のままでは行間が広く開いてしまいます。たとえば、以下に示す文章を右寄せで表現してみたいと思います。
おみやげは
無事故でいいのよ
お父さん
　特に意味は無いのですが、あまりにも思い浮かばなかったので、どこかで見たフレーズにしてみました(笑)。
　さて、右寄せにするためにはテーブルに右寄せの要素を加えてやるのですが、セル内の改行はテーブルの構文を無効にしてしまうため、セルを縦に並べて表記します。ところが、セル内の間隔が大きいために行間がかなり広くなってしまいます。それを示す例を以下に作ってみました。わかりやすくするために、セルに色を付けてます。
おみやげは
無事故でいいのよ
お父さん
　ご覧のとおり、セルの端からテキストまでに大きく間隔が開いているのが判ります。この間隔を狭くすることができれば、行間も狭くすることが可能です。この間隔を「パディング」といいます。
パディングの要素。

padding:☆　　　　　　縦横すべての間隔を指定します。
padding-top:☆　　　　テキスト上部の間隔を指定します。
padding-bottom:☆　 　テキスト下部の間隔を指定します。
padding-left:☆　　 　テキスト左側の間隔を指定します。
padding-right:☆　　　テキスト右側の間隔を指定します。
　　　☆：間隔の数値を指定します。☆pxなどがメジャーです。
　実際に、パディングを縦横全部の間隔を指定する「padding:0px」を設定して先ほどの川柳？を表記します。本文部分をこのように表記します。
||<#ffcccc' style='width:560px;padding:0px;text-align:right' ``おみやげは

おみやげは
無事故でいいのよ
お父さん
　どうでしょう？だいぶ狭くなりました。
　色つきだと、目の錯覚で間隔が広く見えてしまうので、セルの色を白くして消してやります。より実感的に思えるはずです。
おみやげは
無事故でいいのよ
お父さん
　どうでしょう？
　さあ、このパディングの要素を応用すると、このようなこともできます。
文字列の途中での色替えができます。
　ヤフー！ブログでサポートされているのは、薄緑の背景をつけるやり方だけですが、改行をしない短い文の途中であれば他の色を使用することが可能になります。
　ソースは以下のように記述します。
||<#ffffff' ``||
||<#ffffff' style='padding:0px' ``おみやげは　　　　　セル背景色を白。
||<#ffcccc' style='padding:0px' ``無事故でいいのよ　　セル背景色を薄いピンク。
||<#ccccff' style='padding:0px' ``お父さん　　　　　　セル背景色を薄い青。
||<#ffffff' ``||

おみやげは 無事故でいいのよ お父さん
　いかがですか？文字間が不自然になることなく、文章が出来上がります。
　これを応用して、背景は白のままテキストの色を変えてやることもできます。
　次回はテキストの色、そして書体（フォント）を帰ることに挑戦してみましょう！

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

全2ページ

[1] [2]

[ 次のページ ]

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

.

ブログバナー

ひろきち
ひろきち
男性 / B型
人気度
Yahoo!ブログヘルプ - ブログ人気度について
日 月 火 水 木 金 土
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

最新のコメント

最新のトラックバック

スマートフォンで見る

モバイル版Yahoo!ブログにアクセス！

スマートフォン版Yahoo!ブログにアクセス！

ともだち。

しゃしん。

のりもの。

てつどう。

検索 検索

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

もっと見る

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

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

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