「縦横比」タグアーカイブ

パソコン・Web関連, Word Press

WordPressにブログを移転したら、画像の縦横比がおかしくなった時の対処法

1件のコメント

なぜみんなWordpressを持つのか、その意味は？

blog
最近では、ブログを書いてお小遣いを稼ごう的なことも簡単にできるようになってきたので、Wordpressで自分のブログを持とうという人も多いだろう。

「別にアメブロでも、Seesaaブログでも、ライブドアブログでも何でもええやんけ」

って思う人もいるかもしれないが、同じブログを書いて人に見てもらうなら、広告収入も、ブログ運営会社じゃなくて自分の懐に入る方がいいに決まってる。
money
だからこそ、みんながスマホでネットを見る今だからこそWordpressなのだ。

 

アメブロ辞める人へ

アメブロはクソなので記事のエクスポートができない。なのでFC2のブログ移転サービスを経由して、記事をエクスポート、その後Wordpressへ移転するという手順をとることになる。

FC2のブログ移転サービスは優秀なのだが、画像の幅や高さが全て指定されてしまう。

結果として
1

こんな感じになってしまう。

 

縦横比が崩れちゃったあなたへ

そもそもの原因は、Wordpressのテンプレートに、画像を幅100％にするスタイルシートの記述がある事に由来する。

例えば、有名テンプレートのStinger3も

.kizi img, .kizi wp-caption {
margin-bottom: 20px;
height: auto;
max-width: 100% !important;
}

スタイルシートにこんな感じの記述がある。

簡単に言うと

幅を100％にします。

という事だ。
これでFC2ブログからインポートした時に

<img src=”xxx.jpg” width=”xxxpx” height=”xxxpx”>

とソースを書きかえられちゃうので、縦横の比がおかしくなる。

ということで、解決策は、ソースの縦、横のサイズを無視して、自動で調節してやればいいだけなので、

.kizi img, .kizi wp-caption {
margin-bottom: 20px;
height: auto !important;
max-width: 100% !important;
}

height: auto; に !important; をつけるだけでOK。

よく分からない場合は、Stinger3のCSSの一番下にそのままコピペするだけでもOK。

分かりにくかったらコメントプリーズ！

こんな記事も読まれています