注目タグ

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

トピック詳細

画像の回り込み時に文字が画像とくっつくのを離せますか(FAQへ

旧フォーラムの記事です http://blog.fc2.com/forum/viewtopic.php?f=3& t=1738
nya 2005-05-27 03:38:31
件名 :画像の回り込み時に文字が画像とくっつくのを離せますか(FAQへ

望海さんの説明を参考に画像の横に文章を持ってきてみました。うまく行ったのですが画像と文字がぴったりくっついてしまいま す。画像の横にすきまをつくれますか?

2005年05月27日 03:38  by FC2スタッフ

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

  • またもや適切なお答えありがとうございました。

    携帯からの投稿で入り込んでしまうのが仕方ないようですので
    携帯から投稿した場合は「下書き」で送りパソコンで編集することにします。

    フリーエリアはうまくトップに上がったのですが
    1番下に
    <%plugin_third_title>
    <%plugin_third_description>
    <%plugin_third_content>
    <%plugin_third_description2>

    と出てしまいました。

    これはHTMLの下のほうにあった、もともと書かれていた
    plugin_third
    の部分を消すことによって解消しました。

    これで今のところの悩みは解消しました。
    本当にありがとうございました

    2010年06月17日 01:00 by やめっち

  • やめっちさんのテンプレートで、記事の上に プラグイン3 (フリーエリア) を作る場合、
    <div id="main"> のすぐ下 に以下の内容を 入れるとよいと思います。


    <!--plugin-->
    <!--▽プラグインエリア(3)▽-->
    <!--plugin_third-->
    <div class="content">
    <h2 class="entry_header"><%plugin_third_ title></h2>
    <div class="entry_body">

    <p style="text-align:<%plugin_third_ialign>&q uot;><%plugin_third_description></p>
    <%plugin_third_content>
    <p style="text-align:<%plugin_third_ialign>&q uot;><%plugin_third_description2></p>

    </div><!--/class=entry_body-->
    </div><!--/class=content-->
    <!--/plugin_third-->
    <!--△プラグインエリア(3)△-->
    <!--/plugin-->


    ※記事関係 (枠,タイトル,本文) の スタイル設定class名 を利用しています。

    2010年06月16日 23:24 by paruparu

  • もう1つ質問なんですが…
    このテンプレには「お知らせ」の部分がないようなので
    http://blogsns.fc2.com/forum_community/topic/12605/26350/
    を参考に(最後のほうの記事)やってみたのですが
    フリーエリアは作れるのですがHTMLをいじったところ真っ白になってしまいました(==;

    今はフリーエリアを作った状態に戻しておきましたが
    これをトップにもっていくにはどこをいじればいいのか
    参考にしたものを私が間違っていじっていたのか…?

    2010年06月16日 15:17 by やめっち

  • > <br clear="all"> が携帯から投稿したときに入り込むようです。

    携帯から投稿したことが無いので 確認できませんが、
    http://blog.fc2.com/info/blog-entry-537.html
    この記事のコメントを読む限り... そのような仕様でしょうか?

    2010年06月16日 15:13 by paruparu

  • お返事ありがとうございました。
    ご指示のとおりにやったらうまく行きました。

    あと「携帯からの投稿で画像の回り込み」なんですが、
    「携帯から投稿した記事をパソコンで見ても回り込んでいない」
    ということです。

    「過去記事を編集」で回りこみ可能ですが
    <br clear="all">
    が携帯から投稿したときに入り込むようです。
    このタグが入らないようには出来ないでしょうか?

    2010年06月16日 14:16 by やめっち

  • > border="0" を削除することで回り込みが出来ています。
    border="0" と回り込みは関係ないと思います。 あっても無くて回り込みは可能です。

    記事内の画像にだけ float を設定したい場合、まず、テンプレートの全体の構造を確認します。

    やめっちさん が 今お使いのテンプレートなら

    <div class="entry_body">
    (記事本文が入るところ)
    </div>

    この設定などを利用します。


    .entry_body img {
    float : left;
    padding: 5px 5px 7px 7px;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 2px;
    border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
    margin: 15px;
    }

    このような設定でOKです。 .entry_body(class="" ですので、先頭の . ドット をお忘れなく)
    特に何も設定しなくても 画像の右側に その後の文章などが 回り込んで表示されます。


    大きい画像などを使って、右に その後の文章など が回り込んでしまっては困る場合、
    <img src="" width="" height="&q uot; alt="" />
    <p style="clear:both">この文章は回り込みしないでね!</p >

    のように 次に続く要素 に clear:both を設定すればOKです。



    また、
    > モブログでは回り込みが反映されない

    という部分は、「携帯用テンプレートには、そのような設定を通常いれていないから。」 (「PC用テンプレートを選択している 場合には 携帯がその設定に対応していないから」) ということです。

    http://www.nttdocomo.co.jp/service/imode/make/content/brows er/html/tag/
    iモード対応HTMLタグ一覧 | サービス・機能 | NTTドコモ

    ↑ メーカーや機種によって 対応しているタグはまちまちだと思いますが、例えば i-mode だとこのくらいしか対応して いません。

    2010年06月16日 13:22 by paruparu

  • いろいろブログのほうで愚痴っていますが、
    とりあえず今は画像に周りこむタグだけCSSに貼ってます。
    でも全体の画像に適応されるようでQRコードなども回りこんでいますね…

    メインの記事の画像だけに適応される方法があればいいんですが…
    あとモブログの時は回り込みが適応されてないようです
    こちらも回り込むことが出来れば基本的にモブログ中心のサイトになると思うのでありがたいです。

    しばらくこのままでダメなようなら初期モードに直すつもりです。

    2010年06月16日 08:12 by やめっち

  • こちらの質問を参考にやってみたのですがうまくいかないので誰かお力を貸してください。

    テンプレートはwhite_styleをしようしています。
    とりあえずやりたかったことは画像の回り込みと、
    画像をフォトのように表示することと、
    この記事のように画像から切り離したいということです。

    現状新規で書き込むとHTMLで書き込むようになっているので、
    画像をアップロードしたあと書き込むときに
    border="0"
    を削除することで回り込みが出来ています。
    でも毎回そうしなきゃいけないのは何とかならないかと思うのですが…

    回り込みやフォト風にするためCSSに
    img,
    a img {
    float : left;
    padding: 5px 5px 7px 7px;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 2px;
    border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
    margin:15 15px 15 15;
    }

    を書き加えてあります。

    それによりQRコードとカウンターが画像のため回りこみずれてしまいました。
    どなたかどうやったら直せるのかお力をお貸しください。
    http://mcott.blog133.fc2.com/

    2010年06月16日 04:43 by やめっち

  • 旧フォーラムの記事です
    Anonymous 2006-04-20 22:46:34
    件名 :

    sugarさん。

    お騒がせしました。
    なんども、なんども試してみて、やっと、できました。

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

    2006年04月20日 22:46 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2006-04-20 11:57:53
    件名 :

    ふたたび、すみません。

    いま、

    img{
    float:left;   
    margin:15 15 15px 15 ;  
    }
    と入力したのですが、余白ができないようです。。。。

    リファレンスを見たのですけど。。。

    2006年04月20日 11:57 by FC2スタッフ

1 2 3 > >>