wordpressテーマxeory baseのカスタマイズ方法(トップページのアイキャッチ)

Question

wordpressバージョン4.5のテーマでxeory baseバージョン1.7というものを使用しているのですが、トップページのレイアウトの調整方法がわかりません。
具体的には、スマートフォン端末でwebサイトを表示させた際、最新の投稿記事をアイキャッチをつけてコンパクトにまとめたいと考えております。widthを300px、hightを60pxほどにして、左側にはwidthを60px、hightを60pxでアイキャッチを表示させ、空いた右側に日付とタイトルを表示させたいと考えています。
style.cssでpost-loop-wrap-post-thumbnailの数値を変更して、アイキャッチを 小さくすることはできたのですが、表示させた際、下に余白がかなりできてしまいますし、日付とタイトルを右側に表示させることがどうしてもできませんでした。
初心者でわからないことが多いのですが、宜しければご回答お願いいたします。
![イ(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;
}

ここで制御しているのではと思うのですが。

よろしくお願いいたします。

Comments

[RoomCaitsith]

ラフスケッチやワイヤーフレーム、もしくはキャプチャをお願いします。

[kei344]

アイキャッチは画像内のどれに当たりますか？また、HTMLやCSSをコードブロックにて記載したほうが、回答しやすいと思います。

[kei344]

何度もすいませんが、コードはコードブロックで囲んでください。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Answer 1

画像ありがとうございます。

chromeのデベロッパーツール（F12で立ち上がるやつ）でテーマのDEMOページを触ってみたところ、下記のような感じでレイアウトをすることができました。
不可能ではないと思います。

アイキャッチを 小さくすることはできたのですが、表示させた際、下に余白がかなりできてしまいます

こちらは post-thumbnail 自体に高さが指定されているのが原因だと思います。

日付とタイトルを右側に表示させる

テンプレートの作りから
・日付とタイトルで1つのボックス
・アイキャッチとテキストで1つのボックス

となっています。

添付したキャプチャの下の方を見ていただければ分かる通り、アイキャッチとテキストが同じ幅になっていますね。
なので「日付とタイトル」「アイキャッチとテキスト」それぞれに幅を持たせてfloatを掛けてあげれば一応横並びにすることは可能です。

慣れないうちはどの要素がどのくらいの高さや幅を持っているのかわかりづらいと思いますので背景色なんかを指定してあげるとイメージが湧きやすいかと思います。
ワタシは今でもよくやりますw

また、このテンプレートはレスポンシブデザインということでブレイクポイントごとにCSSを調整する必要があります。
配布されているテーマを改修するのは結構根気が必要です。
SPが理想のレイアウトになった！！やったー！なんて思って、
いざPC幅にしてみたらとんでもないことになってる…なんてことはよくあります。

初心者には骨の折れる作業かもしれませんがじっくりcssを解読してみてくださいませ。
疑問点がありましたら可能な範囲でお応えしますので

宜しくお願いいたします。

Comments

[no31]

大変参考になりました。ありがとうございます。
下手な説明でしたのに私がイメージしているような表示に仕上げていただいてます。
まだ私のサイトを編集するには至っていませんが、参考にさせていただき解決したいと思います。

[no31]

挑戦してみたのですが、日付を右に寄せることがどうしてもできません。
デモ上の日付のclassはdateで合っていますでしょうか。cssで幅を指定して、右に寄せてみたのですが、タイトルしか反映されませんでした。
もしかすると、アイコンも幅を指定して右に寄せる必要があるのでしょうか。
また、アイキャッチの高さ指定はheightで指定している行を消すことで解決できるのでしょうか。
お忙しいところ申し訳ありませんが、ご教授いただけますと幸いです。

[RoomCaitsith]

お疲れ様です。
それでは順に進めてみましょうか。

まず、CSSの前にどのようにマークアップされているか見てみましょう～

:: 日付とタイトルで1つのボックス ::
（※ここでは説明に不要な属性は取り除いています）

<header class="post-header">
　<ul class="post-meta list-inline">
　　<li class="date"> 2014.10.16</li>
　</ul>
　<h2 class="post-title"><a href="リンクとか">テスト投稿</a></h2>
</header>

:: アイキャッチとテキストで1つのボックス ::

<section class="post-content" itemprop="text">
<div class="post-thumbnail">
<a href="～"><img src="～" class="attachment-post-thumbnail size-post-thumbnail wp-post-image"></a>
</div>
<p>テキストテキストテキスト</p>
</section>

" デモ上の日付のclassはdateで合っていますでしょうか "

classはdateであってますよ
ただ、日付部分はセレクタを用いて下記のようなかたちでスタイリングしています。

.post-meta li {
hogehoge: いろいろ;
hugehuge: あれこれ;
}

上記のhtmlを見てもらえばわかるとおりdateではなく「post-meta」のなかにある「li」にスタイルを指定していますね。
「.post-meta li 」でcss内を検索かければ引っかかるはずです。
背景色つけたり文字色変えたりして確認してみてください～

※すみません、空いたタイミング答えているためどうしても遅れてしましいます…
あとから残りの疑問についても追記していきますね。
宜しくお願いいたします。