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カスタマイズ依頼

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

インデックスページの「エントリーカード...
 
共有:
通知
すべてクリア

[解決済] インデックスページの「エントリーカード(デフォルト)」のモバイルスタイルでスニペット部分をサムネイルの下にしないように修正する方法

10 投稿
4 ユーザー
4 Reactions
2,272 表示
(@akira nagata)
Active Member
結合: 6年前
投稿: 8
トピックスターター  

いつもお世話になります。

早速ですが、サムネイルの横にタイトル、説明文だったのが、今回のモバイルスタイル変更で、サムネイルの横(回り込み)はタイトルのみで、説明文は回り込みが解除された、サムネイルの下に表示となりました。

これを、小テーマでもとのサムネイルの横にタイトル、説明文とするにはどのように記述したら綺麗にいくのか教えていただけますでしょうか。

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

----------------------------------------------
サイト名:日本酒ブログ(由紀の酒)
サイトURL: https://www.sakeblog.info
ホームURL: https://www.sakeblog.info
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.8
PHPバージョン:7.1.18
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.1.7
カテゴリ数:373
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.3
----------------------------------------------
利用中のプラグイン:
AdSense Integration WP QUADS 1.8.0
Akismet Anti-Spam 4.0.8
AmazonJS 0.8
Broken Link Checker 1.11.5
EWWW Image Optimizer 4.3.2
Google XML Sitemaps 4.0.9
jQuery Vertical Accordion Menu 3.1.2
Ptengine - Real time web analytics and Heatmap 1.0.16
Revision Control 2.3.2
WP-Optimize 2.2.4
WP Multibyte Patch 2.8.1
WP Super Cache 1.6.4
----------------------------------------------


   
(@akira nagata)
Active Member
結合: 6年前
投稿: 8
トピックスターター  

いろいろ検討しているのですが

entry-card-snippet

のスタイルを戻せば良さそうなところまではきているのですが、未だ小テーマのどこに、どう仕込んだら良いのかわかりません。

下部のスレッドに似たようなタイトルもありましたが、商品リンクではなくて、エントリーカードの方でした。

本来このスレッドのタイトル自体、商品リンクの…ではなくて、エントリーカードのとすべきところでした。申し訳ありません。

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


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

こんにちは。

以前の状態が不明、リンクがどこか不明・見つけたのがCocoonのモノではない。とトリプルパンチだったので、誰か書き込まないなぁ…っと思ってみてました^^;

悪戦苦闘されてるので、私もわからない前提で書き込みますね。

@media screen and (max-width: 768px) {
	.booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box {
		display: flex;
	}
}

※タブレットより小さいサイズに反映します。一度お試しください。

反映しなければプラグインなどキャッシュを削除して再確認してくださいね。


   
(@akira-nagata)
New Member Registered
結合: 6年前
投稿: 2
 

かうたっくさん、返信ありがとうございます。

スレッドタイトルを商品リンクとしてしまいましたが、間違いでエントリーカードでした。イメージとしては添付した画像の、左が以前の状態。右が今回の更新で、説明文は回り込みが解除され、サムネイルの下に表示された状態となりました。

エントリーカード?ブログカード?の説明文を以前の状態に戻したいのですが。サムネイルを150*150になるように修正しておりまして、添付した画像の状態です。

以前の状態に戻すには、小テーマの何処に、何を記述して良いのかわからず困っておりました。

上記に書いていただいたのをそのまま記述してみましたが、修正されず。

display: flex; を .entry-card-snippetに記述してみましたが、うまくいかず。。

こちらの情報不足で申し訳ありません。

引き続きいろいろチャレンジしてみます。


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

実際に試してはないのですが、子テーマのstyle.cssにこれを追記でいかがでしょうか。

@media screen and (max-width: 480px){
  .ect-entry-card .card-snippet, 
  .rect-entry-card .card-snippet, 
  .ect-big-card-first .card-snippet {
      clear: none;
  }
} 

タイトルは修正しておきます。


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

https://gyazo.com/f7658233fa34c8b7a028306e6aea48bc

今見ると上記の状態になってるようです。(トップページ:アーカイブ記事一覧、エントリーカード概要欄)

キャッシュが効いている状態➡古い情報を提示されてるので不具合がみえません。さらに圧縮されているので、子テーマ側で何をどうされたのか確認しにくい状態です。

※ログインユーザーさんのみ最新バージョンのようです。

https://www.sakeblog.info/wp-content/themes/cocoon-master/style.css

このリンク先を見ると、現在バージョンが違ってます。

@charset "UTF-8";
/*
Theme Name: Cocoon
Description: SEO・高速化・モバイルファースト最適化済みの無料テーマ
Theme URI:  https://wp-cocoon.com/ 
Author: わいひら
Author URI:  https://nelog.jp/ 
Text Domain: cocoon
Version: 1.1.6.1
Tags: two-columns, left-sidebar, right-sidebar
License: GNU General Public License
License URI:  http://www.gnu.org/licenses/gpl-2.0.html 
*/

Cocoonの圧縮を切っていただき、キャッシュ機能を一旦停止にすれば、今後混乱することが無いと思います。

 

とりあえず早く解決したいですので。って事で、自分のローカル環境で試してみました。

@media screen and (max-width: 480px) {
	.ect-entry-card .card-snippet, .rect-entry-card .card-snippet, .ect-big-card-first .card-snippet {
		clear: none;
	}
}

Akira Nagataさんはカスタマイズを行っているようなので、そちらの環境でうまくいかないかもです。キャッシュを削除してご確認ください。

 

※うまくいかない場合は、以下を停止していただいてからご返信いたけたらと思います。

  • Cocoonの圧縮を切っていただく:Cocoon設定の高速化を停止
  • キャッシュ機能を一旦停止

次に答えてくれる人は、すんなりいくかと思います^^


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

あっ、ローカルに行って確認中に、書き込みが…;

更新して書き込みするのを忘れました…白目❦^^:


   
(@akira-nagata)
New Member Registered
結合: 6年前
投稿: 2
 

わいひらさん、かうたっくさん、ありがとうございます!。

申し訳ありません。多分、まえの状況を説明するために、以前のバージョンをダウンロードしてUPし携帯のスクリーンショットを撮って…なんてやってましたので、前のバージョンになってしまってました。

コクーンの圧縮…、失礼しました。戻すの忘れてました。

三つのサイトでコクーンを使っておりまして、それぞれcssを見比べながら、チャレンジしてました。

おかげさまで、最新バージョンの小テーマに、上記コード挿入でうまく表示されました。本当にありがとうございました。


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

以前のバージョンをダウンロードしてUPし携帯のスクリーンショットを撮って…なんてやってましたので、前のバージョンになってしまってました。

色々と試されてたのですね!なるほど。全て納得です^^

できれば早くに対処できていれば…。。とか、色々工夫されて疲れたのでは。って思います。

テスト環境を作っておくのもアリかもですね。何よりお疲れさまでした。解決されたようでホントに良かったって思います、です^^

わいひらさんに。

ユーザーさんが混乱したら困ると思うばあい、今後不要なものは消してもらってもは大丈夫です。※私の書き込み。 でも、色々思うのも面倒だし、おまかせします


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

それぞれの書き込み情報は、ユーザーさんには必要なものかもしれないので、そのままにしておきます。
全然問題ないと思います。取捨選択は読み手にお任せしましょう。


   
共有:

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

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

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

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

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

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

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

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