サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年12月7日 21:39
みなさま
はじめまして。
ちんみと申します。よろしくお願いいたします。
相談内容：
新着情報のショートコードを使用しております。
やりたいことは、
新着情報のサムネイルを非表示にし、
記事の作成日付を左端（もともとサムネイルがあった場所）に表示することです。
そこでstyle.cssにて以下を追加しました。
---------------------------------
.new-entry-card-thumb{
display:none
}
.new-entry-card-date {
display: block;
position:absolute;
left:0;
top:0;
font-size:20px;
}
---------------------------------
これを反映すると、
添付画像のように、少しだけ日付の縦位置が下になってしまうのです。
これを、縦位置を中央にすることは可能でしょうか。
本サイトは実際に運用している企業サイトなので、
添付画像はプレビューのものです。
そのため、開発者ツールで動きを確認していただくことができず
申し訳ございません。
なにか手掛かりをご教示いただけると幸いです。
This topic was modified 2年前 by chimmi
2022年12月7日 22:47
chimmiさん
現物を確認できませんので、とりあえずですが。
新着記事ショートコードをオプションを何も指定せずに表示すると、以下のような感じでした。
それを
- サムネイル非表示、サムネイル用のmarginをゼロに
- 日付表示
- Flexで左右逆転
上記のような感じで、以下のような感じにはできると思います。
.new-entry-card-thumb{
display: none;
}
.widget-entry-card-content {
margin-left: 0;
}
.new-entry-card-date {
display: block;
}
.new-entry-card-content {
display: flex;
flex-flow: row-reverse;
justify-content: flex-end;
}
デフォルトでは、そもそもフォントサイズも違うようですし、タイトルとの間隔など、適宜調整していただければと思います。
（上記の場合は、更新があると更新日が出てくるような気はします）
わいひら reacted
2022年12月8日 00:54
ちなみに、WordPress標準の「最新の投稿」ブロックは、以下のように簡単にサムネイルの非表示などはできます。
ただ、環境情報等のご提示がなく、ブロックエディタをご利用か分からないところです。
表示も微妙に違い、カードではありませんので、リンクはタイトル部分のみです。
日付形式も違うみたいですね。
日付形式も違うみたいですね。
そういう違うが気になるか・ならないかというところも、ご希望によるところがあるかもしれないです。
Cocoonのショートコードの方が、細かいことができるイメージはありますね。
（それも、今回どういう要件でご使用なのかによると思います）
（それも、今回どういう要件でご使用なのかによると思います）
わいひら reacted
2022年12月26日 02:59
「最新の投稿」ブロックで要望の表示をするなら以下を追加して下さい。
/* タイトルの左横に投稿日を配置 */
.wp-block-latest-posts__list li {
align-items: center;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 10px;
}
/* 投稿日の文字サイズをタイトルに揃える */
.wp-block-latest-posts__post-date {
font-size: unset;
}
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。