当サイトのリンクにはアフィリエイト広告が含まれています

【スマホ】記事本文内画像の左右余白を0にするカスタマイズ。

カスタマイズ By シェフ

また発症してしまいました。定期的にやってくるんですよね…

ワードプレスをカスタマイズしたくなる病。

今回の病名は「スマホ表示時の本文中の画像の左右の余白を0にしたくなる症候群」でした。

スマホ表示の時だけ画面幅いっぱいの画像にしたい

たまにありません？スマホ表示時の本文中の画像だけ左右の余白（空白）がないサイト。

▼ヤフーの広告とか

gazou-space-0-1

 

▼ネイバーまとめとか

gazou-space-0-2

 

画像に余白がないだけなのに、スッキリしてますよね。それでいて、文字はしっかりと余白があって見やすくなっています。

よし！サクッとカスタマイズしてみるか！

意外に難しい画像の左右の余白問題

ところがどっこい。画像の左右の余白を消すだけなのに、意外に大変…

今回はスマホ表示の時だけ画像を画面幅いっぱいにするというカスタマイズなんですが、一つ問題がありまして。

それは…親要素にpadding（パディング）が指定されていること。

僕はStinger（スティンガー）5を直接カスタマイズしまくってるんですが、親要素である「#wrapper」にpaddingが指定されているんですよ。

 

一体どういうことか？

こちらがスマホ表示の時の画像なんですが、ご覧のようにpaddingで左右に余白を設けています。

gazou-space-0-3

 

  1. marginは要素の外側
  2. paddingは要素の内側

に余白（スペース）を作ります。で、見やすくするためにどちらかを選ぶのですが、スティンガーだけでなく、ほとんどのテーマでpaddingが使われています。

まぁ、当然ですよね。marginで余白を作ろうとすると、すべての子要素（pタグ・imgタグ・hタグ…など）にmarginを指定して外側に余白を作る必要がありますから。

それならば、親要素にpaddingを指定して、内側に余白を作る方がスマートです。結果、その中にある子要素すべての外側に余白ができるからです。

ネガティブマージンと絶対位置指定では制御できず

いろいろカスタマイズを試してみましたが、本命だった2つのカスタマイズをご紹介。

1つ目はネガティブマージンを指定して画像の余白を消すこと。

.post p img {margin: 0 -10px;}

ですが、先ほどの理由からネガティブマージンでは画像の左右の余白は消えません。

もちろん、ネガティブマージンはしっかりときいているのですが、親要素の内側に余白があるので、余白を維持したまま画像（子要素）がずれるだけです。

「あれ？pの中に画像があるから、pが邪魔してる…？pを消せばいいのかな？」とも思ったんですが、同じ理由で無理でした。

※imgの外側のp要素を消す方法もありますが、ワードプレス本来の構造と違う気がするので、試す予定はありません。

 

2つ目は絶対位置で画像を制御すること。

.post p img {
  position: absolute;
  left: 0;
  right: 0;
}

みたいに、左側と右側の距離を0にしようと思ったんですが、そもそもの画像の位置が変わってしまいました。

絶対位置の指定でなんとかできる方法もあると思うんですが、時間がかかりそう＆他の悩み（後述）もあったので、パスすることに。

最終的に試したカスタマイズ

というわけで、最終的なカスタマイズ内容はこちら。

  1. パディングで余白を指定している親要素の中にある子要素にネガティブマージンを指定する（全体の左右の余白を0にする）
  2. 空白がない子要素の中のpにマージンを指定する（文字だけ左右に余白を作る）
  3. 空白がない子要素の中の画像が入っているpだけマージンを0にする（画像の左右の余白を0にする）
  4. 見出し（hタグ）などのpタグ以外の要素の左右の空白も0になっているので、適宜余白を作る

簡単にまとめると、「全体の左右の余白が0になるから、中にある子要素の外側に空白を作ろうぜ！」という内容です。

本当は特定の要素の左右の余白を0にできれば良かったんですけどね…順番に解説してみます。

（いろいろ汎用性があるカスタマイズ内容だと思います）

全体の余白を消して、p要素の左右に余白を作る

では、早速やってみましょう。今回はStinger5を例に説明していきますが、他のテーマでも考え方は同じです。

（※親要素→子要素の順番（簡潔）は「body→#wrapper→main→.post（記事を包んでいるタグ）」です）

 

まず、ブログ内の記事を包んでいる要素（.post）にネガティブマージンを指定します。

