Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
記事一覧をカード型にしたとき、タイトル...
 
通知
すべてクリア

[解決済] 記事一覧をカード型にしたとき、タイトルをアイキャッチ画像の横に配置する方法

9 投稿
3 ユーザー
1 Likes
1,539 表示
mihagiya
(@mihagiya)
投稿: 8
メンバー
Topic starter
 

お世話になります。SWELLに変更していろいろ試しています。

PCでもスマホでも同じなのですが、記事一覧にカード型を選択した際に

アイキャッチ画像の下にタイトルが表示されますが、アイキャッチ画像のサイズを小さくし、

画像の横にタイトルを表示するレイアウトにできたらなぁと考えています。

設定画面、フォーラムをみたり、ググってみたのですが、参考になる情報を見つけることが

できませんでした。

実施する方法があればアドバイスいただけると助かります。

よろしくお願いします。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, Googleなどでも検索してみました
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.5.8.5
利用中のWordPressバージョン
5.9
利用中のプラグイン一覧

SEO SIMPLE PACK

 
投稿済 : 09/02/2022 3:29 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

ちょっとどういうものを理想としているのかわからないですが、レイアウト候補で選択できるもの以上のデザインはテーマではできませんのでCSSで調節してください。

SWELL開発者です。

 
投稿済 : 09/02/2022 3:36 pm
mihagiya
(@mihagiya)
投稿: 8
メンバー
Topic starter
 

@loos_ryo さん

お忙しいのにコメントありがとうございます。

やはりCSSで作る感じですよね。

イメージとしては、楽天証券の「トウシル」

https://media.rakuten-sec.net/

でいうと、新着情報の上のほうの画像の下にタイトル等はSWELLで簡単に実現できますが、

新着情報の後半(2ブロック目?)のように、画像の横にタイトルが出せるようにも

できたらなぁと思った次第です。

時間がるときに試行錯誤してみます。

ありがとうございます!

 
投稿済 : 10/02/2022 9:11 am
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

あれ、リスト型選べば同じ感じになりませんか?

SWELL開発者です。

 
投稿済 : 10/02/2022 11:12 am
mihagiya
(@mihagiya)
投稿: 8
メンバー
Topic starter
 

@loos_ryo さん

ありがとうございます。

そうですね。確かに画像とタイトルの配置はリストのイメージです。

 

イメージはそうなのですが、リスト型でも2カラムとか3カラムの選択ができれば、と

思ったのですが、2カラムとかの選択はリスト型ではできないですよね?

This post was modified 2年前 by mihagiya
 
投稿済 : 10/02/2022 3:32 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

あーなるほどです、ないですね!

トップページを固定ページで組むのであればカラムブロックを活用すれば2カラムにもできます。

SWELL開発者です。

 
投稿済 : 10/02/2022 3:45 pm
mihagiya
(@mihagiya)
投稿: 8
メンバー
Topic starter
 

@loos_ryo さん

はい。ヒントありがとうございます。

SWELLユーザの皆さんのWebを拝見して、トップページを固定ページで作ればできるかも

と思ったのですが、今は、cocoonから移ったので、コンテンツの確認が優先かなぁと。

時間を見つけてトライしたいと思います。

ありがとうございます。

 
投稿済 : 10/02/2022 4:34 pm
しらこ
(@96ssbike)
投稿: 842
メンバー
 

リスト型で、すごく雑ですが、末尾にリンクを貼ったサイトを参考にCSSだけで2カラムにしてみました。

.p-postList {
display: flex;
flex-wrap: wrap;
}

.-type-list .p-postList__item {
margin-left: 5px;
margin-right: 5px;
width: calc(50% - 10px);
}

↓できたもの

SnapCrab NoName 2022 2 10 16 36 13 No 00

実際には

  • スマホ表示で1カラムにするコードを追加したり
  • 任意のクラス名をあてて他のリストには影響しないようにしたり
  • もうちょっとマージンをいい感じに調整したり

する必要がありますが、お試し程度であれば上記のCSSだけでもできます。

参考にしたのは、
https://qumeru.com/magazine/35#head-dec8e2ce15c29598094dc9e4b90a9e9e
です。

SWELLカスタマイズ向けの非公式サイトを作りました。何か見つかるかも?→ https://tecchan.jp/swell-tips/
上記以外のWordPress全般向けのナレッジはこちら→ https://tecchan.jp/
疲れたら癒やされてくださいにゃーん (ΦωΦ)

 
投稿済 : 10/02/2022 4:40 pm
mihagiya
(@mihagiya)
投稿: 8
メンバー
Topic starter
 

@96ssbike さん

ありがとうございます!!

CSSについては、ほぼ知識ゼロなので、参考にさせていただきて勉強します!!

 
投稿済 : 10/02/2022 5:31 pm
しらこ reacted
共有: