サポート » 使い方全般 » キャプションを入れた画像の枠を消すことがでません

  • 解決済 aru8tk

    (@aru8tk)


    画像を配置する際にメディアライブラリでキャプションを入力するとキャプションを含め画像の周りに5pxのグレー枠が出来てしまいます。
    ページ表示ではwp-includes/media.phpを修正することによって枠をとることができたのですがビジュアルエディタでも同様の修正をしたいのですが修正箇所が見つからないため質問させていただきます。

    環境:WordPress 3.0.1
    デフォルトでついていた「twentyten」をベースにデザインのカスタマイズをしています。

    通常のページ表記の際に修正した内容は下記になります。

    デフォルトで書き出されたソース

    <div id="attachment_190" class="wp-caption alignnone" style="width: 160px">
    <a rel="attachment wp-att-190" href="http://xxx">
    <img class="size-thumbnail wp-image-190" title="画像タイトル" src="http://xxx" alt="xxx" width="150" height="150" />
    </a>
    <p class="wp-caption-text">キャプションテキスト</p></div>

    この場合一行目にかかれている「style=”width: 160px”」が画像サイズより10px多くなっていることが原因で、タグの中に直接書かれているため外部読み込みのCSSでは横幅だけどうにもならないことが分かりました。
    そこで「wp-includes/media.php」内を

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . ((int) $width) . 'px">'

    とすることで解決できました。
    しかしビジュアルエディタ上でも同様の修正を行いたいのですが修正箇所が見つかりません。

    wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js 内で疑わしい部分を見つけcap_widthの部分を修正してみましたが変化はありませんでした。

    //cap_width = 10 + parseInt(f.width.value);
    cap_width = parseInt(f.width.value);
    <略>
    html = '<dl id="'+cap_id+'" class="wp-caption '+t.align+'" style="width: '+cap_width+'px"><dt class="wp-caption-dt">'+html+'</dt><dd class="wp-caption-dd">'+f.img_cap.value+'</dd></dl>';

    どなたか修正箇所をご存じないでしょうか?
    よろしくお願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック投稿者 aru8tk

    (@aru8tk)

    追記:

    ビジュアルエディタでHTML表示にした時は下記のように表示されます。

    [caption id="attachment_190" align="alignnone" width="150" caption="キャプションテキスト"]
    <a rel="attachment wp-att-190" href="http://xxx">
    <img class="size-thumbnail wp-image-190" title="画像タイトル" src="http://xxx" alt="xxx" width="150" height="150" />
    </a>
    [/caption]

    ここではwidth=”150″となっていますがビジュアルに切り替えてChromeのDeveloper Toolsで確認するとwidth=”160″になってしまいます。

    グレーの色を消すだけでいいなら style.css で
    .wp-caption,
    #content .wp-caption{background-color:transparent !important;}
    とかするとどうでしょう。

    トピック投稿者 aru8tk

    (@aru8tk)

    kzさん
    ありがとうございます。
    たしかに色を消すだけならCSSで背景色を指定することで出来ると思います。
    ただ、幅として+10pxが残るのでレイアウト的なことでいえば解決にはならないと思っています。
    ビジュアルエディタぐらいでそこまで厳密にならなくてもいいのかもしれませんが、
    どこかで指定しているはずなんだと思うと気になってしまって。
    全文検索で+10 or 10+となっているところを探して削除などしても変化がなくて悩んでおります。

    ビジュアルエディタのスタイルは editor-style.cssで指定しています。
    「twentyten」をベースにしているならeditor-style.cssを上書き (自分で作成したテーマの中にも用意する)すればよいかな、と思います。

    トピック投稿者 aru8tk

    (@aru8tk)

    sysbirdさん
    editor-style.cssで指定するのは分かっているのですが、スタイルの優先順位はHTMLタグに直接指定された方が、、、

    はっ!!!

    kzさんの!importantの記述見逃しておりました!!
    普段あまり使ってなかったので完全に失念していました。。。

    editor-style.cssにて
    .wp-caption {width:auto !important;}とすることで解決できました。

    このやり方ならwp-includes/media.phpの修正も元にもどしてstyle.cssの書き換えで対応できそうです。

    ヒントをくださったkzさんsysbirdさんありがとうございます。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「キャプションを入れた画像の枠を消すことがでません」には新たに返信することはできません。