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

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

今回は画像を貼り付ける方法をご紹介します。
画像を文の一番上に表示させるだけならば、アップロードするだけでいいのですがここでは文中に貼り付ける方法をご紹介します。
それでは、早速やってみましょう。

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

基本的な文法としては

[[img(画像のアドレス,横の大きさ,縦の大きさ,説明文)]]

（※注　それぞれの間は","(半角カンマ)で区切っています。）
です。

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

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

文法）
[[img(http://img.blogs.yahoo.co.jp/ybi/1/58/7d/i_8jo/folder/79519/img_79519_217712_0?1109361546)]]

結果）

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

■画像を貼り付ける（画像の横の大きさで指定する）

文法）
[[img(http://img.blogs.yahoo.co.jp/ybi/1/58/7d/i_8jo/folder/79519/img_79519_217712_0?1109361546,300)]]
（※ここでは横の大きさ300ピクセルで指定。540ピクセルを限度にした方が良いようです。）

結果）

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

■画像を貼り付ける（画像の縦の大きさで指定する）

文法）
[[img(http://img.blogs.yahoo.co.jp/ybi/1/58/7d/i_8jo/folder/79519/img_79519_217712_0?1109361546, ,100)]]
（※ここでは縦の大きさ100ピクセルで指定。）
（※注　横の大きさの部分に" "(半角スペース)が入っています。）}

結果）

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

■画像を貼り付ける（画像の縦横の大きさを指定する）

文法）
[[img(http://img.blogs.yahoo.co.jp/ybi/1/58/7d/i_8jo/folder/79519/img_79519_217712_0?1109361546,300,100)]]
（※ここでは横の大きさ300ピクセル、縦の大きさ100ピクセルで指定。意図的に変形させたい場合などは、このように縦横共に指定します。）

結果）

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

■画像を貼り付ける（画像に説明文を入れる）

文法）
[[img(http://img.blogs.yahoo.co.jp/ybi/1/58/7d/i_8jo/folder/79519/img_79519_217712_0?1109361546, , ,これは花畑の画像です。)]]
（※注　横の大きさ・縦の大きさの部分に" "(半角スペース)が入っています。）}

結果）

（※カーソルを画像に合わせ少し待つと、説明文が現れます）

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

■画像を貼り付ける（すべてを指定する）

文法）
[[img(http://img.blogs.yahoo.co.jp/ybi/1/58/7d/i_8jo/folder/79519/img_79519_217712_0?1109361546,300,100,これは花畑の画像です。)]]

結果）

（※カーソルを画像に合わせ少し待つと、説明文が現れます）

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

如何でしたか？文中に画像を貼り付けられると表現も豊かになると思います。
いろいろと試してみてくださいね。

余談ですが、説明文を入れておくとYahoo!JAPANやgoogleの画像検索などにおいて、そのキーワードで検索対象となります。また、目が見えない方がネットをする時に、音声にて何の画像なのかを知る事ができます。
ちょっと面倒ですけど、入れておくといろんな方に優しいページになるということですね。

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

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

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

今回はリンクを張ってみたいと思います。
飾りつけとは違いますが、Wiki入門の流れで！

リンクとは？
ポチっと押すとビヨーンとページがジャンプするあれのことです。

リンクを張るのは簡単です。ただ、リンクを張りたいだけならばアドレスを記入するだけ!

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

■リンクを張る１（簡易的なやり方、これで十分！）

文法）
http://www.yahoo.co.jp

結果）
http://www.yahoo.co.jp

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

■リンクを張る２（Yahoo!blogのヘルプで紹介している方法）

文法）
[http://www.yahoo.co.jp]

結果）
http://www.yahoo.co.jp

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

■リンクを張る３（文字にリンクを張る方法）

文法）
[http://www.yahoo.co.jp ヤフージャパン]
（アドレスと文字列の間に" "（半角スペース）が入っていることに注意してください。）

結果）
ヤフージャパン

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

■リンクを張る４（簡易的にメールを相手に送ってもらう方法）

文法）
[mailto:[e-mail]] （"mailto:" + メールアドレス)

結果）
mailto:[e-mail]

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

■リンクを張る５（文字列をクリックして、メールを相手に送ってもらう方法）

文法）
[mailto:[e-mail] お問い合わせはこちら]
（アドレスと文字列の間に" "（半角スペース）が入っていることに注意してください。）

結果）
お問い合わせはこちら

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

リンクも簡単ですね。
メールを送ってもらう方法は便利ではありますが、現在はウィルスなどが多いためあまりお勧めできません。最近はメールアドレスは極力公開しないような方向に行っているようです。

[お願い]
この記事が参考になりましたら、右下のボタンを押して頂けるとありがたいです。

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

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

今回も、「Wiki文法」についてご説明します。
前回に引き続き簡単です。

それでは、どんどん説明していきましょう。

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

■引用1（字に薄緑色の背景色をつける）

文法）
{{{こんにちは、今日もお元気ですか}}}

結果）
こんにちは、今日もお元気ですか

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

■引用２（字を灰色の枠で囲み、薄灰色の背景をつける）

文法）
{{{:
こんにちは、今日もお元気ですか
}}}
（{{{の後に":"(コロン）が入っていることに注意してくだい）

結果）

こんにちは、今日もお元気ですか

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

■引用３（字を薄緑色の枠で囲み、肌色の背景をつける）

文法）
{{{
こんにちは、今日もお元気ですか
}}}

結果）

こんにちは、今日もお元気ですか

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

第二段も簡単ですね。
あまり使い勝手良いとも思えませんが、うまく利用すれば文章にメリハリを着けることができると思います。いろいろな記事でどんどん試してみてくださいね。

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

[お願い]
この記事が参考になりましたら、右下のボタンを押して頂けるとありがたいです。

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

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

今回は、Yahoo!blogで利用できる「Wiki文法」についてご説明します。
ここまでHTMLをやってきているので、簡単だと思います。

それでは、どんどん説明していきましょう。

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

■太字（文字を太くする）

文法）
'''こんにちは'''

結果）
こんにちは

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

■斜体（文字を斜体にする）

文法）
''こんにちは''

結果）
こんにちは

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

■見出し１（字のサイズを大きく青色にする）

文法）
= こんにちは =
（=と文字の間に" "(半角スペース）が入っていることに注意してくだい）

結果）

こんにちは

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

■見出し２（字のサイズは中間で白色にする）

文法）
== こんにちは ==
（=と文字の間に" "(半角スペース）が入っていることに注意してくだい）

結果）

こんにちは

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

■見出し３（字のサイズは中間で青色にする）

文法）
=== こんにちは ===
（=と文字の間に" "(半角スペース）が入っていることに注意してくだい）

結果）

こんにちは

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

■見出し４（字のサイズを小さく白色にする）

文法）
==== こんにちは ====
（=と文字の間に" "(半角スペース）が入っていることに注意してくだい）

結果）

こんにちは

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

■見出し５（字のサイズを小さく青色にする）

文法）
===== こんにちは =====
（=と文字の間に" "(半角スペース）が入っていることに注意してくだい）

結果）

こんにちは

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

Wiki入門第一弾は如何でしたか？今までHTMLをやってきているので簡単ですね。
でも、いまいち使いにくい気がするのはワイだけでしょうか？

とりあえず、いろいろな記事でどんどん試してみてくださいね。

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

[お願い]
この記事が参考になりましたら、右下のボタンを押して頂けるとありがたいです。

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

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

今回は「Marqueeタグ」応用編です。
いろいろと複雑な組み合わせもありますが、基本は簡単なのでめげずにやってみてください。

それでは早速、タグと結果を見てみましょう。

※注）本文にHTMLを適用させたいときは、右上のwiki文法使用のチェックは外しておいてください。



■[縦と横の動きの組み合わせ]

◇縦の動き

縦の動き


＋
◇横の動き

横の動き


↓↓↓

文法）
<Marquee direction="up" height="50"><Marquee> 縦と横の動きの組み合わせ </Marquee></Marquee>

結果）　

縦と横の動きの組み合わせ


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

■[縦と横の動きの組み合わせ２]

◇縦の動き

縦の往復


＋
◇横の動き

横の往復


↓↓↓

文法）
<Marquee behavior="alternate" direction="up" height="50"><Marquee behavior="alternate"> 縦と横の動きの組み合わせ２ </Marquee></Marquee>

結果）　

縦と横の動きの組み合わせ２


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

■[色との組み合わせ]

文法）
<Marquee direction="up" height="50" bgcolor=#0000> <font color=#ffff00> 色との組み合わせ </font> <font color=#ff0000> 色との組み合わせ </font> <font color=#00ff00> 色との組み合わせ </font> <font color=#00ffff> 色との組み合わせ </font> </Marquee>

結果）　


色との組み合わせ



色との組み合わせ



色との組み合わせ



色との組み合わせ




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

注）このタグはもしかしたら、ブラウザ（インターネットエクスプローラ、Opera、Firefoxなど）によってはうまく表示されない場合があるかもしれません。

いろいろなタグの組み合わせ、如何だったでしょうか？
Yahoo!blogで利用できるタグは大体こんなもののようです。
まだ、あるようでしたらぜひ教えてくださいね。



[お願い]
この記事が参考になりましたら、右下の[傑作]ボタンを押して頂けるとありがたいです。

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