黄色い蛇足＠日立柏酒場裏

2019年9月以降は、https://reywa.blog.fc2.com をメイン（主たる）・ブログとします。

過去の投稿日別表示

[ リスト | 詳細 ]

2009年05月09日

← 2009年5月8日 | 2009年5月10日 →

全2ページ

[1] [2]

[ 次のページ ]

wiki文法で画像を表で囲む

　この記事は、ｒｕｎさんの記事

wiki文法で画像を表で囲む
http://blogs.yahoo.co.jp/run_7stars/12032064.html

を私のブログに転載しようとしたところ、

2009年3月16日に発生した、ヤフー・ブログのプログラム・ミス（転載時）
http://blogs.yahoo.co.jp/ubiquitous_budda/56968509.html

で書いた事情で、記事の体裁が崩れてしまう為（そのまま転載した記事は、http://blogs.yahoo.co.jp/ubiquitous_budda/56960969.html ）、出来るだけ同じになる様、私の方で、元の文章や素材を使い、ＵＰし直したものです。

　残念ながら、上で書いた様な事情で、この記事を転載しても、今のところは、同じ様に体裁が崩れてしまいます。

　が、元記事が2009年5月30日で閉鎖する予定の為、今の段階で、確認の上、ＵＰするものです。元記事のリンクは、元記事のブログ閉鎖後は、意味を成さなくなると考えますので、私のブログに転載もしくはコピペした記事に置き換えています。

　☆★☆★☆

wiki文法で画像を表で囲む

画像だけではなんか物足りないって思うときありますよね。
そこで画像を表で囲んで見やすいようにしたいと思います。
wiki文法使用にチェックを入れてください。
画像の位置については

wiki文法で画像の位置を指定する
http://blogs.yahoo.co.jp/ubiquitous_budda/57506066.html

をご覧ください。

囲みたい画像を画像添付で指定してください。


まず普通に囲ってみます。
||[[attached(１,left)]]||ワンコ画像使ってみました。ちゃんとできてますか？||

イメージ 1 ワンコ画像使ってみました。ちゃんとできてますか？
↑これでも良いのですが、端に行くまで文字が改行できません。


なので幅を指定してみました。
　　　　↓背景色　　　↓幅　　　　　　　　　　　↓画像位置(数字も半角)　　　　　　　↓文字
||||<#ff00ff'style='width:180px;``[[attached(１,left)]]ワンコ画像を使ってみました。ちゃんとできてますか？||
イメージ 1ワンコ画像を使ってみました。ちゃんとできてますか？

ff00ffの部分は背景色を決めている部分です、ここを変えれば背景色が変わります。

||<#ff0000'style='width:180px;``[[attached(１,left)]]うまく幅を指定すれば改行がされます。背景色も変えられます。||
イメージ 1うまく幅を指定すれば改行がされます。背景色も変えられます。

並べたりもできます

`イメージ 1ワンコ画像を使ってみました。ちゃんとできてますか？`イメージ 1ワンコ画像を使ってみました。ちゃんとできてますか？イメージ 1ワンコ画像を使ってみました。ちゃんとできてますか？

　☆★☆★☆

　この記事の、書き方のうち

[[attached(１,left)]]

の部分は、wiki文法が動作しない様に、数字を全角に替えて書いています。ですので、コピペして使わずに、そのままキーボードで入力するか、コピペした場合は数字の部分を半角に変えてください。

　☆★☆★☆

　もっとも、ヤフー・ブログがサポート対象としているのは、http://help.yahoo.co.jp/help/jp/blog/blog-47.html に記載されているものが全てであり、上の書き方はサポート対象外になります。

　それ故に、ケータイからwebブラウザを使わずに、こうした記事を閲覧した場合、

wiki文法　||<#ほにゃらら のヤフー・ブログでの問題点
http://blogs.yahoo.co.jp/ubiquitous_budda/57366236.html

で書いた様な問題が発生します。しかし、同じ記事で、その問題点を回避する方法も示していますので、参考にしてください。

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

wiki文法で画像を枠で囲む

　この記事は、ｒｕｎさんの記事

wiki文法で画像を枠で囲む
http://blogs.yahoo.co.jp/run_7stars/12032999.html

を私のブログに転載しようとしたところ、

2009年3月16日に発生した、ヤフー・ブログのプログラム・ミス（転載時）
http://blogs.yahoo.co.jp/ubiquitous_budda/56968509.html

で書いた事情で、記事の体裁が崩れてしまう為（そのまま転載した記事は、http://blogs.yahoo.co.jp/ubiquitous_budda/56961023.html ）、出来るだけ同じになる様、私の方で、元の文章や素材を使い、ＵＰし直したものです。

　残念ながら、上で書いた様な事情で、この記事を転載しても、今のところは、同じ様に体裁が崩れてしまいます。

　が、元記事が2009年5月30日で閉鎖する予定の為、今の段階で、確認の上、ＵＰするものです。元記事のリンクは、元記事のブログ閉鎖後は、意味を成さなくなると考えますので、私のブログに転載もしくはコピペした記事に置き換えています。

