質問: wordpressバージョン4.5のテーマでxeory baseバージョン1.7というものを使用しているのですが、トップページのレイアウトの調整方法がわかりません。 具体的には、スマートフォン端末でwebサイトを表示させた際、最新の投稿記事をアイキャッチをつけてコンパクトにまとめたいと考えております。widthを300px、hightを60pxほどにして、左側にはwidthを60px、hightを60pxでアイキャッチを表示させ、空いた右側に日付とタイトルを表示させたいと考えています。 style.cssでpost-loop-wrap-post-thumbnailの数値を変更して、アイキャッチを 小さくすることはできたのですが、表示させた際、下に余白がかなりできてしまいますし、日付とタイトルを右側に表示させることがどうしてもできませんでした。 初心者でわからないことが多いのですが、宜しければご回答お願いいたします。 ![イ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/372d50abcf1d7281f614d195d18fbb93.jpeg)(616914363ef191311d8f7fbac918b245.jpeg) 図を追加いたしました。いかがでしょうか。 斜線部がアイキャッチ画像です。わかりづらくてすみません。 一般的なスマホで見るブログのトップページのような表示にしたいのですが。図のイメージは、投稿したものが縦に並んでいる様子です。 cssですと、 /* loop ---------------------------------------- */ .cat-content { background: #fff; padding: 40px; margin-bottom: 30px; } .post-loop-wrap article { width: 100%; margin: 0 0 60px; } .post-loop-wrap article p { margin-top: 0; } .post-loop-wrap .post-thumbnail { width: 304px; height: 215px; margin-left: 20px; margin-bottom: 20px; float: right; } .post-loop-wrap .post-thumbnail img { max-width: 100%; height: auto; } .post-loop-wrap .post-content { width: auto; padding: 0 64px 42px; } .post-loop-wrap .post-footer { border-top: 1px #efefef solid; padding-top: 10px; } .post-loop-wrap .post-footer .bzb-sns-btn { padding: 0; margin-right: 50px; float: left; } .post-loop-wrap .post-footer .loop-comment-icon { float: right; } .post-loop-wrap .post-footer .loop-comment-icon .fa { font-size: 18px; margin-right: 5px; } .post-loop-wrap .post-footer .loop-comment-icon .share { display: none; } .post-loop-wrap .post-footer .loop-comment-icon .count { font-size: 14px; } .more-link { border: 1px #2581c4 solid; padding: 12px 24px; line-height: 26px; margin-bottom: 64px; box-sizing: border-box; clear: both; color: #2581c4; font-size: 14px; } .more-link:hover { background: #2581c4; color: #fff; text-decoration: none; } /* content-none */ .content-none { padding-top: 40px; } ここで制御しているのではと思うのですが。 よろしくお願いいたします。
回答: 画像ありがとうございます。 chromeのデベロッパーツール(F12で立ち上がるやつ)でテーマのDEMOページを触ってみたところ、下記のような感じでレイアウトをすることができました。 不可能ではないと思います。 !イメージ説明 > > アイキャッチを 小さくすることはできたのですが、表示させた際、下に余白がかなりできてしまいます > > > こちらは post-thumbnail 自体に高さが指定されているのが原因だと思います。 > > 日付とタイトルを右側に表示させる > > > テンプレートの作りから ・日付とタイトルで1つのボックス ・アイキャッチとテキストで1つのボックス となっています。 添付したキャプチャの下の方を見ていただければ分かる通り、アイキャッチとテキストが同じ幅になっていますね。 なので「日付とタイトル」「アイキャッチとテキスト」それぞれに幅を持たせてfloatを掛けてあげれば一応横並びにすることは可能です。 慣れないうちはどの要素がどのくらいの高さや幅を持っているのかわかりづらいと思いますので背景色なんかを指定してあげるとイメージが湧きやすいかと思います。 ワタシは今でもよくやりますw また、このテンプレートはレスポンシブデザインということでブレイクポイントごとにCSSを調整する必要があります。 配布されているテーマを改修するのは結構根気が必要です。 SPが理想のレイアウトになった!!やったー!なんて思って、 いざPC幅にしてみたらとんでもないことになってる...なんてことはよくあります。 初心者には骨の折れる作業かもしれませんがじっくりcssを解読してみてくださいませ。 疑問点がありましたら可能な範囲でお応えしますので 宜しくお願いいたします。