Opus-i.plus

映画+音楽+FC2ブログテンプレート

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- --. | スポンサー広告 | トラックバック(-) | コメント(-) |
FC2BLOG に待望の絵文字機能が追加されました!
3機種全てのにも対応しているっていうのがスゴイですね
ただ、ここのテンプレートも含め一部のテンプレートでは記事内の画像を自動で左寄せにしているため、絵文字を入れると勝手に改行されるなど表示が崩れてしまいます
これを防ぐにはスタイルシートを編集する必要があります
(opus-i 配布のテンプレートは既に修正済みです)
管理者ページの「テンプレートの設定」→「修正」でスタイルシートの編集を行うことが出来ます。スタイルシートの一番最後に、

img.emoji{
margin:2px 2px 4px 2px;
vertical-align:middle;
float:none}

と入れてみてください。
※air、atmosphereをお使いの場合は /*MacIE回避*/ より前に書いて下さい。

margin:2px 2px 4px 2px;
余白を設定。上・右・下・左の順番ですのでお好みで変えてみてください。
vertical-align:middle;
文章と絵文字の高さを揃えています(対応していないブラウザもあります)。
float:none
回り込みをしないようにしています。
なぜ最後に書くの?
本当は最後じゃなくても大丈夫です。記事内画像の設定、たとえばここのテンプレートですと、/*エントリー部分*/ の中の .msg img{~}より後ろならどこでも良いのですが、探すのが面倒だと思うので。

表示確認環境 :
WinXP + IE6.0 / NS7 / Ff1 / Opera8
MacOS9.1 + IE5 / NS7 及びiCapture(MacOSX + Safari1.2)
Sugarさんより(多謝!)MacOSX+Safari2 / IE5 / Opera7, 8 / NS7 / Ff1

おかげさまでMacOSXの主なブラウザでも問題なく表示されています。

