Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

新着情報を大きなサムネイルで横並びに表...
 
共有:
通知
すべてクリア

[解決済] 新着情報を大きなサムネイルで横並びに表示したいです。

29 投稿
6 ユーザー
12 Reactions
4,409 表示
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

過去の記事を見ながらいろいろ試しましたが上手く行きません。

教えて頂ければと思います。

 

現在topページ(固定ページ)にウィジェットで「固定ページ本文下」に新着情報を入れています。

これを大きなサムネイルでタイトルを画像の上に入れて、横並びで表示させたいです。

 

過去の記事を参考にして、

#new_entries-2 .new-entry-cards.large-thumb-on {
display: flex;
flex-wrap: wrap;
}

#new_entries-2 .new-entry-cards.large-thumb-on a {
width: 20%;
}

 

------------------------------------------------------------------

 

@media screen and (min-width: 400px) {
.page-id-97 .widget-entry-cards.card-large-image .a-wrap,
.home .widget-entry-cards.card-large-image .a-wrap {
width: 32%;
display: inline-block;
}
}

------------------------------------------------------------------

2つとも試してみましたがダメでした。

また、ウィジェットの設定で、「大きなサムネイル」にチェックを入れることが出来ない状態です。

その部分が「?」の表示になっています。

 

解決方法をお教え頂ければと思います。

よろしくお願い致します。

 

テスト制作中です。

http://aply.jp/tulip/

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

過去の記事(トピック?)というのが僕にはわかりません。
トピックのURLも貼り付けていただければと思います。


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

わいひらさん

ありがとうございます。

過去のこの記事を参考にしながら、コードを一部書き換えてみたものです。

よろしくお願い致します。

 

https://wp-cocoon.com/community/customs/%E4%BA%BA%E6%B0%97%E8%A8%98%E4%BA%8B%E3%82%92%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F/

 

 

https://wp-cocoon.com/community/customs/%E8%A8%98%E4%BA%8B%E3%81%AE%E6%A8%AA%E4%B8%A6%E3%81%B3%E8%A1%A8%E7%A4%BA%E6%96%B9%E6%B3%95/

 


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

すみません、何か失礼な表現がございましたらお許し下さい。

ありがとうございます。と書きましたのは、対応して頂きありがとうございます、という意味です。

何卒、よろしくお願い致します。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

いえ、全然失礼とは感じませんでしたよ。

トップページの添付画像の部分ですよね?


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

だとしたらまず「新着記事」ウィジェットの「表示タイプ」を「大きなサムネイル」か「タイトルを重ねた大きなサムネイル」にする必要があるかと思います。


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

お世話になります。

その部分ですが、ウィジェットの画面で設定しようと思うのですが、チェックを入れる部分が添付の画像の状態で、「?」の点滅になってチェックを入れることが出来ない状態なんです。

この部分、設定の仕方が他にあるのでしょうか?

「固定ページ本文下」にウィジェットの配置場所を選んで、「固定ページ本文下」のところにある「新着記事」をプルダウンで設定しようとしているのですが。。。

 

お教え頂ければと思います。よろしくお願い致します。


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

ご質問にお答えしておりませんでした。

そうです、添付して下さった画像の明るくなっている部分です。

よろしくお願い致します。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

Cocoon設定・テーマ情報をご提示いただけますか

 

解決できるかはそのあとの話かもですが。

 

ダメな場合、他に方法もあるっちゃあるのですが
とりあえず必須情報のご提示をってお話でしたっと ? ? ? 

This post was modified 5年前 by かうたっく

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  
よろしくお願い致します。

