メインコンテンツの幅の調整
-
Related Postsをインストールして画像を5列2段並ぶように設定し使っていますが、画像が左寄せになってしまい右側の幅が広くなってしまい左右対称にならず困ってます。
Related PostsのCSSのコードです。.related_post_title { text-align: center; } ul.related_post { } ul.related_post li { width: 131px !important; height: 235px !important; } ul.related_post li a { } ul.related_post li img { margin-left: 1px !important; width: 132px !important; height: 130px !important; }
ウィジェットはデフォルトサイドバー(180px)とエクストラサイドバー(25%)を使っています。
申し訳ありませんがご助言いただきたいです。よろしくお願いいたします。
-
こんにちは
幅などの単位は、ページ幅、fluidを使っている場合は、pxはお勧めできません
以下のような感じでどうでしょうか?
プラグインの、static/themes/vertical-m.css を変更
.wp_rp_wrap ul.related_post { display: block!important; } .wp_rp_wrap ul.related_post li{ width:18.3%!important; } @media screen and (max-width: 760px) { .wp_rp_wrap ul.related_post li{ width:17%!important; } } .wp_rp_wrap ul.related_post li img { width: 100%!important; height:auto!important; }
このプラグインを使っていないので、スタイルの切り替えなどがどのように行われるのか把握していません。
以下の、URLで試したものを書いています。
よろしければ、ご確認ください
たびたびすみません。
『プラグインの、static/themes/vertical-m.css を変更』
とのご助言でしたが、上記がどこにあるかわかりませんでした・・。自分なりに試してみたのがRelated Posts設定画面のCSSを全て消してstyle.cssに教えていただいたコードを入力してみたりしてみましたがダメでした。無知にてすみません。
問題点が変わってしまうのですが、メインコンテンツが左寄せになっている気がするので、これを中央か右寄せにするにはどうすれば良いでしょうか。ご記述いただいた『ページ幅、fluid』を使っていて、デフォルトサイドバー(180px)とエクストラサイドバー(25%)に設定しております。
お手数お掛けしますが何卒宜しくお願いいたします。プラグイン間違っていましたかね?
http://wordpress.org/plugins/wordpress-23-related-posts-plugin/
ではなかったですか?違っていたら、プラグインのURL教えてください。
同じプラグインであっております。上記のコメントいただき気付いたのですが、FTP上のプラグインフォルダの中の変更と先ほど気付きました。お手数お掛けしすみませんでした。
早速vertical-m.cssを上記コードに変更してみましたが画像は左寄りのまま変わりませんでした。どうしても駄目ならプラグイン自体を変更した方が良いのでしょうか?
たぶんブラウザキャッシュなどの影響で、変化がないのだと思います
htmlソースを表示して、vertical-m.css のリンクを直接開いて、変更が反映しているかどうかチェックしてみると良いと思います。
忙しい中返信いただきすみません。
ソースを確認してみました。
wp-content/plugins/wordpress-23-related-posts-plugin/static/themes/vertical.css?version=3.3を開いてみると.wp_rp_wrap .related_post_title { clear: both; padding: 0 !important; margin: 0 !important; } div.wp_rp_content { display: inline-block !important; } div.wp_rp_footer { text-align: right !important; overflow: hidden !important; } div.wp_rp_footer a { color: #999 !important; font-size: 11px !important; text-decoration: none !important; display: inline-block !important; } div.wp_rp_footer a.wp_rp_edit { color: #fff !important; font-size: 12px !important; text-decoration: underline !important; font-weight: bold !important; background: #f79124 !important; border-radius: 2px !important; padding: 3px 6px; } ul.related_post { display: inline-block !important; position: relative !important; margin: 0 !important; padding: 0 !important; } ul.related_post li { position: relative !important; display: inline-block !important; vertical-align: top !important; zoom: 1 !important; *display: inline !important; width: 150px !important; margin: 10px 10px 10px 0px !important; padding: 0 !important; background: none !important; } ul.related_post li a { position: relative !important; display: block !important; font-size: 13px !important; line-height: 1.6em !important; text-decoration: none !important; margin-bottom: 5px !important; text-indent: 0 !important; } ul.related_post li img { display: block !important; width: 150px !important; height: 150px !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 3px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important; } ul.related_post li a img.wp_rp_santa_hat { display: none !important; } ul.related_post li small { font-size: 80%; } @media screen and (max-width: 480px) { ul.related_post li { display: block !important; width: auto !important; clear: both !important; } ul.related_post li a:nth-child(1) { float: left !important; } ul.related_post li a:nth-child(2) { font-size: 14px !important; padding: 10px 0 10px 110px !important; display: block !important; height: 80px !important; } ul.related_post li img { width: 100px !important; height: 100px !important; } }
の記述がありました。
また上記リンクの下には<style type="text/css"> .related_post_title { text-align: center; } ul.related_post { display: block!important; } ul.related_post li { width:18.3%!important; } ul.related_post li a { } ul.related_post li img { width: 100%!important; height:auto!important; }</style>
上記の記述がありました。
念のためサファリでも確認しましたが、サファリだとさらに画像が左寄りになっていました。テンプレートに関係のないプラグインなのに丁寧にご助言いただき誠に申し訳ありません。※ 「【重要】 お読みください」はフォーラム管理上のお知らせを掲載するカテゴリーですので質問のトピックには使用されないようお願いします。質問のトピックを作成される際には最もあてはまるカテゴリーを選択してください。本件は「プラグイン」カテゴリーに移動します。
申し訳ありません。related-postsの設定の中にあるカスタムCSSの項目を消し忘れていました。
カスタムCSSの中を消去してソース確認した所<style type="text/css"> .related_post_title { } ul.related_post { } ul.related_post li { } ul.related_post li a { } ul.related_post li img { }</style>
になりました。
ただ今度は画像が5列2段で並んでいたのが4列3段で最下段が2列になってしまい、画像は左寄りなので右の隙間が大きく空いている状態です。カスタムCSSのオプションがあるんですね
カスタムCSSの方に、以下を入力して、以前の変更を削除してみました
.wp_rp_wrap ul.related_post { display: block!important; } .wp_rp_wrap ul.related_post li{ width:18.1%!important; } @media screen and (max-width: 900px) { .wp_rp_wrap ul.related_post li{ width:17%!important; } } .wp_rp_wrap ul.related_post li img { width: 100%!important; height:auto!important; }
http://tenman.info/labo/snip/archives/4389
の More from my site という部分が、こちらでカスタムCSSを適用したものです。
(テーマは、Raindropsのチャイルドテーマです)うまくいかない部分が、理解できないので、上のサイトで、ブラウザ幅どれぐらいで見たときに、レイアウトが崩れるのか教えてくだされば、調べてみたいと思います。
- トピック「メインコンテンツの幅の調整」には新たに返信することはできません。