質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • WordPress

    7401questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,794

no31

score 3

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;
}

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • RoomCaitsith

    2016/04/20 16:27

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

    キャンセル

  • kei344

    2016/04/20 17:16

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

    キャンセル

  • kei344

    2016/04/20 17:55

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

イメージ説明

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

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

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

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

となっています。

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/21 09:19

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

    キャンセル

  • 2016/04/21 17:10

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

    キャンセル

  • 2016/04/23 13:59

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

    まず、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内を検索かければ引っかかるはずです。
    背景色つけたり文字色変えたりして確認してみてください~








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






    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    7401questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。