- このトピックには6件の返信、2人の参加者があり、最後に
により6年、 4ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】Version: 6.1.0
【お使いのブラウザ】chrome
【当該サイトのURL】http://nagatake.sakura.ne.jp/workers_news/
【PHP、MySQL のバージョン】 PHP 7.2.17 (CGI版), MySQL 5.7
【使用しているプラグイン】Gutenberg, Intuitive Custom Post Order
【WordPress のバージョン】 WordPress 5.2.1===
トップページの投稿一覧の一つ目の記事を大きくし、二つ目の記事に写真が二つ表示されるようにしたいのです。
下記参考サイトです。参考：
ここからどのようにすれば実現できるでしょうか？
CSSのみで可能なのか、もしくは、PHPを書き換える必要かだけでもご教示願えますでしょうか。どうぞよろしくお願いします。
Who liked: No user
上記の形なら比較的簡単ですが、参考サイトのように1項目目の右側に2つの項目が縦に並ぶようにするには CSS だけでは厳しいと思います。
二つ目の記事に写真が二つ表示されるようにしたいのです。
これはどういう意味でしょうか？2枚の写真を1つに結合した画像をアイキャッチに登録するのはどうですかね？
Who liked: No user早速のご返信ありがとうございます。
一つ目を大きくすることが比較的簡単とのこと、よかったです。
上記のコードを教えて頂けますでしょうか。
→二つ目の記事に写真が二つ表示されるようにしたいのです。
具体的には下記のようなデザインを目指しています。
Who liked: No user一つ目を大きくすることが比較的簡単とのこと、よかったです。
上記のコードを教えて頂けますでしょうか。あ、それはあくまで「1項目目の右側に2つの項目が縦に並ぶ」場合です。上記で添付された画像のようなレイアウトにするとなるとテンプレート自体をカスタマイズ（PHP を書く）必要があります。
具体的には下記のようなデザインを目指しています。
で、そのためにはここを詰めなければいけないのですが、僕が先に提示したように「2枚の画像を Photoshop などで結合して1枚にしたものを表示する」ではなく、物理的に2枚の画像を表示するとすると、その画像をどうやって登録するかが問題になってきます。普通は1枚なので、アイキャッチ画像に登録した画像をもってくればいいですが、2枚にするとなると、あと1枚をどうやって登録させるかを考えなければなりません。これはカスタムフィールドか何かで実装済みでしょうか？
あとは画像がない場合はどう表示するか、タイトルが長くなって画像の範囲をはみ出してしまう場合はどう表示するか、タブレット/スマホの場合はどうやって表示するかなどの仕様も考える必要があります。
とりあえず2枚目の画像をどう登録させてどう取得するかを決めれば、2項目目だけ画像を2枚出す、というのはそう難しくないと思いますが、CSS 面もサポートをするとなると、上記のような仕様も決定してからでないと難しいです。
Who liked: No user2枚にするとなると、あと1枚をどうやって登録させるかを考えなければなりません。これはカスタムフィールドか何かで実装済みでしょうか？
まだできておりません。正直、どのようにすれば実現可能かわからず途方に暮れていたところです。
あとは画像がない場合はどう表示するか、タイトルが長くなって画像の範囲をはみ出してしまう場合はどう表示するか、タブレット/スマホの場合はどうやって表示するかなどの仕様も考える必要があります。
お話を聞いていると、現在のデザインを実現するには、今の自分では力不足のように感じます。デザイナーに共有して、実現可能なところを探ったうえで、またご質面させていただこうかと思います。
Who liked: No user承知しました。
役に立つかはわかりませんが、とりあえず単純に1項目目を大きくする CSS を共有しますね。追加 CSS か、子テーマの CSS ファイルに貼り付けてみてください。
@media (min-width: 64em) { .snow-monkey-recent-posts .c-entries__item:first-child { flex-basis: 66.66666%; max-width: 66.66666%; } }Who liked: No user
- トピック「トップページ投稿一覧の一つ目を大きくしたい」には新しい返信をつけることはできません。