.post {
    overflow: hidden;
    margin-left: -10px;
    margin-right: -10px;    
}

必ず、スマホのレイアウトを決めている箇所にコードを追加してくださいね。overflowは元々あったコードですので、特に気にしないでください。

親要素である#wrapperの内側に左右10pxの余白がある（合計20px）ので、それをマイナスの値で打ち消します。これで余白が0になります。

（ちなみに、Stinger5ではタブレット＆パソコン表示時のレイアウトにも若干影響します。あまり気にならないとは思いますが、気になる方は、タブレット＆パソコンのレイアウトを指定しているコードも微調整してください）

 

次に、p要素の左右に余白を作ります。ネガティブマージンで打ち消した分の余白を作ってください。

.post p {
    margin-left: 10px;
    margin-right: 10px;
}

 

これで下準備は完了です。簡単でしたね。

画像が入っているp要素に新しくクラス名をつける

次に、画像が入っているp要素だけにクラス名をつけます。デフォルトでは本文中のすべての投稿画像がp要素で包まれています。

※改めて言いますが、imgの外側のp要素を消す方法もありますが、ワードプレス本来の構造と違う気がするので、試す予定はありません。

やり方は、jsファイルに下記のコードをつけるだけ。Stingerでは「base.js」の中に貼り付けます。

/*---------------------------
画像があるP要素にmax-imgというクラス名をつける
------------------------------*/

$(function() {
    $('.post').find('img').parent('p').addClass('max-img');
});

記事本文（.post）の中の画像（img）があるp要素（p）にだけ（max-img）というクラス名をつける。

というコードです。条件分岐ってやつですね。クラス名は好きに変えちゃってください。

つまり、このコードを付けることにより、「文字だけのp要素」と「画像が入っているp要素」をわけることができるんです。

 

これで、文字だけに余白を作ることができるので、結果的に画像の左右の余白を消す（そもそも作らない）ことが可能になるわけです。

多くを望まなければ、このまま次に進んでもいいのですが、今後のために予防線を張っておきましょう。

実は、僕はブログでよく「人の顔の画像」を使います。

chihou-tsunagari-1

「こんな画像のことだよ」

でも、この画像は余白がないと困るんです。「画面幅いっぱいに広がって欲しい画像」と「余白が欲しい画像」があるんです。

困った…クラス名はどっちも同じだし、一つ一つにクラス名をつけて管理するのも大変。どうしようかなぁ…

画像毎にクラス名を変える（制御する）

そんな時も安心！CSS3から使えるようになった属性セレクタでコントロールできます。

これがあれば、先ほどの画像もコントロールできるようになるのですが、一体どうやってコントロールするか？

いろいろやり方はありますが、先ほどの画像は拡張子でコントロールすることにしました。それぞれの拡張子がこちら。

  1. 丸い小さい画像→pngファイル
  2. 普通の画像→jpgファイル

つまり、丸い小さい画像（png）の時は左右に余白を作り、普通の画像（jpg）の時は余白を作らないことで、余白をコントロールするのです。

では、これをもとに進めていきましょう。先ほどの条件分岐に、さらに条件を加えます。

/*---------------------------
画像があるP要素にmax-imgというクラス名をつける
------------------------------*/

$(function() {
    $('.post').find('img[src$=".jpg"],[src$=".jpeg"]').parents('p').addClass('max-img');
});

「記事本文（.post）の中の画像（img）があるp要素（p）にだけ（max-img）というクラス名をつける」という条件から…

記事本文（.post）の中のjpgとjpegの拡張子で終わる画像（img[src$=”.jpg”],[src$=”.jpeg”]）があるp要素（p）にだけ（max-img）というクラス名をつける。

という条件になりました。「.png」や「.gif」で終わる画像にはmax-imgというクラス名がつきません。

 

このimgの右につけた属性セレクタ「foo=”bar”」はかなり使い勝手が良く、

  1. 「.size-full」というクラス名の画像にだけ、追加で新しいクラス名をつける
  2. a要素（リンク）がある画像だけ、元のクラス名を消す
  3. 横300pxの画像にだけ、クラス名をつける

…など、無限大に条件を設けることができるんです。条件を組み合わせれば、希望通りにコントロールできるはずです。

さらに詳しい情報はこちらから→CSS3リファレンス

 

そして、もう一つ問題が。

今のこの条件だと「画像のすぐ外側にp要素がある場合（p要素のすぐ下がimg要素）」でしかクラス名が付きません。

