スマホでの記事一覧エントリーカードのカスタマイズについて

PR 2017/4/18

このトピックには6件の返信、1人の参加者があり、最後にフォンにより9年、 5ヶ月前に更新されました。

6件の返信スレッドを表示中

投稿者

投稿
- 2017年4月17日 4:49 PM #51893
  フォン
  ゲスト
  いつもお世話になります。初心者なりにsimplicity2をカスタマイズして使用させていただいております。
  過去のトピックやGoogleでも検索してみましたが、解決できなかったので質問させていただきます。
  
  現在最新版を利用しており、PC・タブレットでは3列のグリッド表示、スマホではエントリーカード（デフォルト）にしていますが、
  スマホでの表示をサムネイルのheightに合うように、
  タイトル
  日付　カテゴリー
  タグ
  というようにしたいと考えております。
  
  今のスマホでの表示は、サムネイルの下にpost-metaがきてしまっておりまして、どうにかまとまった表示に改善できたらと思っております。
```
.post-meta　{
float:right;
margin-top:-20px;
}
```
  のように無理やりやってみたのですが、これじゃない感があります。
  ちょうどバズ部様のようなスマホレイアウトにしたいです。
  
  記事一覧にタグを表示する設定は済んでおり、完全レスポンシブはオンにした状態として、どの部分を変更または追記すると良いでしょうか？お忙しいところすみませんが、ご返事いただけたらと思います。
- 2017年4月17日 11:16 PM #51904
  
  Hidekichi
  ゲスト
  
  現在サイトの状態がどうなっているかサイトアドレスの公開ができるならしてもらって、どこが問題であるかをもう少し書いて下さい。
  
  > サムネイルの下にpost-metaがきてしまって
  > おりまして、どうにかまとまった表示に改善できたら
  
  ここがどのようにしたいのか、どうなっているのかがいまいちわからない部分です。
- 2017年4月18日 12:47 AM #51905
  フォン
  ゲスト
  説明不足で申し訳ありません。
  画像をアップロードしましたので、ご確認いただけると幸いです。
  
  このようにタイトルの下に空白が空いてしまうので、その空白部分に日付等を表示させたいです。
  Attachments:
  up0247.jpg
- 2017年4月18日 1:18 AM #51907
  
  Hidekichi
  ゲスト
  
  単純にタイトル下にpost-metaを入れたいということなんですかね？
  
  普通は完全レスポンシブONでも改行しないと思うんですが、改行するということは何かしら不要なスタイルが入っているのではないですかね？
  
  サンプル: 単純に親テーマのみでレスポンシブにしただけのもの | codepen
  
  というのは、.entry(リストアイテム)は、.entry-thumbと、.entry-card-contentの2つに分けられていて、タイトルや.post-metaは.entry-card-content内に入っています。
  
  .entry-card-contentは.entry-thumbの分margin-leftが設定されていると思うので、サムネイルのfloat:leftとあわせて右に位置しているわけですが、何かしら設定を失敗していれば.entry-card-contentごとズレるように思うんですよ。
  ここらは何が邪魔しているかはサイトを見てみないとわかりませんが、本来は何も意識しないでも問題ないと思います。
  
  貼り付けられた画像を見ると、.post-metaの横幅が狭いですよね？ということはwidthが設定されているのではなかろうかと思うんですが、widthはいらないと思います。完全レスポンシブonであればなおさらサイズを指定(限定)してはいけません。
  どんな端末のサイズでも入るようにするのがレスポンシブの意味合いですから、絶対値(px)で指定するのはもちろん、相対値(%,em等)であったとしても何かしらの値を入れてサイズを限定することはよろしくありません。何かしらの意図があってスタイルしたい場合はその全てではないですが。
  
  こういった左右に別れるブロックをレイアウトする時はinline-blockで横並びにするかflexで横並びにする、もしくは今時ならgridでレイアウトします。その中身(タイトル、post-metaその他)は、具体的な意味合いをもたせる場合以外は特に何もすることはありません。font-sizeやmarginを入れるぐらいの感じです。
- 2017年4月18日 3:49 AM #51908
  
  フォン
  ゲスト
  
  >単純にタイトル下にpost-metaを入れたいということなんですかね？
  その通りでした。回りくどい言い方になってしまいました。
  
  サイトを見ていただくのが一番ではあるのですが、先にテーマをカスタマイズしてから始めようと思っておりましたので、まだドメインを取得しておらず、インデックスもさせていない状態でして、、、申し訳ありません。
  
  完全レスポンシブがオン時はwidthは指定しないほうがいいのですね！勉強になります！
  
  それを踏まえて不要なスタイルを見つけるために、cssのentryに関する記述を全て削除してキャッシュもクリアしましたが解決に至らず、プラグインを全て停止、子テーマ・親テーマともに再インストールし直したのですが、タイトルの下にpost-metaを入れることはできませんでした。
  親テーマのphpファイルも触っていたので、それが大いに関係するのかもしれません。
  
  あまり気にしていなかったのですが、いつからかトップへ戻るボタンが消え、スマホやタブレットでのグローバルメニューも開かなかったのが表示・開くようになっていました。
  やはり何かが干渉していたのだと思います。
  
  この状態から以前に適用させていたcssなどを1つ1つ適用させてみて、原因を探ろうかと思います。
- 2017年4月18日 9:31 AM #51912
  
  Hidekichi
  ゲスト
  
  > 完全レスポンシブがオン時はwidthは
  > 指定しないほうがいいのですね
  
  サイズを固定しないという意味合いで、必要であるなら入れても良いです。ただタイトルであったり.entry-card-content内のものについては入れるとしてもwidth:100%、あるいはwidth: 任意のサイズにmargin: x auto;と言うような形でセンタリングするなどです。場合によってはmax-widthや、min-heightなどの場合も考えられますが、横に伸びていくブロックであれば余程の場合を想定しない限りこれらも最小限の使用になるかと思います。
  
  > トップへ戻るボタンが消え、
  > スマホやタブレットでのグローバルメニューも開かなかった
  
  症状からすればjQueryやjavascriptでのエラーですけれども、他にも何かしら影響している可能性も無きにしもあらず。デベロッパーツールのコンソールをよく観察して下さい。エラーと言っても例えばjQueryが読み込まれる前にスクリプトが動作するようになっていたのかもしれません。
  
  ここらは構造を見ないとわかりませんが、上記の通りならコンソールにエラーが出ているはずです。
  
  ただし、今回の質問の内容はカスタマイズをしていない限りcssの範疇なのでjQueryが読み込めていなくても関係ないかと思います。
  例えばcssに全角が使用されている、行末の;が抜けている、プロパティのスペルミス、:と;を間違えているなども考えられます。
  
  sublimeTextやatom等の今時のテキストエディターに、cssをチェックしてくれるプラグインなどを入れて確認しながら便利にやるのが一番良いです。それら環境が整えられない場合でもデベロッパーツールは最大限利用するのが良いかと思います。
- 2017年4月18日 1:15 PM #51913
  
  フォン
  ゲスト
  
  丁寧かつ詳しく教えてくださってありがとうございます。
  
  デベロッパーツールはほとんど活用したことがなかったのですが、Chrome、そしてご紹介いただいたatomを使用してcssチェクしたいと思います！
  
  ありがとうございました！
投稿者

投稿