---------------------------------------------- サイト名:岩越自動車 サイトURL: http://www.aply.jp/tulip ホームURL: http://www.aply.jp/tulip コンテンツURL:/wp-content インクルードURL:/wp-includes/ テンプレートURL:/wp-content/themes/cocoon-master スタイルシートURL:/wp-content/themes/cocoon-child-master 子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css WordPressバージョン:5.4 PHPバージョン:5.6.40 ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36 サーバーソフト:Apache サーバープロトコル:HTTP/1.1 エンコーディング:gzip, deflate 言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7 ---------------------------------------------- テーマ名:Cocoon バージョン:2.1.3.6 カテゴリ数:1 タグ数:0 ユーザー数:1 ---------------------------------------------- 子テーマ名:Cocoon Child バージョン:1.1.1 style.cssサイズ:2817バイト functions.phpサイズ:203バイト ---------------------------------------------- Gutenberg:1 AMP:0 PWA:0 Font Awesome:4 Auto Post Thumbnail:0 Retina:0 ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg ---------------------------------------------- ブラウザキャッシュ有効化:0 HTML縮小化:0 CSS縮小化:0 JavaScript縮小化:0 Lazy Load:0 WEBフォントLazy Load:0 ---------------------------------------------- 利用中のプラグイン: Akismet Anti-Spam 4.1.3 BlossomThemes Email Newsletter 2.0.9 BlossomThemes Social Feed 2.0.0 BlossomThemes Toolkit 2.1.6 Elementor 2.9.7 Hello Dolly 1.7.2 Icyclub 1.6.7 Mesmerize Companion 1.6.111 MetaSlider 3.16.1 Regenerate Thumbnails 3.1.3 Simple Custom CSS and JS 3.30 Sydney Toolbox 1.09 ----------------------------------------------

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

一旦、全てのプラグインを無効にするとどのような表示になりますか?


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

お世話になります。

全てのプラグインを無効にしてみましたが、ヘッダーのスライダーが表示されなくなるだけで、他は変化がありませんでした。

よろしくお願い致します。


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

失礼致しました。

よくチェックしておりませんでした。

すべてのプラグインを無効にしたら、「大きなサムネイル」にチェックを入れられるようになっていたので、チェックを入れました。そうしたら、添付画像のように、サムネイルが大きく表示されました。

 

プラグインをまたすべて有効化したら、チェックを入れる部分が「?」になりましたが、サムネイルは大きいままの状態です。

よろしくお願い致します。


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

何回もスミマセン。Coconにたどり着くまでに、いくつかのテーマを表示させてみたので、不要なプラグインをたくさんインストールしてしまっているのでしょうか?

だとしたら、このCocoonに必要なウィジェットだけを教えて頂くことが出来ますでしょうか?

 

私が自分でインストールしたものは、「MetaSlider」だけだと思いますので、cocoonに必要なプラグイン+「MetaSlider」で一度やってみたらどうかと思います。

 


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  
投稿者:: @vaio

だとしたら、このCocoonに必要なウィジェットだけを教えて頂くことが出来ますでしょうか?

「必要なプラグイン」の間違いです。

よろしくお願い致します。


   
さる子
(@saruko)
Reputable Member Moderator
結合: 5年前
投稿: 482
 

Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ | Cocoon

こちらのページが参考になると思います。

 

また、原因のプラグインを調べるには

全てプラグインを停止→

1つずつプラグインを有効化→

チェックを入れる部分が「?」になった時に、有効化したプラグインが原因の可能性が高いと思います。


   
わいひら reacted
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

さる子さま

ありがとうございます。

プラグインを調べてみましたが、「BlossomThemes Toolkit」というプラグインが原因だったので、無効にしたら上手くいきました。

お陰様で、何とか横並び(5記事)で表示することが出来ました。またスマホできれいに表示されています。
助かりました。

ひとつだけ気になるのが・・・
お分かりになる方がいらっしゃれば教えて頂きたいのですが、新着情報のサムネイルの画像の縦横比が違うものがあります。3つと2つにサイズが分かれています。

画像自体の縦横比の違いかなと思いましたが、5つのうち4つはほとんど縦横比が同じです。
3つと2つのうちの2つは画像サイズが比較的小さいです。画像サイズの問題でしょうか?
同じサイズのものをいれるしかないのでしょうか?

サムネイルの縦横比を同じにしたいのですが、解決方法がお分かりになる方がいらっしゃったら、よろしくお願い致します。

http://aply.jp/tulip/

 


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

続けての質問で申し訳ございません。

この横並びの「新着情報」ですが、他の固定ページにもすべて表示されていますが(他の固定ページは縦並びですが)、TOPページだけに「新着情報」を表示するということができますでしょうか?

いい方法がございましたら、よろしくお願い致します。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

無料のフォーラムを使って、善意の方々に完成するまでわからないことについて、ひとつづつ、アドバイスをいただくと、とても素敵な商用サイトが出来あがるでしょうね。

 


   
ちゅる
(@churu)
Eminent Member Registered
結合: 5年前
投稿: 31
 

vaioさん

はじめまして!こんにちは!
私は回答できるほどのスキルはなく、Cocoon記事の案内位しかできませんが
こちらは試してみましたか。

テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法

あと気になったので・・・

■1つのトピックにつき1つの質問