でも、「画像のすぐ外側にa要素があり、そのa要素の外側にp要素がある場合（p要素のすぐ下がa要素）」もありますよね。

そんな画像もひっくるめて、「画像があるp要素」にしたい場合は、parent→parentsにするだけでOKです。

/*---------------------------
画像があるP要素にmax-imgというクラス名をつける
------------------------------*/

$(function() {
    $('.post').find('img[src$=".jpg"],[src$=".jpeg"]').parents('p').addClass('max-img');
});

新しくクラス名がついた画像の余白を消す

ここまでくれば、ほとんど終わったようなものです。

.post .max-img {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

こんな感じで余白を消してもOKですが、もっとスマートにしましょう。

左右の余白を消す（全体）→左右の余白をつける（文字だけ）→左右の余白を消す（画像）というカスタマイスになっているので、少し無駄な感じがします。

であれば、そもそも画像に左右の余白をつけなければいいですよね。はい、そのCSSもあります。

.post p:not(.max-img) {
    margin-left: 10px;
    margin-right: 10px;
}

これはCSS3から使えるようになったコードです。

画像が入っているp要素以外のp要素「p:not(.max-img)」だけに左右の余白をつけるという命令になっています。

いい感じの画像になりました。

img-space-0-4

細かい部分に余白を作る

ほとんど終わったようなものですが、最後に細かい部分の修正をします。

  1. 見出し（h1,h2,h3…）
  2. 関連記事（#kanren）
  3. 記事の最後にあるカテゴリー（.tagst）
  4. パンくずリスト（div#breadcrumb）
  5. 公開日・更新日（.blogbox）

などに、マージンやパディングなどで左右それぞれ10px（合計20px）の余白を作るだけです。

Stinger5は上記の5つだけ修正すれば大丈夫だと思います。こんな感じで余白を作りたいものをまとめるとメンテナンスが楽ですよ。コピペしてみてください。

.post h1,.post h2,.post h3 {
    margin-left: 10px;
    margin-right: 10px;
}
#kanren,.tagst,div#breadcrumb,.blogbox {
    padding-left: 10px;
    padding-right: 10px;
}

 

カエレバ・ヨメレバ・ポチレバを利用している方はこちらのコードもまとめて追加しましょう。

.post .booklink-box,.post .kaerebalink-box,.post .pochireba {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

 

あ、そうそう。本当は画像の左右だけに余白を作る予定だったんですが、その他の部分の余白もなくなり、いい感じになりました。

  1. コメント欄
  2. 拡散ボタン
  3. 引用タグ

などのp要素に囲まれていない部分も、そのまま画面幅いっぱいに広がってくれました。YouTubeの埋め込みなんかもかっこいいですよ。

コピペでカスタマイズ！

まとめたコードがこちらです。これをスタイルシートにコピペしてください。

「.post」など、テーマによってid名やクラス名が違う部分は任意で変更してくださいね。Stinger5（6や7も？）をお使いの方はそのままコピペでOKです。

.post {
    overflow: hidden;
    margin-left: -10px;
    margin-right: -10px;    
}
.post p:not(.max-img),#toc_container {
    margin-left: 10px;
    margin-right: 10px;
}
.post h1,.post h2,.post h3 {
    margin-left: 10px;
    margin-right: 10px;
}
#kanren,.tagst,div#breadcrumb,.blogbox {
    padding-left: 10px;
    padding-right: 10px;
}

 

そしてこちらがメインの「.js」のファイルに追加するコードです。Stinger5（6や7も？）をお使いの方は「base.js」に追加してください。

/*---------------------------
画像があるP要素にmax-imgというクラス名をつける
------------------------------*/

$(function() {
    $('.post').find('img[src$=".jpg"],[src$=".jpeg"]').parents('p').addClass('max-img');
});

まとめ

いかがでしょうか？いろいろ試行錯誤した結果、こういうカスタマイズになりました。

大幅にカスタマイズをすれば、余白を作ったり消したりしなくてもいいんですが、今回はあくまでもできるだけ簡単なカスタマイズということで。

試す方はバックアップをお忘れなく。まずは、オフラインで試してくださいね。こんな感じでカスタマイズをしている記事がなかったので、今回自分でカスタマイズしてみました。

同じようなお悩みをお持ちの方に参考にしていただければ嬉しいです！

カテゴリー：カスタマイズ

シェフ

このサイト「Fantastech」を運営している人