アイキャッチとタイトルを横並びにできますか？ - SWELLに関する質問

RE: アイキャッチとタイトルを横並びにできますか？

namico — Wed, 17 May 2023 13:36:02 +0000

@his

で、出来ました…！ご丁寧にありがとうございます。
アイキャッチからタイトルまでを覆っているclassがないのでここは難しそうですね。でも本当に助かりました！

@loos_ryo

スレッドのぞいてくださってありがとうございます！
上記の方法で出来ましたので、しばらくはこちらで頑張ってみます。いつも愛用させていただいてます！

RE: アイキャッチとタイトルを横並びにできますか？

His- — Wed, 17 May 2023 05:35:08 +0000

レイアウトだけなら以下のコードでいけます。
※レスポンシブなどの調整はご自身で行なってください

囲みのボーダーは難しいかもしれません。

.l-mainContent__inner {
	display: grid;
	grid-auto-columns: 40% 1fr;
}

/* 全体 */
.l-mainContent__inner * {
	grid-column: 1/3;
}

/* タイトル */
.p-articleHead.c-postTitle {
	grid-column: 2/3;
	margin-left: 20px;
	margin-top: 32px!important;
}

/* メタ */
.p-articleMetas {
	grid-column: 2/3;
	margin-left: 20px;
}

/* サムネイル */
.p-articleThumb {
	grid-column: 1/2;
	grid-row: 1/4;
	margin: 0;
}

RE: アイキャッチとタイトルを横並びにできますか？

Tue, 16 May 2023 17:03:45 +0000

ササッとコード提供できるようなものではなくがっつりとした独自カスタマイズの範疇になりますね。

おっしゃるとおり、CSSでがんばってもらうのが基本ですが、要素レイアウトががっつり変わるようなものはテンプレート改変からやらないと難しいかと思います。

RE: アイキャッチとタイトルを横並びにできますか？

namico — Sun, 14 May 2023 10:42:16 +0000

@swell_mania

ありがとうございます。記事中の関連記事などではなく、投稿した記事のアイキャッチとタイトル（一番上）部分のカスタマイズをしたいです。

RE: アイキャッチとタイトルを横並びにできますか？

かんた — Sun, 14 May 2023 09:11:02 +0000

カスタマイズの対象が投稿リストブロックなのか関連記事ブロックなのかその他のことなのか。もう少し詳細があると具体的なコメントが付きやすくなると思います。

アイキャッチとタイトルを横並びにできますか？

namico — Sun, 14 May 2023 08:02:54 +0000

どこかのサイトで見たのですが自分では実現できなかったので、アドバイスいただきたいです。

画像のように、アイキャッチと記事タイトル・更新日の日付を横並びにしたい場合は、どのようにcssをカスタマイズすれば良いでしょうか？自分でやってみようと試みましたがうまくいかず…アドバイスいただけますと幸いです。

投稿記事一番上のアイキャッチとタイトル部分になります。

2291