Pocket
LINEで送る

ワードプレスのwpautop機能(自動整形)で困った!

wordpress-img-wpautop1

コンテンツ

img画像の両側に出来た隙間(margin)をピッタリさせたい

昨日、こちらのページのマークアップ作業をしていたのですが
どうしてもアイキャッチ画像と
両側の黒線の枠(border: 10px solid #000;)との間で
左右15px分の隙間が空いてしまい悩んでいました。(現在解決済み)

Firefoxの画面で右クリックして、ページのソース/要素を確認してみると
① pタグが② img画像を勝手に囲んでいる状態でした。

元々① pタグには
margin-left: 15px;とmargin-right: 15px;をかけていた
ので
そのCSSが① pタグに囲まれている② img画像にまで影響を及ぼして
両側の黒線の枠(border: 10px solid #000;)からimg画像との間に
左右15px分だけ隙間が空いていた事が分かりました。

解決策

そこであらかじめWordPressのエディタ画面(テキストエディタ)
img画像を
p style=”margin-left: 0px; margin-right: 0px;”と/pで (← <>省略)
囲む
ようにしたら
左右15px分の隙間がピッタリと消滅しました。
キッチリとはまって良かったです。

これからもWordPressの自動整形機能
上手に付き合っていきたいと感じました。
|* ̄∇ ̄|

WordPress・自動整形・wpautop追記(4/12)

img画像が両側の黒線の枠(border: 10px solid #000;)に
ピッタリとはまるようになったので
トップページ(ランディングページ/シングルページ)のデザインも
以前の状態と比べスッキリとした感じになりました。

諦めずにHTMLとCSSのソースコードを試行錯誤して正解でした!

ライフハックお悩み解決製品・サービスの情報をまとめました↓

製品・サービスの公式ページを見る こんな製品・サービスです
ウェブキャンプ :Webスキルのパーソナルジム・いつでも質問 & 豊富な回答・オーダーメイドカリキュラムがおすすめポイント。自分でWebサイトを作れるようになりたいがプログラミング・デザインをどうやって学んでいったらよいか悩んでいる方におすすめです。
コードキャンプ :実務で通用するスキル全般を短期間で習得・上場企業や有力ベンチャーのエンジニアが講師を担当・受講生が本気でエンジニア就職・転職を実現できるよう より現場評価いただける教育がおすすめポイント。現役エンジニアによるプログラミングの個別指導サービスを探していて悩んでいる方におすすめです。
東京での就業と住まいを同時提供のTokyoDive
:東京での新生活をスムーズに始める・住居探しと仕事探しをする手間が省ける・何かとお金がかかる東京の生活で初期費用を抑えるがおすすめポイント。東京で新生活を始めたい・シェアハウスに興味がある・東京に飛び出したいが不安で一歩が踏み出せないと悩んでいる方におすすめです。
リツアンSTCは、エンジニアに特化した人材紹介会社(派遣・業務委託・正社員紹介)です!
:漫画も面白い(同じ大学の研究室で学び、派遣エンジニアという職についた2人が10年ぶりに再開するところからスタートするストーリー)・社員の平均年収585万円!業界トップクラスの給与水準・自信があるからこそマージン率を公開がおすすめポイント。現在の勤め先に悩んでいて転職を考えている方におすすめです。
こんなに簡単!店舗向けホームページがすぐ始められる「グーペ」
:飲食店、美容院、ネイルサロンなどのお店だけではなく 塾、事務所、個人事業主、クリエイター、アイドルまで、 様々な業種のホームページが簡単に作れる・4,000通りものデザインパターン・初心者だけでなく、中・上級者の方も満足がおすすめポイント。ブログ感覚で手軽にお店のホームページを作成したいと考えているが、その方法が分からない!と悩んでいる方におすすめです。
Pocket
LINEで送る

比較表:説明

はみ出し情報

コメント欄

この記事はこんな人が書いています!

  • サイト管理人紹介
  • 管理人が現在気になっている青汁が
  • サンスター 粉末青汁 やわたのおいしい青汁 です。
  • 記事に間違いがありましたら、是非お知らせ下さい。
  • 確認の上、直ちに修正します。
  • またコメントも募集中です。

サイトご利用にあたって

  • 当サイトで公開している記事に掲載されている情報は
  • 自己責任でご活用下さい。
  • 特に医療・健康に関する情報は、ある人には最適(今現在)でも
  • あなたに最適とは限りません。
  • 必ずご自身の状態と照らし合わせて
  • 自分に最適だと判断してから掲載情報をご活用下さい。

スポンサーリンク

  • 「これは使ってみてあまり良くなかった」という
  • 製品・サービスがありましたら、是非お知らせ下さい。
  • 確認の上、お悩み解決製品・サービス一覧表への
  • 今後の掲載の継続を再度検討します。
  • また「これは使ってみてとても良かった」という
  • 製品・サービスがありましたら、こちらも是非お知らせ下さい。
サイトご利用にあたって

関連記事を見る