　☆★☆★☆

wiki文法で画像を枠で囲む

今度は画像を枠で囲みたいと思います
wiki文法使用にチェックを入れてください。

画像の位置については

wiki文法で画像の位置を指定する
http://blogs.yahoo.co.jp/ubiquitous_budda/57506066.html

をご覧ください。枠については

wiki文法で枠を作る
http://blogs.yahoo.co.jp/ubiquitous_budda/57505009.html

をご覧ください。

囲みたい画像を画像添付に開いてください。

↓枠の種類です　border：の後につけたい枠の種類をいれてください。

double
solid
dashed
dotted
ridge
groove
inset
outset


まずsolidの枠で囲んでみたいと思います。
　　　　　　　　　　　枠の、種類 太さ 色
||||<#FFFFFF'style='border:solid 20px red;color:Aqua;font-size:5pt'``[[attached(１,left)]]||

イメージ 1
囲んでみました。
　上の指定のborder:solid 5px red のborder:の後の部分は、枠の種類（上記）、太さ（ピクセルで指定）、色を指定している訳です。

文字も入れてみましょう。
ついでに、枠の太さを１０ｐｘに変えてみます。

　　　　　　　　　　　　枠の、種類 太さ 色；文字の色
||||<#FFFFFF'style='width:180px;border:solid 10px red;color:blue;font-size:10pt'``[[attached(１,left)]]画像に枠をはめてみました||

イメージ 1画像に枠をはめてみました
border:の後の、color:blueの部分が文字の色を青と指定していることになる訳です。


背景色も変えてみましょう。枠を２０ｐｘと云うメチャクチャ太めにしてみます。後で枠の種類を変えた際に、違いを判りやすくするためです。


最初に１６進法で色を指定
||||<#FFFF00'style='width:180px;border:solid 20px red;color:blue;font-size:10pt'``[[attached(１,left)]]画像に枠をはめてみました||

イメージ 1画像に枠をはめてみました

変わりました。最初の#FFFF00が背景色（全体の色）を指定しています。この指定方法については、

wiki文法の色の仕組みについて
http://blogs.yahoo.co.jp/ubiquitous_budda/56956553.html

をご覧下さい。


他の枠でも作ってみましょう。元の記事では、様々に色や枠の太さを変えていますが、比較を容易にするため、ここでは、同じ太さ（＝２０ｐｘ）、同じ色で行います。

イメージ 1画像に枠をはめてみました doubleの枠
イメージ 1画像に枠をはめてみました dashedの枠
イメージ 1画像に枠をはめてみました dottedの枠

　ここまでは、枠の形状自体が違います。以下は、枠の影の付き方が違うのですが…何の意味があるのか、よほど太くしないと、差は判らないかも知れません。そこで、枠の太さを３０ＰＸにまで太くしてみます。
　色々、色なんかも変えて、自分でテストしてみてください。すると、使い途が出て来るのかも…。

イメージ 1画像に枠をはめてみました ridgeの枠
イメージ 1画像に枠をはめてみました grooveの枠
イメージ 1画像に枠をはめてみました insetの枠
イメージ 1画像に枠をはめてみました outsetの枠

　☆★☆★☆

この記事の、書き方のうち

[[attached(１,left)]]

の部分は、wiki文法が動作しない様に、数字を全角に替えて書いています。ですので、コピペして使わずに、そのままキーボードで入力するか、コピペした場合は数字の部分を半角に変えてください。

　☆★☆★☆

　もっとも、ヤフー・ブログがサポート対象としているのは、http://help.yahoo.co.jp/help/jp/blog/blog-47.html に記載されているものが全てであり、上の書き方はサポート対象外になります。

　それ故に、ケータイからwebブラウザを使わずに、こうした記事を閲覧した場合、

wiki文法　||<#ほにゃらら のヤフー・ブログでの問題点
http://blogs.yahoo.co.jp/ubiquitous_budda/57366236.html

で書いた様な問題が発生します。しかし、同じ記事で、その問題点を回避する方法も示していますので、参考にしてください。

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

wiki文法で画像の位置を指定する

　この記事は、ｒｕｎさんの記事

wiki文法で画像の位置を指定する
http://blogs.yahoo.co.jp/run_7stars/10331890.html

を私のブログに転載しようとしたところ、

2009年3月16日に発生した、ヤフー・ブログのプログラム・ミス（転載時）
http://blogs.yahoo.co.jp/ubiquitous_budda/56968509.html

で書いた事情で、記事の体裁が崩れてしまう為（そのまま転載した記事は、http://blogs.yahoo.co.jp/ubiquitous_budda/56959377.html ）、出来るだけ同じになる様、私の方で、元の文章や素材を使い、ＵＰし直したものです。

　残念ながら、上で書いた様な事情で、この記事を転載しても、今のところは、同じ様に体裁が崩れてしまいます。

　が、元記事が2009年5月30日で閉鎖する予定の為、今の段階で、確認の上、ＵＰするものです。一部、元記事で、意図する表示になっていないものがあると考えますので、その部分は「私（＝レイ豚）の考えるところに従い」修正しました。

