prev-nextサムネイルサイズ変更後の、タイトルの回り込みについて

PR 2017/1/31

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

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

投稿者

投稿
- 2017年1月30日 2:14 PM #49829
  きのこ
  ゲスト
  いつもお世話になります。
  初心者ですが、よろしくお願いいたします。
  
  prev-nextのサムネイル画像のサイズ変更を、
  以下のコードを子テーマスタイルシートに追加して行いました。
```
#prev-next #prev img, #prev-next #next img{
  width: 160px;
  height: 90px;
}
```
  ここまでは良かったのですが、
  記事のタイトルが長い場合、
  prev側のタイトルがサムネイル下に回り込んでしまっています。
  
  http://netakiri.net/uploader/src/up0234.png
  
  この場合、どのようにスタイルを指定すれば
  回り込まないようになるでしょうか。
- 2017年1月30日 7:29 PM #49839
  
  わいひら
  キーマスター
  
  できれば、該当ページのURLを貼っていただけると、デベロッパーツールで見れるので助かります。
- 2017年1月30日 8:29 PM #49840
  
  さのこ
  ゲスト
  
  http://revuereview.com/manga/review/565
- 2017年1月30日 9:43 PM #49841
  
  きのこ
  ゲスト
  
  お忙しいところご返信ありがとうございます。
  不備があり申し訳ありません。
  
  またさのこさん、
  わざわざURLを貼っていただきありがとうございます。
  
  該当するページは、
  http://revuereview.com/manga/review/614
  です。
  （先ほどアップロードした画像のページとは異なりますが、
  現象は同じです。）
- 2017年1月30日 11:33 PM #49843
  わいひら
  キーマスター
  こんな感じで、いけるのではないでしょうか。
```
#next > p {
    margin-right: 150px;
}
#prev > p {
    margin-left: 150px;
}
```
  細かな部分は調整してください。
- 2017年1月30日 11:45 PM #49844
  
  わいひら
  キーマスター
  
  ただ、上記のようにすると、モバイルでの表示が崩れるので、上記コードのCSSセレクタを参考に、メディアクエリを使用して（mobile.cssでもOK）マージンを元に戻すスタイルを書く必要があります。
- 2017年1月31日 2:06 PM #49853
  
  きのこ
  ゲスト
  
  わいひらさん
  
  お忙しいところありがとうございます。
  教えていただいた通り指定しましたら、
  希望通り表示されるようになりました。
  
  本当にありがとうございました！
投稿者

投稿

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

トピック「prev-nextサムネイルサイズ変更後の、タイトルの回り込みについて」には新しい返信をつけることはできません。