私の無知がお役に立てたようで、何よりです(^^
たまにはいーことするじゃんと、自分で自分を褒めてあげたい。

ありがとうございました。

2005.06.11 Sat. URL | sugar #fYdA4Rtg [ 編集 ]

こちらこそありがとうございました!
つい忘れがちだけど重要なことなので、ほんとに助かりました。
公式テンプレートもさっそく修正されていて、現在は記事内画像の float:left 等を全て削除することで対処しているみたいです。そのほうが簡単・確実で良いんですが、画像に文章を回り込ませる表示が好きなのでこんな方法にしてみました。
宴会、楽しんできてくださいね~!

2005.06.11 Sat. URL | Enif #TluyS4YI [ 編集 ]

はじめましてEnifさん。
同業(笑)の洵と申します。

回り込み問題に、敏速な解決策を講じてくださってありがとうございます♪
私のブログでも紹介させていただきますので、後ほどトラックバックを送りますね。

2005.06.11 Sat. URL | 洵 #3ofygqbY [ 編集 ]

はじめまして。

私のところでも、絵文字が改行されて表示されていましたが、スタイルシートを追加しただけで、無事、ちゃんと表示されるようになりました。

ありがとうございます。
これから、絵文字がたくさん使えます(#^.^#)

2005.06.11 Sat. URL | むつみ #- [ 編集 ]

昨日から絵文字を使って記事を書きましたが、変な所についてしまうので悩んでました。
無事解決できてうれしいです(*^o^*)
どうもありがとうございました
(*- -)(*_ _)ペコッ

2005.06.12 Sun. URL | sofia #- [ 編集 ]

このコメントは管理人のみ閲覧できます

2005.06.12 Sun.  | # [ 編集 ]

このコメントは管理人のみ閲覧できます

2005.06.13 Mon.  | # [ 編集 ]

>洵さん
はじめまして!こんにちは。
うわぁ~素材サイトも運営されてるんですね!いつも同系色に逃げてしまうわたしにとって、洵さんの絶妙な配色のテンプレートは憧れです。週末は絵文字に振り回されてるような気分でしたが、こうやってコメントいただけるなんて逆に絵文字に感謝しなくちゃいけませんね♪(笑)トラックバック、ありがとうございました!

>むつみさん
こんにちは、はじめまして!
他の方のテンプレートでも大丈夫みたいでよかったです!絵文字は種類が豊富で迷っちゃいますよね~。わたしもむつみさんみたいに可愛く使えるようになりたいな。

>sofiaさん
こんにちは!sofiaさん。
語尾に絵文字をつけることができないと不便ですよね。わたしの場合は全部のテンプレートがそうだったので焦っちゃいましたが、無事解決策が見つかってホッとしました。こちらこそありがとうございました!

>私信の○○さん
お返事遅くなってごめんなさい!
たくさんブラウザをダウンロード&インストールしてくださったんですね ... 本当にありがとうございます!お言葉に甘えて加えさせていただきますね。ローカル保存ももちろん構いません ... ていうかお気遣い感謝です!重いのは色化け防止にPNGにしているせいもあると思いますので、気になるようでしたらJPEGなどに変換してやってください。

>絵文字についての○○さん
こんにちは!はじめまして。
解決策はすぐ思いついたのですが、説明の仕方にすごく悩んで何回も書き直したりしてました。うまくいったみたいで何よりです、こちらこそありがとうございます!

2005.06.17 Fri. URL | Enif #TluyS4YI [ 編集 ]

ありがとうございます。では遠慮なくローカル保存させていただきます。著作権はEnifさんということで(^^

私もpngでつかっているのですけれどね。ほかに原因があるのかもしれません。以前に拝借していたテンプレートがテキストのみというものだったので、それが一番大きいかも。時間が経過して、大分慣れました(^^

今後もMac上での確認が必要でしたら、お声かけください。Enifさんのデザインに敬意を払いまして、できる範囲ではありますが、ご協力させていただきます(^^

2005.06.17 Fri. URL | 私信の○○ #fYdA4Rtg [ 編集 ]

著作権なんて気にしてませんので、煮るなり焼くなりお好きにどうぞ!
暖かいお言葉、本当にありがとうございます。でも不具合発覚&修正方法がわからない場合、なおるまで何回も確認してもらう ... なんてわけにも参りませんので、お気持ちだけありがたく受け取らせていただきます。

2005.06.19 Sun. URL | Enif #TluyS4YI [ 編集 ]

はじめまして。
こちらの記事がきっかけで、テンプレを使わせていただくことにしました♪
とっても気に入って、やっと落ち着けそうです。
あれこれイジッて使ってますが、大切に利用しますのでヨロシクお願いします。

2005.06.29 Wed. URL | miyuki #vG/.8Oo6 [ 編集 ]

このコメントは管理人のみ閲覧できます

2005.07.06 Wed.  | # [ 編集 ]

はじめまして。airに一目ぼれし、DLさせていただきました。こちらに変更しようとカスタマイズ予定です。

ところで画像の透過処理をほどこしているものも、枠が出てしまうのですが、これは変えられないのでしょうか?border=0が入っていても出てしまうのですが。

よろしければ教えていただきたいです。よろしくお願いします。

2005.07.09 Sat. URL | ぶる~ #- [ 編集 ]

このコメントは管理人のみ閲覧できます

2005.07.24 Sun.  | # [ 編集 ]

>miyukiさん
こんにちは!はじめまして。
可愛くカスタマイズしてくださってありがとうございます、お好きなようにがんがんイジっちゃってください!どんなふうに使って下さってるのかを見るのもテンプレート作りの楽しみの1つですので。こちらこそよろしくお願いいたします!

>不具合を報告してくださった○○さん
こんにちは!お返事が遅くなりすみません。
解決のご報告までいただいて、ありがたいやら申し訳ないやら ... 本当にごめんなさい、ありがとうございます!設定にもよると思いますが、FirefoxはCSSファイルのキャッシュがやや強力です。何日か経つと自動的にすべて新しいものに更新されますが、すぐに変更を反映させたい場合はキャッシュをクリアしてみてくださいね。

>ぶる~さん
こんにちは!返答が遅くなってしまい申し訳ありません。
ご質問の件ですが、HTMLよりスタイルシートの設定が優先されるため、border=0をつけただけでは効果が現れません。お手数ですがスタイルシートの /*エントリー部分*/ 部分、

.msg img{
margin:4px 10px 4px 0px;
border:3px double #c0c0c0;
display:inline;
float:left}

の border:3px double #c0c0c0; を削除してみてください。これで全ての枠が消えます。
任意の画像だけ枠を消したい、という場合はさらに面倒で申し訳ないですが

img.noborder{
margin:4px 10px 4px 0px;
border:0px;
display:inline;
float:left}

という記述をスタイルシートの .msg imgより後ろに入れ、記事投稿時にIMGタグの中にclass="noborder"を入れてみてください。

2005.07.24 Sun. URL | Enif #TluyS4YI [ 編集 ]

いつもお世話になっております。airのテンプレートが大好きで、ずっと使用させていただいています。
どこへ質問コメントを書いたらいいのか悩んだのですが、ここへ書かせていただきます。
現在のテンプレートだと、コメントのタイトルが付きません。
これを投稿時も表示時にもタイトル表示する方法はありませんか?
カスタマイズは得意ではありませんが、もし方法があるのなら、やってみたいと思っています。
よろしくお願いいたします。

2007.03.22 Thu. URL | かずよん #rNUx50LM [ 編集 ]

かずよんさん、こんにちは。
テンプレートのご利用、どうもありがとうございます!

ご質問の件ですが本当に申し訳ありません、コメントタイトルがないほうが気軽に書き込みやすい、すっきりして良いという声が多かったため(そのときはブログではなく掲示板でしたが)、テンプレートからもコメントタイトルを削除していました。直接お問い合わせをいただいたことはないのですが、タイトルが無くて困っている方は多いかもしれませんね ... タイトル消去について特にお知らせや注意書きも記載せず、ご不便をおかけしてしまいすみませんでした。

コメントタイトルを表示&投稿するには、HTMLの編集で以下の記述を追加して下さい。ピンクの文字が追加部分になります(自動リンクが入るため、少しわかりづらくて申し訳ないです)。

<!-- ▼ コメント表示 ▼ -->
<div class="btop"><h2><img src="http://blog6.fc2.com/o/opusi/file/oar01.gif" width="14" height="14" alt="" /> <a name="comment_head" id="comment_head">コメント一覧</a></h2></div><div class="bmiddle"><!--comment--><p class="msg" id="comment<%comment_no>"><img src="http://blog6.fc2.com/o/opusi/file/oar01.gif" width="14" height="14" alt="" class="emoji" style="border:0px" /> <%comment_title><br /><%comment_body></p>
・・・
・・・

<!-- ▼ コメント投稿フォーム ▼ -->
<form method="post" action="./" name="comment_form"><div class="btop"><h2><img src="http://blog6.fc2.com/o/opusi/file/oar01.gif" width="14" height="14" alt="" /> <a id="comment_post" name="comment_post">コメントの投稿</a></h2></div><div class="bmiddle"><div class="write"><input type="hidden" name="mode" value="regist" /><input type="hidden" name="comment[no]" value="<%pno>" />
<label for="subject">Subject:</label><br />
<input id="subject" type="text" name="comment[title]" size="30" value="" class="ipt" /><br />

<label for="name">Name:</label><br />
<input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" class="ipt" /><br />
・・・
・・・

<!-- ▼ コメント編集フォーム ▼ -->
<!--edit_area--><form method="post" action="./" name="comment_form"><div class="btop"><h2><img src="http://blog6.fc2.com/o/opusi/file/oar01.gif" width="14" height="14" alt="" /> <a id="comment_edit" name="comment_edit">コメントの編集</a></h2></div><div class="bmiddle"><div class="write"><input type="hidden" name="mode" value="edit" /><input type="hidden" name="mode2" value="edited" />
<input type="hidden" name="edit[rno]" value="<%eno>" />
<label for="subject">Subject:</label><br />
<input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" class="ipt" /><br />

<label for="name">Name:</label><br />
<input id="name" type="text" name="edit[name]" size="30" value="<%edit_name>" class="ipt" /><br />
・・・
・・・

そのままソースを投稿しようとしたところコメント制限にひっかかってしまったため、全てを丸ごとコピー&ペーストできる形で載せられなくてすみません。
追加する場所やアイコンの有無はお好みで変更してくださいね。
動作・表示確認はいたしておりますが、不具合等ありましたらお手数ですが再度ご連絡頂けると幸いです。

2007.03.22 Thu. URL | Enif #TluyS4YI [ 編集 ]

早々と対応してくださって、ありがとうございました。
さっそく修正を行い、現在コメントタイトルが付けられるようになりました!

お月さまが大好きなので、きっとこれからもこのテンプレートでずっとブログを続けていくと思います。

本当にありがとうございました。
感謝をこめて――

2007.03.23 Fri. URL | かずよん #rNUx50LM [ 編集 ]

わ!今さらなのですが、かずよんさんの記事を拝見して、独自にタイトル入力欄を設けてくださってたのを知りました。それをふまえてカスタマイズ方法を書くべきでしたね、色々お手数をおかけしてすみません。でも無事に表示・入力できているようで何よりです。
こちらこそありがとうございました!

2007.03.23 Fri. URL | Enif #TluyS4YI [ 編集 ]












管理者にだけ表示

トラックバックURL↓

2005.06.11 02:43 | sugar pot

申し分なし!!

2005.06.11 10:22 | sugar pot

良かった☆☆

2005.06.11 17:32 | Do you see my mind?

絵文字のずれが直った♪

2005.06.11 22:49 | ウェビンブログ

で、結局電車男ってフィクションだったワケ??(本文関係ナィけどっっ)

2005.06.12 15:29 | ××マイ・リトル。××

絵文字のずれ、解消(^^)

2005.06.12 16:25 | むつみぃ~たいむ

絵文字修正

2005.06.14 20:13 | s-r-s

絵文字のズレの件

2005.06.18 00:34 | モモのモノモノ日記

絵文字のズレ修正…アレ?

2005.08.16 17:48 | make something

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。