　☆★☆★☆

画像の位置を指定の位置にする


画像を添付して、そのまま記事をＵＰすると１番上に画像が表示されますよね。


wiki文法を使って好きな場所に表示させるにはまずwiki文法使用にチェックを入れてください。

画像添付の所に画像を開いておき、本文中の表示させたい所に文中

[[attached(１)]]

と入れてみてください(数字も半角で)。

今までは一番上に表示されていたのが、文章の間とかに写真をＵＰすることができます。

さらに応用です。
今度は記事の右側や左側に指定する場合です。

[[attached(１,位置)]]

とします。

例えば



  ←複数UPしたときに２枚目の画像を真ん中に持ってくる場合

数字、位置は半角で入れてください。

試しに画像を左に表示しました

イメージ 1

( )の中の１は１枚目の画像の位置の指定ということです。
位置を指定しないなら、コンマ以下を除き、

[[attached（1)]]

とすれば、

[[attached（1,left)]]

と同様に表示されます。つまり、左に寄せる場合は、指定しても指定しないでも、同じことです。

位置のところは右に表示させたい場合はright　左はleft　真ん中はcenterとします。

画像を複数ＵＰさせる場合は２枚めは

[[attached（2,位置)]]

以降３枚目なら

[[attached（3,位置)]]

４枚目なら

[[attached（4,位置)]]

としてください。

　☆★☆★☆

この記事の、

[[attached（1,left)]]

と云うところは、wiki文法が動作しない様に、一部を全角に替えて書いています。ですので、コピペして使わずに、そのままキーボードから見えたままを半角で入力してください。

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

wiki文法で画像を並べる

　この記事は、ｒｕｎさんの記事

wiki文法で画像を並べる
http://blogs.yahoo.co.jp/run_7stars/12316765.html

を私のブログに転載しようとしたところ、

2009年3月16日に発生した、ヤフー・ブログのプログラム・ミス（転載時）
http://blogs.yahoo.co.jp/ubiquitous_budda/56968509.html

で書いた事情で、記事の体裁が崩れてしまう為（そのまま転載した記事は、http://blogs.yahoo.co.jp/ubiquitous_budda/56961027.html ）、出来るだけ同じになる様、私の方で、元の文章や素材を使い、ＵＰし直したものです。

　残念ながら、上で書いた様な事情で、この記事を転載しても、今のところは、同じ様に体裁が崩れてしまいます。

　が、元記事が2009年5月30日で閉鎖する予定の為、今の段階で、確認の上、ＵＰするものです。

　☆★☆★☆

wiki文法で画像を並べる


wiki文法を使ってＵＰした画像を並べたいと思います。

今回も使うのはこの画像です。イメージ 1

いつものようにwiki文法使用にチェック!!

画像添付にＵＰしたい画像を開いておきます。
[[attached(１)]][[attached(１)]][[attached(１)]][[attached(１)]][[attached(１)]][[attached(１)]]
↑こうすると
イメージ 1イメージ 1イメージ 1イメージ 1イメージ 1イメージ 1
↑こうなります。(数字も半角で!!)画像の大きさによっては並べられません。



複数の違う画像を並べたい場合は
 [[attached(１)]][[attached(２)]][[attached(１)]][[attached(２)]]
１は１枚目のＵＰ画像、２は２枚目のＵＰ画像です。以降３、４としてください。
イメージ 1イメージ 2イメージ 1イメージ 2

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

▒便利サイト▒【Yahoo!BLOGS 用「Wiki文法タグ自動作成」β版 】

今回紹介する便利サイトは、我ら経営のYahooブログのWiki文法作成の補助をするサイトです。

☆...リンク...*

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

Yahoo!JAPAN

☆...使い方...*

�，泙困肋紊�らWiki文法タグ自動作成β版に行きましょう...((((=・o・)ノ

�⊂紊�ら下まで(｀□´)/ダァァーっと色々あります。ここでは説明しきれないのでしませんが、大体は分かります。

��Wiki文法にあまり詳しくない人もこれを使えばWiki文法のプロになれるでしょう！

ブログを経営している皆さんの補助になるでしょう♪
転載するときはコメント⇒Internet Skiller　　　　　　傑作ポチ押してね( /・ω・)/

転載元転載元: ☆»I n t e r n e t S k i l l e r

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

全2ページ

[1] [2]

[ 次のページ ]

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

.
レイ豚
レイ豚
非公開 / 非公開
人気度
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
31

最新のコメント

最新のトラックバック

過去の記事一覧

スマートフォンで見る

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

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

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

もっと見る

[PR]お得情報

いまならもらえる！ウィスパーＷガード
薄いしモレを防ぐパンティライナー
話題の新製品を10,000名様にプレゼント
ふるさと納税サイト『さとふる』
11／30まで５周年記念キャンペーン中！
Amazonギフト券1000円分当たる！
いまならもらえる！ウィスパーうすさら
薄いしモレを防ぐ尿ケアパッド
話題の新製品を10,000名様にプレゼント

その他のキャンペーン

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

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

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