Sumirexxx

今日もiPhone片手に出かけます

WordPressの画像imgでpタグを削除しないで画像だけを横幅いっぱいに広げる方法 はてなブックマーク - WordPressの画像imgでpタグを削除しないで画像だけを横幅いっぱいに広げる方法

WordPress

IMG 2590

おそらく今回の記事のように悩んでいる方は、何度目かの検索で「Wordpressで画像imgのpタグを削除する方法」にたどり着いたと思いますが、pタグを削除しなくてもいい方法を見つけました。
今までのブログ投稿方法を変えずに画像を横幅いっぱいにしたい方は読んでみてください。

画像の横幅ってどうしてる?

いつものようにiPhoneでブログを読んでいて気がつきました。

この頃、画像の横幅を画面いっぱいにしているブログが多いということを。

そうやってみてみると、あのブログもそのブログも、私が好きで読んでいるブログはみんな画像が横幅ぴったりかちょっと空いてるかくらいになっています。

ミーハーな私は「確かにせっかくiPhoneやスマホの画面が大きくなっているこの時代、画像は大きく見やすいほうがいいよねっ!」ということで画像を横幅いっぱいまで広げることにしました。

まずはimgタグを探す

さらっと調べているうちに最初にわかったのは「Wordpressの画像表示に使うimgタグは、自動的にpタグに囲まれている」ということ。

例えばこういう下記の画面だったら、ピンクの上の部分がpタグに囲まれたimgタグ。下の部分がpタグに囲まれたテキスト部分。
わかりやすいように、イエローが画面全体の幅となっています。

スクリーンショット 2017 01 16 9 22 30

HTMLはこんな感じになっています。

<p><img src="http://sumirexxx.com/wp-content/uploads/icw6qyocdlg-galymzhan-abdugalimov.jpg" alt="Icw6qyocdlg galymzhan abdugalimov" title="icw6qyocdlg-galymzhan-abdugalimov.jpg" border="0" width="698" height="466"></p>
<p>コーヒーでブレイクタイム中のすみれです。</p>
<p>先週末のこと。Wordpressを更新して何気なく自分のブログを見ていたら、カテゴリーやタグのリンクが500エラーになっていることに気がつきました。</p>

imgの前と、普通のテキスト部分にpタグが入っていることがわかると思います。

画像を囲むpタグだけをmargin:0するには?

これだと、CSSでpタグ全体を「magin:0px」として横幅に余白をいれないようにした場合、テキスト部分も横幅いっぱいになって読みにくくなってしまいます。
さぁどうするか。

javaScriptを使って置換する方法が簡単にできそうだったので、この方法を試しました。

WordPressでimgを囲むpに独自クラスを設定する – the2g

function.phpを使う

置換する方法は以下のように、pタグの次にimgタグが続く記述があった場合、指定した記述に書き換えると言うシンプルなもの。こうすれば、テキスト部分のpタグと分けて表示することができます。

// imgを囲んでいるpにstyle='margin:0を追加
function img_p_class_content_filter($content) {
  $ptn = "/(<p[^>]*)(\>.*)(\<img.*)(<\/p>)/im";
  $content = preg_replace($ptn, "\$1 style='margin:0'\$2\$3\$4", $content);
  return $content;
}
add_filter( 'the_content', 'img_p_class_content_filter' ,20);

私の場合は独自クラスをつけたいわけではなかったので、「style=’margin:0’」と直接CSSを書き込むように修正しました。

表示を確認

いい感じになりました!さっきの画像と比較してみてください。画像だけを横幅いっぱいにすることができました。

スクリーンショット 2017 01 16 9 57 18
ちなみにソースはこうなります。function.phpでmargin:0を入れるよう設定したので、CSSファイルはいじっていません。

<p style="margin:0"><img src="http://sumirexxx.com/wp-content/uploads/icw6qyocdlg-galymzhan-abdugalimov.jpg" alt="Icw6qyocdlg galymzhan abdugalimov" title="icw6qyocdlg-galymzhan-abdugalimov.jpg" border="0" width="698" height="466"></p>
<p>コーヒーでブレイクタイム中のすみれです。</p>
<p>先週末のこと。Wordpressを更新して何気なく自分のブログを見ていたら、カテゴリーやタグのリンクが500エラーになっていることに気がつきました。</p>

まとめ

まず「imgタグの前のpタグ」をどうやってCSSで表現するかで迷いました。
いろいろ探しているうちにjavaScriptの方法を見つけ、そのあとはトントン拍子で出来上がっていきました。

簡単に書いてますが、CSSって思い込んでたところがあったので、javaScriptで置換するって方法にたどり着くまでにけっこう時間がかかりました〜。

CSSからjavaScriptの検索に考えを転換するまでが大変なんだよなぁ…。同じように困っている人まで届きますようにー!

Posted from SLPRO X for iPhone.

<