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

フォーラム

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

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

6 投稿
4 ユーザー
5 Likes
470 表示
namico
(@nim)
投稿: 7
メンバー
Topic starter
 

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

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

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

title

 

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, プラグインを停止しても同じことが起こることを確認しました, デフォルトテーマ等、他のテーマでも同じことが起こることを確認しました, 自分で追加したコードに問題がないかチェック済みです, サポート範囲外だということを理解しているが助けが欲しい(有料サポートしてくれる方を探したい)
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.4.2
利用中のWordPressバージョン
6.2
利用中のプラグイン一覧

-

This topic was modified 1年前 by namico
 
投稿済 : 14/05/2023 5:02 pm
トピックタグ
かんた
(@swell_mania)
投稿: 627
Https://webrent.xsrv.jp/
 

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

一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。

 
投稿済 : 14/05/2023 6:11 pm
namico reacted
namico
(@nim)
投稿: 7
メンバー
Topic starter
 

@swell_mania 

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

 
投稿済 : 14/05/2023 7:42 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

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

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

SWELL開発者です。

 
投稿済 : 17/05/2023 2:03 am
namico reacted
His-
 His-
(@his)
投稿: 55
メンバー
 

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

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

.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;
}

お問い合わせ先▶︎https://blog-mi.com/contact/

 
投稿済 : 17/05/2023 2:35 pm
and namico reacted
namico
(@nim)
投稿: 7
メンバー
Topic starter
 

@his 

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

 

@loos_ryo

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

 
投稿済 : 17/05/2023 10:36 pm
reacted
共有: