i-8jo.com（Yahoo!blog入門）

記事本文を飾り付けてみよう「（その１７）Wiki超入門７」

さて、今回は動画や音楽ファイルなどを表示するための[[embed()]]をご説明します。
難しいと思っている方もいるかもしれませんが、一つずつやっていけば必ず使えるようになります。
今回はまず、音楽ファイルを配置することからはじめてみましょう。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的な文法としては

[[embed(ファイルのアドレス)]]

です。

ファイルののアップロードの仕方は、こちらを参考にしてください。それでは、やってみましょう。

※今回はテスト用にサンプル音楽を用意しました。
サンプル音楽はRave-SLaveさんのサイトより利用させていただきました。

サンプル音楽ファイルのアドレス

http://www.geocities.jp/i_8jo/mp3/test.mp3

■音楽ファイルを配置する（簡易的な方法）

文法）
[[embed(http://www.geocities.jp/i_8jo/mp3/test.mp3)]]

結果）
http://www.geocities.jp/i_8jo/mp3/test.mp3
（※再生ボタンを押すと、音楽がスタートします。）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■音楽ファイルを配置する（自動で再生する方法）

文法）
[[embed(http://www.geocities.jp/i_8jo/mp3/test.mp3,true)]]

文法2）
[[embed(http://www.geocities.jp/i_8jo/mp3/test.mp3,true loop=true)]]

（※注　上の文法でうまく自動再生されない場合は、文法2のように"loop=true"を追加してみてください。なお、その場合は前に" "（半角スペース）を入れてください。）

結果）
※自動で音楽が再生されると迷惑な場合があるので、ここでは再生しません。ご自分で試してみてください。
※音楽の自動再生は嫌われる場合があるので、あまりお勧めできません。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

簡単ですね。この[[embed()]]文法を利用すれば、かなり色々なことが出来るようになってきます。
一歩先行くブログ作りに、みなさんも是非使ってみてくださいね。

次回はFlashファイルを表示させる方法をご紹介したいと思います。

>>記事本文を飾り付けてみよう（その１８）Wiki超入門８

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

記事本文を飾り付けてみよう「（その１６）Wiki超入門６」

さて、前回に引き続き[[attached()]]文法のご説明をしたいと思います。今回はこの文法を使用して画像の配置変えや、文字の回りこみ（画像の隣に文字を流し込むこと）をやる方法をご説明したいと思います。
それでは、始めましょう。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的な文法としては

[[attached(画像番号,配置する場所)]]

（※注　画像番号と配置する場所の間には","(半角カンマ)が入っています）
です。

画像のアップロードの仕方は、
Yahoo!blogをはじめてみましょう「（その４）画像を投稿してみよう前編」
を参考にしてください。

■画像を左に配置する（配置は"left"を指定）

文法）
[[attached(1,left)]]
（※画像番号1を左配置に指定した場合）

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を中央に配置する（配置は"center"を指定）

文法）
[[attached(2,center)]]
（※画像番号2を中央配置に指定した場合）

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を右に配置する（配置は"right"を指定）

文法）
[[attached(3,right)]]
（※画像番号3を右配置に指定した場合）

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

（※注　1枚の画像に対して、指定できる位置は1つだけです。同じ画像を別な位置に貼り付けたい場合は、同じものを複数アップロードしてください。）

以上のように配置を"left"か"right"に指定すると、自動的に文字が回りこむようになります。

■画像を左に配置し、文字の回りこみをする（配置は"left"を指定）

文法）
[[attached(1,left)]]
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。

結果）

文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を中央に配置する（配置は"center"を指定）

文法）
[[attached(2,center)]]
画像の隣に文字は回りこみません。

結果）

画像の隣に文字は回りこみません。

（※中央配置だと自動的に余白が少し入ります。）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を右に配置し、文字の回りこみをする（配置は"right"を指定）

文法）
[[attached(3,right)]]
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。

結果）

文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。
文字列が隣に回りこむようになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以上のように、配置に"left"や"right"を指定すると、自動的に文字が回りこんでしまう為、写真の下に文字を表示したい時には、写真の縦の大きさ分だけ改行して調整する必要があります。

■画像を左に配置し、文字の回りこみをさせない（配置は"left"を指定）

文法）
[[attached(1,left)]]

文字を回りこませないためには、ここから本文を書き始めます、、、。

（※注　この写真の場合、改行を15行入れています。すると、以下のような表示になります。）

結果）

文字を回りこませないためには、ここから本文を書き始めます、、、。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を右に配置し、文字の回りこみをさせない（配置は"right"を指定）

文法）
[[attached(3,right)]]

文字を回りこませないためには、ここから本文を書き始めます、、、。

（※注　この写真の場合、改行を15行入れています。すると、以下のような表示になります。）

結果）

文字を回りこませないためには、ここから本文を書き始めます、、、。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

説明が長くなってしまいました。
文字を回り込ませたくない場合は改行が少し面倒ですが、文字の回りこみを気にしなければ、この[[attached()]]文法はとても便利だと思います。みなさんも是非使ってみてくださいね。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

記事本文を飾り付けてみよう「（その１５）Wiki超入門５」

今回は前回と少し違った画像の貼り付け方を紹介します。実を言うと、前回の方法よりもこちらの方が簡単です。

前回解説した画像の貼り付け方だと、画像のサイズなどを変えることが出来ますが、右揃えや中央揃え、または文字の回りこみをすることが出来ませんでした。

今回ご紹介する文法の特徴としては、

１、連続して画像を投稿する時にわざわざアドレスを調べる必要がない。
２、画像の右揃え・中央揃えなどが指定できる。
３、文字の回りこみ（画像の隣に文字を流し込むこと）が出来る。

等があります。

今回は画像の指定の仕方と、連続して指定する方法をご説明します。
それでは、始めましょう。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

まず、基本的な文法としては

[[attached(画像番号)]]

（※注　画像番号とは、画像をアップロードした順番です）
です。

画像のアップロードの仕方は、
Yahoo!blogをはじめてみましょう「（その４）画像を投稿してみよう前編」
を参考にしてください。

■画像を貼り付ける（簡易的なやり方）

文法）
[[attached(1)]]
（※画像番号1を指定した場合）

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を貼り付ける（連続して張り付ける）

文法）
[[attached(1)]]
[[attached(2)]]
[[attached(3)]]

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■画像を貼り付ける（好きな順番で貼り付ける）

文法）
[[attached(1)]]
[[attached(3)]]
[[attached(2)]]
[[attached(3)]]
[[attached(1)]]
（※画像の順番をよく見てくださいね。）

結果）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしたか？とても簡単ですね。
画像のサイズ指定や、説明文が必要なければ、こちらを利用する方が簡単だと思います。

次回は、この[[attached()]]文法をもう少し深く説明したいと思います。

>>記事本文を飾り付けてみよう（その１６）Wiki超入門６

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

ｈｔｍｌテスト

文法　（スピード3に設定した場合）
<Marquee scrollamount="3" truespeed> 3 </Marquee>

下は動いている数字が設定値です。


設定なし



3



5



10



20



30



40

wikiテスト

アバター張りつけのテストをしてみます。

i_8jo