ぐうたら紺の勉強帳

WordPress、アフィリエイトなど勉強中です。旅行からセール情報まで雑多に書いております。

Gush2

【Gush2】テーマを有効にしたら、レイアウトが崩れた?慌てず対処!

投稿日:2015年6月16日 更新日:

こんばんわ。紺です。

先日、テーマをGush2に変更した時のお話です。

カスタマイズをするために、私は借りているサーバの、別ディレクトリにもう1つWordPressをインストールして、そちらで調整を行っていました。

カスタマイズ後のテーマを、いざ本番にインストールして有効化してみたら、あわわわとなりましたので、解決方法をメモしておきます。

puzzle_1434387612

こんな感じで崩れました

midare

画像が、見出しの上に載っかっている。
めっちゃ斬新・・・(´・ω・`)

タイトルには「慌てず」などと書きましたが、私自身がめちゃくちゃ慌てていたため、このようなわかりづらいキャプチャしか残っていないことをご容赦ください。

画像がポイント

画像・・・が文字を踏んづけている・・・?

とりあえず、画像がポイントだと思った私は、そこでハッと思い出しました。
Gush2の取説に、ちゃんと画像の説明があったことを。

画像左寄せ

画像を左側に配置し、テキストは右側に回りこみます。
この設定をすることで、画像に「alignleft」というクラス名が付与されます。

見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル.

そうです、今までのテーマで私は画像をすべて左寄せ(alignleft)に配置していました。画像は左寄せで、文字は画像の下に表示されるようになっていたのです。

Gush2のCSSではalignleftだとテキストが回りこむので、こんな風に奇天烈な表示になってしまったわけです。

まさか・・・過去記事の全部を

画像と・・・文字の配置を修正しなくてはいけない・・・のか!?

私は無駄に多い過去記事のことを思い、恐怖に震えた。

しかし、そんなはずは無かった。

画像のテキスト回りこみを解除しましょう

どうしても画像の右にテキストを回りこませたい!というわけではなかったので、このテキスト回りこみを解除することにしました。

変更は、「style.css」で行います。

変更前

変更後

marginはとりあえず0にしちゃいましたが、今のところ特に問題無さそうです。

正しい表示に戻りました!

よ、良かった・・・(;-;)

midare_after

教訓

先程も書いたように、テストディレクトリに入れたWordPressで、ダミー記事を入れて表示を確認していたつもりですが、あまり、記事の本文は文字や画像を入れて、ちゃんと試していなかったんですね。

見出しぐらいは試したのですが、見出しも格好良いしこのままで行こう!と思っていましたので・・・。

ちゃんと1記事でも、適当に書いて試してみることが大事だなぁと思いました。

というわけで、これからGush2を入れようとしている皆様は事前に画像の回りこみ設定を確認しておくことをオススメします!

-Gush2

Copyright© ぐうたら紺の勉強帳 , 2017 All Rights Reserved Powered by AFFINGER4.