>
- コンピュータとインターネット
>
- インターネット
>
- その他インターネット
+ 簡単Ｗｉｋｉ【便箋風・文法】
-
詳細
 先日、ある方から報告があり、私の◇◆背景Wiki設置方法◆◇基本編◇◆という記事の
サンプルに使用していた画像及び文法が『自作』として配布されている・・・という事を知りました。
こちらの画像はあくまでも、説明の為に私自身が素材屋様から画像をお借りして合成したものであり、
配布目的で作成したものではありません。
その事は、記事の結びで
『こちらの画像は説明用に作成したものですので、ご利用はお控え下さい。』
・・・の記述を以って示していたつもりだったのですが・・・。
しかも、私の画像のURLをそのまま使ってるのね。←直リンクですよね。
早速、そのお子チャマのブログに行き、言葉を選んで『内緒コメント』で注意を促したのですが・・・。
アハハ、全然『悪かった』なんて思ってないでしょ？
一応、彼女の名誉の為に？？彼女のブログのアドレスを晒す事は避けますが。
しかも、本人に注意されたにも関わらず、『自作発言』もそのまま・・・。
記事の削除もさらさらする気はないみたいね。
仕方ないので、ガッツリと画像を削除してURLを使えなくさせて頂きました。
私の内緒コメントもサックリ削除して来させて頂きました。
こちらの記事は知恵袋で紹介させて頂く事も多いので、多くの方に転載して頂いているものです。
転載元の画像を削除すると、当然転載先の記事の画像も消えてしまいますので、
かなり躊躇はしたのですが・・・。
実は、この画像、パクられたのは今回の1度だけでは無いので・・・・。
誠に不本意ながら、画像を差し替えさせて頂きました・・・。
今回の画像には大きく『SAMPLE』の文字を入れさせて頂いております。
素材屋様の素材にも若干文字がかかってしまっているので大変申し訳ないのですけどね・・・。
あの記事が必要な方は、大変お手数なのですが、下記リンクより再度転載をお願い申し上げます。
↑意味も無くデカ文字リンク・・・。
最近、常識もモラルも何も無いお子チャマブロガーが多く見受けられ、嘆かわしい限りですね。
そのお子チャマのブログでは、他のブロガーさんのTOP画像もしっかりパクられていました。
しかも、注意されると逆切れ状態？？？
もう、2度と関わりたくないお子チャマですねぇ・・・。
|
>
- コンピュータとインターネット
>
- インターネット
>
- ネットサービス
>
- コンピュータとインターネット
>
- インターネット
>
- ネットサービス
|
↑
私はIE8に変えたらマトモに見えるようになりました。（例に挙げてるWiki文法ね。。） この次の記事のアンケートに答えて下さった方、解決方法を教えて下さったこいもさん、 色々模索して下さった柊さん、ありがとうございました。m(_ _)m  ||<#FFFFFF'style='background-image:url(http://画像のURL);background-repeat:no-repeat;text-align:left;font-size:8pt;color:#000000;word-spacing:530px;vertical-align:left;background-position : left;' width=500px height=600px'``ココに文字|| 上のWiki文法らしきものはよく、知恵袋でお子チャマから質問の上がっている構文です。 （解りやすいように順番はあおいあ式に並び換えています。） コレを使っても背景画像が全部表示されないけど、どうしたらいいんですか？的な質問が殆どですね・・・。 背景画像が現れないのは当たり前。 画像の幅と高さを示す記述が無いのですから。 文末にそれらしき記述はありますが、今はwidth=500px height=600pxという 記述は反映されなくなっています。 どうせ書くのであれば、画像のサイズに合わせてwidth:500px;height:600pxと書かないとね。 で、vertical-align:left。 コレもおかしな記述なんですよね・・・。 verticalとは『垂直』という意味です。 『垂直』=『縦』の位置を指定する部分に『右』や『左』を指定するのはおかしな話でしょう？ 残るは・・・。 background-position : left;・・・。 コレって何だ？ 反映されないという事は知っていましたが・・・昨日、ある人に訊かれて『私も知らない・・・。』と いう事に気付きまして。(^^；) 少し調べてみる事にしました。 私が勉強させて頂いているとほほのスタイルシート入門さんにて・・・。
◆ background-position: position position (C1/e4/N6)
背景の横方向の位置を left（左端）、center（中央）、right（右端）または 50% のような割合で指定し、縦方向の位置を top（上端）、center（中央）、bottom（下端）または 50% のような割合で指定します。fixed と共に指定することにより、背景画像の表示位置を指定することができます。下記の例では、背景画像を中央にひとつだけ表示します。
BODY {
background-image: url(image/back.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
要するに、background-attachment:fixedと共に使わないと反映されないって事かな？ ちなみに、fixedを使うと、背景画像が固定され、その他の部分がスクロールする・・・という 動きをします。
||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_49225512_63?1256641774.png);background-attachment:fixed;vertical-align:text-top;width:530px;height:800px;text-align:center;font-family:"HGP創英角ﾎﾟｯﾌﾟ体";font-size:12pt;color:#000000;word-spacing:510px;line-height:20pt;border:double 5px #FF0000'`` ココに文字。 全角スペースで改行。 [[img(1,1)]]|| ↑
スクロールしてみて！ こんな感じの動きをします。 ||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_49225512_63?1256641774.png);background-repeat:no-repeat;background-attachment:fixed;background-position:center center;vertical-align:text-top;width:530px;height:800px;text-align:center;font-family:"HGP創英角ﾎﾟｯﾌﾟ体";font-size:12pt;color:#000000;word-spacing:510px;line-height:20pt;border:double 5px #FF0000'`` ココに文字。 全角スペースで改行。 [[img(1,1)]]||
||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_49225512_63?1256641774.png);background-repeat:no-repeat;background-attachment:fixed;background-position:right top;vertical-align:text-top;width:530px;height:800px;text-align:center;font-family:"HGP創英角ﾎﾟｯﾌﾟ体";font-size:12pt;color:#000000;word-spacing:510px;line-height:20pt;border:double 5px #FF0000'`` ココに文字。 全角スペースで改行。 [[img(1,1)]]|| な〜んにも反映されませんね。 fixedと一緒に使っても反映されないんだから、単に background-image:url(画像のURL)に使っても無意味・・・だと思います。 （間違っていましたらご指摘を〜！） 無駄な記述は出来るだけ・・・省きたいですね。 |
>
- コンピュータとインターネット
>
- インターネット
>
- ネットサービス
たっつんさんから頂いたご質問に回答させて頂きます。aoiAさんのおかげで画像を作成することが出来ましたっ!! ありがとうございます♪ ですが文字が。。 文法もよくわかってないのです((汗 アドバイス宜しくお願いしますっ＞＜! http://blogs.yahoo.co.jp/chipupupu333/24043474.html ↑画像です＞＜ 先日、◇◆背景Wiki設置方法◆◇応用編【狙った枡に文字入れ】◇◆という記事でざっくりと 背景Wikiに於いて好きな位置に文字入れする方法を説明させて頂きました。 今回はより文字位置を的確に把握する方法を説明させて頂きます。 �．好拭璽箱佑垢戮討離廛蹈哀薀燿優▲�セサリ⇒ペイントを開きます。 �▲侫．ぅ襤由�くで背景にしたい画像を開きます。 �（儼羨優�ャンバスの色とサイズをクリックして開き、画像のサイズを把握します。  ��画像の中の文字入れしたい枡の左上の辺りにマウスポインタします。  �１Σ爾諒�に「60,20」などのように数字が現れますのでそれを任意の場所にメモしておきます。 単純に文字を左寄せ、中央寄せ、右寄せにしたい場合は ・画像の横幅=width ・画像の縦幅=height で画像のサイズを表します。 ・word-spacingはwidth-20px程度に設定します。 ◆基本構文◆ ||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/fa/8a/chipupupu333/folder/1029811/img_1029811_24043474_0?1269078926.png);background-repeat:no-repeat;width:○○px;height:○○px;text-align:left;font-size:8pt;color:#FFFFFF;word-spacing:○○px;vertical-align:text-top'``ココに文字。|| ★今回のように微妙な位置に文字位置を指定したい場合は、 padding-leftとpadding-topという記述を用いて文字の書き出し位置をズラす必要があります。 ◆画像Data：横(width) 550px 縦(height) 470px◆ ◆基本構文◆ ||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/fa/8a/chipupupu333/folder/1029811/img_1029811_24043474_0?1269078926.png);background-repeat:no-repeat;padding-left:○○px;width:○○px;padding-top:○○px;height:○○px;text-align:left;font-size:8pt;color:#FFFFFF;word-spacing:○○px;vertical-align:text-top'``ココに文字。|| ＊padding-leftの数値+widthの数値=画像の横幅 ＊padding-topの数値+heightの数値=画像の縦幅 ＊widthの数値≧word-spacingの数値  ＊padding-left:60px・・・左から60pxの位置に。 padding-leftで文字位置を右にズラした分、widthの数値を減らします。 画像の横幅:550px-padding-left:60px=width:490px ＊word-spacingの数値はwidthと同数か10pxか20px程度少なくします。  ＊padding-top:20px・・・上から20pxの位置に。 padding-topで文字位置を下にズラした分、heightの数値を減らします。 画像の横幅:470px-padding-left:20px=width:450px こちらで割り出した数値を上記基本構文に当てはめます。
||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/fa/8a/chipupupu333/folder/1029811/img_1029811_24043474_0?1269078926.png);background-repeat:no-repeat;padding-left:60px;width:490px;padding-top:20px;height:450px;text-align:left;font-size:8pt;color:#000000;word-spacing:480px;vertical-align:text-top'``ココに文字。 全角スペースを入れる事で 改行出来ます。|| ＊こちらの画像はたっつんさんが作成されたものです。
無断で使用はなさらないようにお願い致します。 |
>
- コンピュータとインターネット
>
- インターネット
>
- ホームページ
