タイトルを重ねた大きなサムネイルをタイル2列設定でも使いたい

PR 2016/7/9

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

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

投稿者

投稿
- 2016年7月9日 10:22 PM #43486
  
  do
  ゲスト
  
  いつも使わせてもらっていて、大好きなテンプレートです！！
  
  ポピュラーポストの「タイトルを重ねた大きなサムネイル」設定がすごく見栄えがいいので、記事表示も、黒い半透明なのをかぶせてタイトルが重なるようにしたいのですが、カスタマイズの方からタイル2列設定にしてみたところ、画像の下にタイトルがはみでるような形になってしまい(しかも白い)、イマイチかっこよくありません。
  
  「タイトルを重ねた大きなサムネイル」の見栄えを通常の記事でも表示したい場合にはどうしたらいいですか？
  よろしくおねがいします！！！
- 2016年7月10日 7:57 PM #43510
  
  わいひら
  キーマスター
  
  タイルの画像と、タイトルの親HTML要素は違うので、CSSだけで行うには、難しいのではないかと思います。
  タイルといっても、画像の高さが変わる設定もありますし。
  jQueryとかで、画像の位置を取得して計算しないとダメなのではないかと思います。
  
  できれば、うまくいかなかったソースコードもしくは、ソースコードが適用されたURLを掲載していただければ助かります
- 2016年7月10日 9:21 PM #43512
  
  do
  ゲスト
  
  なるほど、難しいことなのですね・・どうもありがとうございます。
  
  今の自分のページの様子はこんな形です。
  
  simplicityさんのカスタマイズ→レイアウト(全体・リスト)→タイル2列で表示させています。
  そのほかは、特別CSSとかはいじっていません。
  （タイル2列なのは、PCで見た時のサイズ感が一番しっくりきたからです！）
  
  http://zatugaku-life.com/archives/category/%E9%9D%A2%E7%99%BD%E3%81%84%E9%9B%91%E5%AD%A6
  
  このタイトルを画像に埋め込んで重ねたいのですが、もし無理だったら、デフォルトのエントリーカード形式に戻して色々いじくろうかなあと考えているところなんです。
  
  いつもいつも変な質問ばかりですいません。
  どうぞよろしくお願いいたします！！！
- 2016年7月10日 11:36 PM #43519
  
  Hidekichi
  ゲスト
  
  タイルじゃなくてカードで良いならcssでできます。
  カードはつまりは2列表示で、タイルのように縦のズレは無くなりますが、横2列表示で並べるだけで良いならcssでできます。
  
  サムネイルとタイトルだけで良いのであれば、他の要素は非表示にすればよいですし、デフォルトのリストを加工するだけでできると思います。
  
  > タイトルを画像に埋め込んで重ねたい
  
  ここが目的なら極簡単にできると思いますよ。
- 2016年7月11日 4:56 PM #43543
  
  do
  ゲスト
  
  本当ですか？！
  もしよろしかったら、やり方を教えて頂きたいです！
  （あるいは、ヒントになる記事の紹介でもありがたいです！）
  
  表示はあのまま位置をずらすような形で、WPPの「タイトルを重ねた大きなサムネイル」のように画像-黒い半透明なかぶせにタイトル重ねる-記事内容文やカテゴリ、タグ表記は無し
  という形を理想にしてします。
  
  タイルとカードの違いがよくわかっておらず、すみませんでした。
  どうぞ宜しくお願いします！
- 2016年7月11日 8:47 PM #43549
  わいひら
  キーマスター
  現在、#43512の参考ページのように、タイルでも「写真とタイトルしか表示しない」のであれば、以下のように書けばCSSだけでも何とかいけるかもしれません。（カスタマイザーから設定を変更しないのであれば）
```
#main .entry-card-content {
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAAA1BMVEUAAACnej3aAAAAAXRSTlOZyTXzhgAAAA1JREFUGNNjGAWDCgAAAZAAAXtlmk8AAAAASUVORK5CYII=") repeat scroll 0 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    width: 100%;
}

#main .entry h2 a {
    color: #fff;
    font-weight: normal;
}
```
- 2016年7月11日 11:33 PM #43554
  
  do
  ゲスト
  
  早速頂いたＣＳＳを試してみたところ、思っていた通りの出来上がりになりました！
  
  素晴らしいです。
  本当にありがとうございます！
  
  simplicityさんのテンプレートも大好きですが、毎回質問に丁寧な対応をしてくれる管理人さんも大好きです。
  これからもずっと応援しています。
  そして、サイトももっと作りこんで、育てていきたいと思います。
  
  またお世話になることがあるかと思いますが、よろしくお願いします。
  どうもありがとうございました！！
- 2016年7月12日 12:09 AM #43557
  
  Hidekichi
  ゲスト
  
  flexではこんな感じです。
  
  サンプル: 横2列サムネ16:9 タイトルのみのリスト | codepen
- 2016年7月12日 12:12 AM #43558
  
  Hidekichi
  ゲスト
  
  ちなみに、デフォルトのリストを利用してやってます。
- 2016年7月12日 8:28 PM #43580
  
  わいひら
  キーマスター
  
  ありがとうございます。
  うまくいったようでよかったです！
投稿者

投稿