注目タグ

テンプレート・プラグイン

トピック詳細

画像にポラロイド枠を付けたいのに

旧フォーラムの記事です http://blog.fc2.com/forum/viewtopic.php?f=3& t=85
華 2005-04-02 08:58:25
件名 :画像にポラロイド枠を付けたいのに

ブログの画像にポラロイドのような枠を付けられると
カスタマイズマニュアル( http://blog.fc2.com/custom_manual/#m006  )にあったのですが、
「画像を使って記事のエントリーを行うと自動的に挿入される画像挿入タグ」を
どこで見つけられるのか、
どうやったら変更できるのか

わからなくて困っています。

今は、CSSのエントリー欄に
p span img {
padding : 5px; /* 写真の余白を5pxに設定 */
background-color : #fff; /* 写真余白部分の色を白色に設定 */
border : 1px solid #000; /* 写真枠部分の色を黒色に設定 */
}
を追加した状態です。

どなたかご存知の方はいらっしゃいませんでしょうか?

2005年04月02日 08:58  by FC2スタッフ

コメント一覧 11件中、1~10件表示

  • 旧フォーラムの記事です
    Anonymous 2006-05-04 00:42:25
    件名 :有り難うございます。

    cyaimi様、未登録ユーザー様、有り難うございます <img src="{SMILIES_PATH }/icon_biggrin.gif" alt=":D" title="Very Happy" />

    cyaimi様様の教えて下さった通り、imgを付けてみたら希望通りに直りました。
    本当にどうも有り難うございます <img src="{SMILIES_PATH}/icon_bigg rin.gif" alt=":D" title="Very Happy" ; />
    これで画像がとっても見やすくなりました。とってもとっても助かりました <img src="{SMIL IES_PATH}/icon_razz.gif" alt=":P" title=" ;Razz" />

    未登録ユーザー様の仰ったmargin設定ですが、私の場合、必ず画像の右に文字を持って来てるので、どうしてもこの設定を 消す事が出来ませんでした。
    でも、アドバイスをして頂きまして本当に有り難うございますm(_ )m

    今後とも何か有りましたさいには、是非是非宜しくお願い致します <img src="{SMILIES_ PATH}/icon_razz.gif" alt=":P" title="Raz z" />

    2006年05月04日 00:42 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2006-05-03 22:56:29
    件名 :

    右と下が広くなっているのは
    margin で、右と下に 1pxずつ余白設定しているからでしょう。
    margin設定が不要なら、その1行は削除してしまっても良いのでは?

    2006年05月03日 22:56 by FC2スタッフ

  • 旧フォーラムの記事です
    cyaimi 2006-05-03 22:30:39
    件名 :

    .pics-1 img{
    float : left;
    margin : 0px 1px 1px 0px;
    padding : 5px;
    background : #fff;
    border : 1px solid #808080;
    }

    こうしてみたらどうでしょ。

    #、この直前に記事内の画像表示を定義している部分があって
    それが生きちゃってるみたいでした。
    詳しくは私もよくわからないのですが、似たようなケースの時に
    「画像だよ」とスタイルの後に「img」を付けてあげたら、うまくいった経験があったので。

    2006年05月03日 22:30 by 増上寺

  • 旧フォーラムの記事です
    Anonymous 2006-05-03 20:57:42
    件名 :枠の余白について

    テンプレート:ソファ
    ブラウザ:Microsoft Internet Explorer
    サイト:http://nekonyanphotoessay.blog57.fc2.com/
    一般

    お世話になっています。
    この度、記事内の画像にポラロイド枠を付けようとしまして、こちらの質問内容を参考に、cssに
    .pics-1 を付け加えました。
    タグに関しては、水さんの書かれていましたタグ
    <div class="pics-l"><img src="画像のパ ス" width="画像の幅" height="画像の高さ" alt= "代替テキスト" /></div>
    にした所、ポラロイド枠を付ける事に成功したのですが、ただ、ポラロイド枠の白い部分の右側と下側が何故か広く表示されてし まいました。
    paddingの所で調整しようと思って、

    padding :5px 5px 5px 5px

    ・・・というように各々設定もしてみたのですが、ダメで、どうしても直す事が出来ません。
    どなたか、余白を上下左右均等に付ける方法をご存知の方がいらっしゃいましたら、是非ご教授頂けませんでしょうか。
    因みに元々このテンプレートに設定してあったポラロイド枠の設定は削除してあります。

    今のcssの設定は、

    .pics-1 {
    float : left;
    margin : 0px 1px 1px 0px;
    padding : 5px;
    background : #fff;
    border : 1px solid #808080;
    }

    としています。
    どうぞ宜しくお願い致します。

    2006年05月03日 20:57 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2005-08-04 10:29:35
    件名 :Re: なった!!

    ポラロイド風にするためには
    スタイルシートの何処へ
    この↓タグを入れればよいのでしょうか?
    やり取りを見ていたのですが、よくわからなかったもので。
    どなたか、まとめて頂けると助かります。^_^;

    .pic{
    padding : 5px; /* 写真の余白を5pxに設定 */
    background-color : #fff; /* 写真余白部分の色を白色に設定 */
    border : 1px solid #000; /* 写真枠部分の色を黒色に設定 */
    }

    2005年08月04日 10:29 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2005-04-03 12:29:32
    件名 :なった!!

    水さんありがとうございました。
    タグを変えまくった挙句、ようやくポラロイドっぽくなりました。

    2005年04月03日 12:29 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2005-04-03 11:35:58
    件名 :Re: 枠付ける努力はしたのですが・・・


    が反応していないようなのです…。


    IEではCSS解釈の間違いで、そうレンダリングされます。
    より多くのブラウザで同じように表示させるには

    CFDNさんの

    <img src="画像のパス" width="画像の幅" height ="画像の高さ" alt="代替テキスト" class="pics-l " />

    の部分を

    <div class="pics-l"><img src="画像のパ ス" width="画像の幅" height="画像の高さ" alt= "代替テキスト" /></div>

    のようにします。

    2005年04月03日 11:35 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2005-04-03 11:29:06
    件名 :白い部分はどこに?

    ボーダーは1pxのラインがつくのですが、おそらく

    padding : 5px; /* 写真の余白を5pxに設定 */
    background-color : #fff; /* 写真余白部分の色を白色に設定 */

    が反応していないようなのです…。

    2005年04月03日 11:29 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2005-04-03 11:18:11
    件名 :枠付ける努力はしたのですが・・・

    返信ありがとうございました。○┓ぺこっ。

    現在glitterをしようしてカスタマイズをしています。

    .pic{
    padding : 5px; /* 写真の余白を5pxに設定 */
    background-color : #fff; /* 写真余白部分の色を白色に設定 */
    border : 1px solid #000; /* 写真枠部分の色を黒色に設定 */
    }

    を入れて、画像を貼り付けるたびに、クラス表示をつけて、clear allのタグをはずして頑張ってみたのですが、枠が正 しく表示されないままです・・・。

    黒の細いラインが入るのみで、ポラロイドっぽくなりませんでした。

    CSS初心者なので、頭痛くなってきました・・・。

    2005年04月03日 11:18 by FC2スタッフ

  • 旧フォーラムの記事です
    ツァイス 2005-04-03 02:14:52
    件名 :記事本文に与えられているクラス名を確認してください

    全ての画像に対して余白をつけるのであれば

    .記事本文に与えられているクラス名 img {
    padding : 5px; /* 写真の余白を5pxに設定 */
    background-color : #fff; /* 写真余白部分の色を白色に設定 */
    border : 1px solid #000; /* 写真枠部分の色を黒色に設定 */
    }

    でよろしいかと
    回り込みに対してはCFDNさんが詳しく仰られているので割愛します

    2005年04月03日 02:14 by FC2スタッフ

1 2 > >>