トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
Topic starter
どこかのサイトで見たのですが自分では実現できなかったので、アドバイスいただきたいです。
画像のように、アイキャッチと記事タイトル・更新日の日付を横並びにしたい場合は、どのようにcssをカスタマイズすれば良いでしょうか？自分でやってみようと試みましたがうまくいかず…アドバイスいただけますと幸いです。
投稿記事一番上のアイキャッチとタイトル部分になります。
確認項目
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.4.2
利用中のWordPressバージョン
6.2
利用中のプラグイン一覧
-
This topic was modified 2年前 by namico
投稿済 : 14/05/2023 5:02 pm
カスタマイズの対象が投稿リストブロックなのか関連記事ブロックなのかその他のことなのか。もう少し詳細があると具体的なコメントが付きやすくなると思います。
一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。
投稿済 : 14/05/2023 6:11 pm
namico reacted
Topic starter
ありがとうございます。記事中の関連記事などではなく、投稿した記事のアイキャッチとタイトル（一番上）部分のカスタマイズをしたいです。
投稿済 : 14/05/2023 7:42 pm
ササッとコード提供できるようなものではなくがっつりとした独自カスタマイズの範疇になりますね。
おっしゃるとおり、CSSでがんばってもらうのが基本ですが、要素レイアウトががっつり変わるようなものはテンプレート改変からやらないと難しいかと思います。
SWELL開発者です。
投稿済 : 17/05/2023 2:03 am
namico reacted
レイアウトだけなら以下のコードでいけます。
※レスポンシブなどの調整はご自身で行なってください
囲みのボーダーは難しいかもしれません。
.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/