フォーラム内各ページの始まりにも記載ありますが、
1投稿に複数の質問があると、回答者だけでなく、この投稿を参考にしたい人も混乱のモトです。

(質問タイトルと中身が違ってくる!=有益な情報が埋もれてしまう可能性)

投稿に関わる全ての人が把握しやすいよう、この案内がされています。と思います。

Cocoonフォーラムはこれまで数々の質問を解決に導いた実績がありますので、
過去ログも参考になりますよ。虫眼鏡アイコンから検索!
(※画像参照)

わからないことはGoogleやフォーラムなどでまず調べ、自分なりの答えを出して、
それでも解決しないなら聞くのをオススメです。

私も『CSSって何?』という状態から、ネットの情報のおかげで、簡単なことであれば自分で実践できるようになったので。


ちゅる
(@churu)
Eminent Member Registered
結合: 5年前
投稿: 31
 

個人的にみやすく改行したつもりが、ガッタガタだ・・・
見にくかったらゴメンナサイ;


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

leafytreeさま

大変失礼致しました。
TOPページのみ表示の件、自分で調べて分かりました。

今回はたくさん質問し過ぎて失礼致しました。

せっかく皆様にいろいろと教えて頂いて、あと一歩だったのですが、サムネイルが同じ大きさで表示されませんので、今回は「新着情報」は区切り線にすることに致しました。

 

わいひらさま、かうたっくさま、さる子さま、leafytreeさま、いろいろとありがとうございました。
またどうしても分からないときは、よろしくお願い致します。

 

 

 


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

ちゅるさま

私が書き込みしている最中にアドバイス下さって、ありがとうございます。

というか、ちゅるさまのコメントを読まないで結論を出してしまったカタチになって済みません。

サムネイルの縦横比、ちょっと触ってみます。

ありがとうございます。

 


   
ちゅる reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@vaio さん

なんだか、偉そうに書き込みまして、申し訳ございません。

ちゅるさんのおっしゃるように、自分で調べて解決するということができれば、質問の頻度もぐっと少なくなるかと思います。

ちょっと、調べて、わからなければ、また、さらに調べる、それでもダメなら、方向性を変えて調べる、試す、試みる。やってみる。やってみてダメなら、別のやり方でやってみる。

それでも、ダメなら、ちょっと、コーヒーでも飲んで、また調べる、やってみる。

 

アスペクト比の違う画像を揃えるのは、難しいかもしれません。

しかし、画像をトリミングして、アスペクト比を揃えるのは、それほど難しくはないかもしれません。

また、Cocoonの別の機能を使えば揃えられるかもしれませんし、それは、私もよくわかりません。

 

ご自身で、出来る方法を先ず模索してみてください。

調べることで、得るものもあろうかと思います。

また、いろいろと、書き込みまして恐縮です。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

現在は画像の大きさも揃っているようですね。
先日サイトの状態を見た限りでは、アイキャッチに設定してある画像のサイズがかなり小さかったのが原因かと思います。
アイキャッチに設定されている画像サイズが小さいと、「サムネイルで切り取られるサイズ」に満たないため、画像サイズがそのままのアスペクト比で表示されます。


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

ちゅるさま

お陰様で、サムネイルのサイズを揃えることが出来ました。
ご紹介頂いたページのとおりに設定させて頂きました。

また、基本的にサイズが違う2枚は小さすぎたようです。大きいものに入れ替えたらきれいに揃いました。

それから、今回は過去ログを参考にしないで質問してしまったこと反省です。
フォーラム内での検索が足りなかったようです。

皆さま、いろいろとありがとうございました。

お陰様で、イメージのレイアウトが作れました。
本当にありがとうございます。感謝しております。


   
 vaio
(@vaio)
Eminent Member Registered
結合: 5年前
投稿: 32
Topic starter  

leafytreeさま、わいひらさま

私が作業をしている間、そしてこちらに書き込みしている最中にアドバイス下さったみたいで、ご返事しなくて済みませんでした。

leafytreeさま
ホント、もっと自分で調べるように気を付けます。失礼致しました。

わいひらさま
そうだと思います。画像が小さすぎたのだと思います。

 

皆さま、いろいろとお力下さり、本当にありがとうございました。感謝致します。

 


   
ちゅる
(@churu)
Eminent Member Registered
結合: 5年前
投稿: 31
 

@vaio

伝わればそれでオッケーです!返信ありがとうございました!

お疲れ様でした!


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました