スプラシアでhtmlを利用して画像やFlashを埋め込みたいなぁ＾ρ＾と思った時に、 まず日記などに貼り付ける前にきちんと貼れるのか確認したい、 どういうサイトからの動画が貼り付けられるか試したい EtcEtc… そういう場合に御利用くださいませ♪ ただ自動再生されるFlashはどういう風になるのかわからないので、 一応専用のトピックでお試し下さいです。
おおうｗｗｗｗｗｗｗｗｗ どうやらコミュ機能ではhtmlが読み込んでくれないようですね。 だったらこのトピックも形骸化した唯の案山子じゃんｗｗｗｗｗｗｗｗｗｗｗｗｗｗ とはなりません。 要するに画像を張り付けたりとする際のhtmlのコピペ用のトピックにすれば良いだけですねｗ 実験的に試したところ、htmlはブログの方のみに適応されるようでした。 こっちではコードだけそのまま書き出されるようです↓ <img src="http://freedeai.saloon.jp/up/src/up7021.jpg" widht="512" height="437"> 画像の貼り付け方法については以下を参照させていただきましたです↓ http://heiwa-ga-ichiban.jp/hproom/tagu/tagu06.html
にゃるほどにゃるほど。 htmlの書き方と言うのはサンドイッチの様に特定のタグと呼ばれる指令を両側から挟む事によって 様々な装飾などが出来るのですね。 例えば文章を大文字にしたい場合 <b> ｷｪｪｪｪｪｪｱｧｧｧｧｧｧｼｬｧﾍﾞｯﾀｧｧｧｧｧｧｧ!!! </b> と入れると、開始タグの＜b＞から終了タグの＜/b＞の間までの文章が 太文字として現れるのでｷｪｪｪｪｪｪｱｧｧｧｧｧｧｼｬｧﾍﾞｯﾀｧｧｧｧｧｧｧ!!! が大文字になるという風に。 なるほどなるほどｗ
参考のために、HTMLの例を書いてみました。 ここにあるページのものです。 http://www.sprasia.com/blog/gurio/20110903222029.html 画像は非公開のフォトでUPして、そのアドレスを指定しています。 細かいことは分からないので聞かないでｗ ※テーブル指定 カラー黒 枠線黒 枠線幅0px 幅547px 余白0 左寄せ <table style="background-color: #000000; border-color: #000000; border-width: 0px; width: 547px;" border="0" cellspacing="0" cellpadding="0" frame="box" rules="all" align="left"> ※タイトル背景 画像URL指定 <tbody> <tr> <td> <table border="0" cellspacing="0" cellpadding="0" frame="void" rules="all" align="left"> <tbody> <tr> <td style="text-align: center;"> <table style="height: 32px; background-image: url(http://img.sprasia.com/73132/767526/large.jpg); width: 547px;" border="0" cellspacing="0" cellpadding="0" frame="void" rules="none" align="left"> ※タイトル文字 <tbody> <tr> <td style="text-align: left;"><span style="color: #ffffff;"> ここにタイトルをいれる</span></td> </tr> </tbody> </table> ※余白指定 <table style="height: 10px;" border="0" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td> </td> </tr> </tbody> </table> ※動画貼り付け <object style="display: block; margin-left: auto; margin-right: auto;" width="547" height="410" data="http://api2.sprasia.com/app/ria/player/2.1/common_player.swf" type="application/x-shockwave-flash"> <param name="data" value="http://api2.sprasia.com/app/ria/player/2.1/common_player.swf" /> <param name="swliveconnect" value="true" /> <param name="quality" value="high" /> <param name="flashvars" value="id=765975&mode=com2&autostart=false&type=fit&lang=ja&app=video" /> <param name="src" value="http://api2.sprasia.com/app/ria/player/2.1/common_player.swf" /> <param name="bgcolor" value="#000000" /> </object> ※テーブル閉じ </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> ※余白指定 <p> </p> ※下のテーブル指定（上と同じ） <table style="background-color: #000000; border-color: #000000; border-width: 0px; width: 547px;" dir="ltr" border="0" cellspacing="0" cellpadding="0" frame="box" rules="all" align="left"> ※タイトル背景 画像URL指定（上と同じ） <tbody> <tr> <td style="text-align: center;"> <table style="height: 32px; background-image: url(http://img.sprasia.com/73132/767526/large.jpg); width: 547px;" border="0" cellspacing="0" cellpadding="0" frame="void" rules="none" align="left"> ※タイトル文字（上と同じ） <tbody> <tr> <td style="text-align: left;"><span style="color: #ffffff;"> ここにタイトルをいれる</span></td> </tr> </tbody> </table> ※本文テーブル 幅547px、背景色（水色） セル内余白10 枠線幅0 <table style="width: 547px; background-color: #d0fafa; border: 0px solid #333333;" border="0" cellspacing="10" cellpadding="10" frame="void" rules="none" align="center"> ※本文 <tbody> <tr> <td> <p style="text-align: left;">ここに本文をいれる。ここに本文をいれる。ここに本文をいれる。ここに本文をいれる。ここに本文をいれる。ここに本文をい れる。ここに本文をいれる。ここに本文をいれる。ここに本文をいれる。</p> </td> </tr> </tbody> ※テーブル閉じ </table> </td> </tr> </tbody> </table>
こちらで使ってるボタン貼り付けのタグも、ここに書いておきます♪ （ロールオーバー仕様） <a href="http://www.sprasia.com/blog/tmtk/20110724014955.html" title="ゆっくりカキコしていってね！"><img src="http://a-draw.com/src/a-draw_5422.png_UJrl2MpbzFkUjVzMVI1s/a-draw_5422.png" onmouseover="this.src='http://a-draw.com/src/a-draw_5423.png_lylCJQ1Oe2YLyBVhrEpg/a-draw_5423.png';" onmouseout="this.src='http://a-draw.com/src/a-draw_5422.png_UJrl2MpbzFkUjVzMVI1s/a-draw_5422.png';" border="0" width="160" height="48"></a> img srcには元の画像、 onmouseoverにはマウスポインタを乗せたときの画像、 onmouseoutには元の画像 を指定します☆ あと、ここで指定してるボタン画像は自分で作りました＾＾；
とりあえず当面はコメント欄や日記への画像の貼り付けが、 一番利用されそうなタグなのかもですね。 てかタグと言うのかすら今の段階ではよく分かりませんが。 画像の貼り付け方法としては、スプに直接上げたものか、 あるいは画像掲示板に上げたものをリンクする形になりますね。 例えば ・お茶どうぞ ω')っ旦~ http://up.mugitya.com/ ・画像Upload掲示板 (Ver.122) http://miriam.sakura.ne.jp/image/imgboard.cgi などに上げた動画のリンクを以下のに挟み込んで日記やコメントに書き込むと 画像が表示されるという。 <img src="ここにリンクのurlを入れる"> 画像の適応サイズは、自己紹介欄は横425pxの左詰めでそれ以上の場合は、右側が見切れるようです 日記及びコメント欄は横550pxまで。上に同じ。 スプへの画像の最大アップロードサイズは640*640まで。 コミュでは画像の貼り付けは出来ない。 今解ってるのはこんな感じかもです。
ブログタイトルの画像の入れ方の説明でごわす♪ でもその前に、スプラシアのおねいさんのページと“全く同じ方法”で出来るかどうか について書いときます。。。 結論から言っちゃうと、どうやらムリっぽいです！＼（＾o＾）／ おねいさんのページのhtmlを調べてみた限りだと、どうやら一般ユーザの設定では いじくれない部分に画像が入ってるのが分かりましたよ＞＜ RSSのアイコンの位置もおねいさん専用のカスタム仕様みたいで、これもまた一般ユーザの 設定では位置変更できないと思われます・・・。 というわけで、おねいさんのページとは完全に同じようにはいきませんが、 とりあえずはコチラで考えたオリジナルのやり方を、この後のコメで説明したいと思います！
で、コレが自分で考えたやり方です。 （ちなみにコレ、↑のぐりおさんのhtmlがかなり参考になりました♪ ありがとうございます！） <span style="cursor: default;"><table style="" border="0" background-image: url(http://img32.pixiv.net/img/tomotaka0701/21572168_75019aa180.jpg); width: 880px; height: 312px;cellspacing="0" cellpadding="0" frame="void" rules="none" align="left"><tbody><tr valign="top"><td align="left"><br> <a href="http://www.sprasia.com/user/tmtk/blog/" style="color: #800080;"><font face="HG丸ｺﾞｼｯｸM-PRO"><b>TMTK.com@sprasia</b></font></a></td></tr></tbody></table></span> これをマイぺの「設定」⇒「ブログの基本設定」⇒「ブログのタイトル」に入力してやると ブログタイトルに画像が入ります♪ ただしブラウザによっては、ちゃんと表示されなかったりするかも。。。 ちなみにコチラのブラウザはIE8で表示確認しました＾＾ 【解説☆】 画像を入れるために、自分は<table>～</table>を使ってます。 テーブルに背景画像を設定して、その中にブログタイトルの文字列を入れる、という寸法です。 ・まず、「background-image: url(http://～.jpg); width: 880px; height: 312px;」の部分が それぞれ画像URL、画像の幅、高さになりますので、これを画像に合わせた設定にします。 ・次に「TMTK.com@sprasia」の部分がタイトル名になるので、これを好きなタイトル名にします。 ・タイトル名を<a>～</a>で囲ってるのは、テーブルを設定することでブログ一覧ページに 何かうまくリンクされなくなるので、それを回避するためです。。。 なので、<a href="http://www.sprasia.com/user/tmtk/blog/">のアドレスを各自の場所のものに 変更します。 ・<span style="cursor: default;">～</span>があるのは、画像にマウスポインタを合わせると 指の形に変わってしまうので、それを防ぐため。 ただし、それでもマウスボタンを押してる間はどうしても指の形になってしまいます・・・。 なんでだろう？ ちょっと後でhtmlに詳しい方にでも回避する方法を聞いてみようかな＾＾； とまあ、大体こんなところですかね。 もしよろしければ、このやり方をそのまま使っちゃって下さいまし☆
＞TMTKさん スプラシア内検索、参考にさせていただきました。 あと、皆さんから私のページでツイッターのガジェット見れてますか？ htmlでスクリプトを入れて「確認する」で見たらあるのし、実際は表示されてないみたいなんですが・・・ 火狐だと見れないのかな？ ＩＥだと見えてるの？
>> デルソルさん IE8だと検索エンジンが所属の所と自己紹介欄で別れて表示されちゃってるよ＞＜ あとニコのマイリストは見えるけど一部ずれちゃってるので、 もしかしたらこの検索エンジンには改行や大きさ、位置など、あと一つ二つ手を加えなきゃなのかもですね(´・ω・`) ツイッターも見えなくなってますね＞＜
>デルソルさん こちらでもツイッターのガジェットをマイぺに入れてみましたけど、 やはり表示されませんね・・・。 とりあえず自分はあしコメのページにガジェットを置いてみると ちゃんと表示されましたので、今はこのようにしてます。。。 検索エンジンもそういう風にしようかな？
こちらの方で↑に書いた、ブログタイトル画像でマウスボタンを押してるときに カーソルが指の形になる現象ですが、IEの互換表示をONにしたらとりあえず直った のを確認しました。。。なんでだろう？ >デルソルさん スプラシア内検索エンジンですけど、あれはたつもとちまきさんの作られたのを そのまま使わせてもらった物ですので、お礼でしたらたつもとちまきさんの方に お願いしますです。。。
↑で書いた画像の入れ方だと、IEの互換表示ありのときにタイトル画像の上にサブタイや 本文が重なってしまうため、根本的にやり方を変えてみました。 この記述を「ブログのタイトル」に入力します。 <br /><p style="background-image: url(http://img32.pixiv.net/img/tomotaka0701/21572168_75019aa180.jpg); width: 800px; height: 232px; padding: 40px;"><font face="HG丸ｺﾞｼｯｸM-PRO"><b>TMTK.com@sprasia</b></font></p> このとき、「ブログのサブタイトル」の最初に<br /><br /><br />・・・といくつか並べて、タイトル画像の直下にサブタイトルが 表示されるようにします。<br />の数は画像の高さに合わせて調節してね♪
ちなみに、IE9のブラウザなどでワタシのページで画像がうまく表示 されなかったのは、おそらくpixivにうｐしてるものを表示させようとしても 正しく読み込みができなかったっぽいと思われますです。。。 スプラシアや、↑でtillさんがカキコされた画像アップロード板にうｐした画像 だと、うまく表示できましたので。 ↓↓↓というわけで、改めて画像アップロード版のURL↓↓↓ http://miriam.sakura.ne.jp/image/imgboard.cgi
一応「趣味」タグと「エンタメ」タグのリンクを貼っておきますねｗ ここから「MAD」や「アニメ」を更に押すと簡単に動画が検索できるようになります♪ マイペにリンクなどを形成して好きなときに動画を見ましょうｗ エンタメタグ <a href="http://www.sprasia.com/video/?b=a&c=%E3%82%A8%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%86%E3%82%A4%E3%83%A1%E3%83%B3%E3%83%88">お好きなリンク名</a> 趣味タグ <a href="http://www.sprasia.com/video/?b=a&c=%E8%B6%A3%E5%91%B3">お好きなリンク名</a>
なお、リンクなどのタグは本文を書き込む際の右上にある「html」ボタンを押して、 任意の所に書き込むといけますぞｗ
sprasiaでaaを貼る時にずれちゃうよ～という事が自分自身よくあります＞＜ なので調べた所、その部分だけMSPゴシックで表示して文字サイズなども限定してしまうと綺麗に見えるようですね。 当面はこんな感じのタグを使おうかと思いますが、もっと綺麗なのあるのかしら？教えて！エ●い人！ <div style="font-family:'ＭＳ Ｐゴシック','ＭＳＰゴシック','MSPゴシック','MS Pゴシック';font-size:12px;line-height:14px;" > </div>
Please register in sprasia to post comments.