Wiki 練習１０記事に見出しを入れよう

画面右上　Wiki文法使用欄の□にチェックをいれる
入力はすべて半角
（下記設定例では、＝は全角で説明しますが実際の入力は半角で行います。
　また　＝符号や　＝符号と文字の間も半角スペースで行う）

もうすぐ春ですネ　というフレーズを見出しにしてみよう。

＝符号の組みあわせだけですので超・簡単です

■■■　では、はじめてみよう　■■■

設問１　文字を大きくし、青色にする

　　　　　書式　　＝　もうすぐ春ですネ　　＝

　　　　　　
?H1>もうすぐ春ですネ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

設問２　文字を青色にする

　　　　　書式　　＝＝＝　もうすぐ春ですネ　＝＝＝

もうすぐ春ですネ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

設問３　文字を小さくし、青色にする

　　　　　書式　　＝＝＝＝＝　もうすぐ春ですネ　＝＝＝＝＝

もうすぐ春ですネ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

設問４　文字を白抜きにする

　　　　　書式　　＝＝　もうすぐ春ですネ　＝＝

もうすぐ春ですネ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

設問５　文字を小さくし、白抜きにする

　　　　　書式　　＝＝＝＝　もうすぐ春ですネ　＝＝＝＝

もうすぐ春ですネ

コメント（3）

トラックバック（0）

Wiki 練習９複数画像のマルチ表示をしてみよう

画面右上　Wiki文法使用欄の□にチェックをいれる
入力はすべて半角
（下記設定例は半角を使用していない箇所があります）

あらかじめ、写真9枚を用意しておきましょう。下記（注）参照

（注）実験は、ひとつの画像サイズは横180px　縦135px（自動調整）で行ないました。　
　　特に横のサイズがこれ以上大きいとブログ画面からはみだします。
　　また、写真はすべて同サイズのほうが見栄えがします。
　　　

画像９面のマルチ表示をしてみよう

設定1　　横３画像　ｘ　縦３画像　
　
[[attached(画像1)]][[attached(画像2)]][[attached(画像3)]]
[[attached(画像4)]][[attached(画像5)]][[attached(画像6)]]
[[attached(画像7)]][[attached(画像8)]][[attached(画像9)]]

上記公式では半角スペースで区切らない、行間をあけないことがポイント

設定２　写真1枚毎に区切って表示

[[attached(画像1)]] [[attached(画像2)]] [[attached(画像3)]]
[[attached(画像4)]] [[attached(画像5)]] [[attached(画像6)]]
[[attached(画像7)]] [[attached(画像8)]] [[attached(画像9)]]

上記公式では半角スペースで区切ることがポイント

設定１（縁なし９面マルチ）の結果はこのようになります

設定２（縁あり９面マルチ）の結果はこのようになります

コメント（5）

トラックバック（1）

Wiki練習⑧ 枠つき画像を複数表示

画面右上　Wiki文法使用欄の□にチェックをいれる
入力はすべて半角
（下記設定例は半角を使用していない箇所があります）

枠つきの画像を横にできるだけ並べて表示しよう

｜｜<#FFFFFF'||

｜｜<#colorcode'[[attached(写真番号１)]]

｜｜<#colorcode'[[attached(写真番号２)]]

｜｜<#colorcode'[[attached(写真番号３)]]

｜｜<#colorcode'[[attached(写真番号４)]]

｜｜<#FFFFFF'||

１つ目の枠の色を黄色（colorcode #ffff00)
２つ目の枠の色を緑色（colorcode #008000)
３つ目の枠の色を赤色（colorcode #ff0000)
４つ目の枠の色をアクア色（colorcode #00ffff)としてみます。

写真は全て同一サイズにした方が見栄えがすると思います。
ちなみに、この見本写真のサイズは　１１７ｘ８８ピクセル
練習につき同じ写真を使用します。

結果

試しに、この画像を５つ並べましたがブログ画面を越えてしまいました。
この見本写真サイズの大きさでは横４列が精一杯のようです。

コメント（0）

トラックバック（0）

Wiki練習⑦ 枠つき画像を並列表示

画面右上　Wiki文法使用欄の□にチェックをいれる
入力はすべて半角
（下記設定例は半角を使用していない箇所があります）

枠つきの画像を横に2つ並べて表示しよう

||<#FFFFFF' `|| ||<#colorcode'`[[attached(写真番号１)]]

||<#colorcode' `[[attached(写真番号２)]] ||<#FFFFFF'`||

１つ目の枠の色を黄色（colorcode #ffff00)
２つ目の枠の色を緑色（colorcode #008000)

結果

コメント（0）

トラックバック（0）

Wiki練習⑥ 文字に背景をつけ、枠で囲む

画面右上　Wiki文法使用欄の□にチェックをいれる
入力はすべて半角
（下記設定例は半角を使用していない箇所があります）

文字に背景をつけ、枠で囲んでみよう

二宮町体育指導委員連絡協議会を文字で囲む

｜｜<#000080'style='border:solid 10px #0000ff;font:bold 30px;color:#ffffff'二宮町体育指導委員連絡協議会｜｜

｜｜の実際の入力は半角で

枠の種類　solid（基本線）　
枠色　青　　#0000ff　　枠線サイズ　10px
文字白　　 #ffffff　　サイズ　　　30px
背景濃紺　 #000080

上記条件で設定した結果

二宮町体育指導委員連絡協議会

下記の３パターンは、背景色や文字色そして枠の線種をいろいろなパターンで指定をし実験した結果です。

背景・黄色(#ffff00)、枠は額縁(ridge)・ライム色(#00ff00)、文字・黒(#000000)の結果

二宮町体育指導委員連絡協議会

背景・灰色(#808080)、枠は額縁(ridge)・アクア色(#00ffff)、文字・赤(#ff0000)の結果

二宮町体育指導委員連絡協議会

背景・灰色(#808080)、枠は浮出し(outset)・アクア色(#00ffff)、文字・赤(#ff0000)の結果

二宮町体育指導委員連絡協議会

額縁(ridge)や浮出し(outset)は立体的に表現されるため、濃い色（黒や濃紺など）を指定することは勧められません。なぜならば、濃い色を指定すると立体的な陰影が表現できない

日	月	火	水	木	金	土
					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

超初心者が綴るWiki実例

Wiki文法やHTML、画像、文章修飾などをマスターするまでの実験用です

もうすぐ春ですネ

もうすぐ春ですネ

もうすぐ春ですネ

もうすぐ春ですネ

画像９面のマルチ表示をしてみよう

上記公式では半角スペースで区切らない、行間をあけないことがポイント

上記公式では半角スペースで区切ることがポイント

設定１（縁なし９面マルチ）の結果はこのようになります

設定２（縁あり９面マルチ）の結果はこのようになります

トラックバックされた記事

枠つきの画像を横にできるだけ並べて表示しよう

結果

枠つきの画像を横に2つ並べて表示しよう

結果

文字に背景をつけ、枠で囲んでみよう

上記条件で設定した結果

背景・黄色(#ffff00)、枠は額縁(ridge)・ライム色(#00ff00)、文字・黒(#000000)の結果

背景・灰色(#808080)、枠は額縁(ridge)・アクア色(#00ffff)、文字・赤(#ff0000)の結果

背景・灰色(#808080)、枠は浮出し(outset)・アクア色(#00ffff)、文字・赤(#ff0000)の結果

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

最新の記事一覧

最新のコメント

最新のトラックバック

過去の記事一覧

Yahoo!からのお知らせ

スマートフォンで見る

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