サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
11
投稿
2
ユーザー
9
Reactions
3,572
表示
Topic starter
2020年10月15日 17:03
お世話になっております。
最近こちらの質問箱に甘えている現状です。
お手数をおかけしますが、よろしくお願いしたいです。
2列テーブルのものを
モバイルで表示する際、1列ページ（画像のように）に
まとめることはcss表記で可能でしょうか。
下記が該当ページになります。
http://pachidougamatome.com/?page_id=1653&preview_id=1653&preview_nonce=561494921d&preview=true
ぜひお願いします。
---------------------------------------------- サイト名：パチンコ・パチスロ実践動画まとめ サイトURL： http://pachidougamatome.com ホームURL： http://pachidougamatome.com コンテンツURL：/wp-content インクルードURL：/wp-includes/ テンプレートURL：/wp-content/themes/cocoon-master スタイルシートURL：/wp-content/themes/cocoon-child-master 親テーマスタイル：/wp-content/themes/cocoon-master/style.css 子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css WordPressバージョン：5.5.1 PHPバージョン：7.4.4 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 言語：ja,en-US;q=0.9,en;q=0.8,zh-CN;q=0.7,zh;q=0.6,pt;q=0.5 ---------------------------------------------- テーマ名：Cocoon バージョン：2.2.4.5 カテゴリ数：57 タグ数：0 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.2 style.cssサイズ：1220バイト functions.phpサイズ：242バイト ---------------------------------------------- Gutenberg：1 AMP：0 PWA：0 Font Awesome：4 Auto Post Thumbnail：0 Retina：0 ホームイメージ：/wp-content/uploads/2020/09/twittericon.png ---------------------------------------------- ブラウザキャッシュ有効化：0 HTML縮小化：0 CSS縮小化：0 JavaScript縮小化：0 Lazy Load：0 WEBフォントLazy Load：0 ---------------------------------------------- 利用中のプラグイン： All-in-One WP Migration 7.28 Contact Form 7 5.2.2 Video Blogster Pro 4.5 WP Mail SMTP 2.4.0 ----------------------------------------------
This topic was modified 4年前 2回 by yamaguchitarou
2020年10月15日 17:21
前略、yamaguchitarou さん
私はやったことがないので、わかりませんが、ググったら以下のような記事がありましたよ。
もし、上手くいったら、私にも教えてくださると嬉しいです。
わいひら reacted
2020年10月15日 17:37
yamaguchitarou さん
こちらも、テーブルの記事・・
able レイアウトを PC とモバイルで見え方を変更する CSS（table レスポンシブ）
私も時間があるときにやってみようかな・・
This post was modified 4年前 by リフィトリー
わいひら reacted
Topic starter
2020年10月15日 18:03
リフィトリー様
返信ありがとうございます！
知識、調べ不足申し訳ございません！
一番上の
レスポンシブに！スマホ表示はテーブルを縦並びにするCSS
で対応することが出来ました！
html編集いるかと思い、質問させていただきましたが
html編集いらずに対応が出来て助かりました！
ありがとうございました！
This post was modified 4年前 2回 by yamaguchitarou
2020年10月15日 18:11
ブロックエディターでもテーブルブロックにclassを設定することができるかと思います。
またカスタムHTMLブロックを使うことも可能です。
なにぶん試していないので、推測で書いていますが、ググってヒットしたページの記事の内容は、それほど難しい内容ではないと推測します。
単純にコピペ等ではできませんが、HTMLとCSSの理解があれば、できそうです。（難易度はそれほど高くはないと思います。)
お試しになってみてください。
あら、書きこんでいる間に、できちゃったみたいですね。 ?
This post was modified 4年前 5回 by リフィトリー
わいひら reacted
2020年10月15日 18:27
CSSセレクタが
table {
だけですと、全てのテーブルに適用されてしまうので、それを回避するには、独自のclassをテーブルタグか、テーブルのブロックに設定する必要があるかと思われます。
初心者向けのリンクに、いろいろ有用なリンクが貼ってあるので、お時間のあるときにでも、覗いてみてください。
2020年10月15日 21:21
テーブルブロックに「追加 CSS クラス」を設定するには、テーブルブロックを選択して、「高度な設定」→「追加 CSS クラス」とたどって、入力窓に 任意の class を設定すればOKです。
任意のclassを設定して、その classをCSSのセレクタに利用すれば、class のないテーブルには、適用されないので、特定のテーブルに限定してデザインを適用する場合などに利用できます。
また、投稿ページの編集画面の下の方にある「カスタムCSS」の欄にCSSのコードを設定すれば、そのページだけにCSSのコードのデザインが適用されるので、他のページに適用したくない場合に有効です。
This post was modified 4年前 2回 by リフィトリー
Topic starter
2020年10月15日 23:18
何度も説明頂きありがとうございます！
実は友人に頼まれた別のWEBサイトでの対応だったため
非常に助かりました！
勉強になりました！ありがとうございました！
リフィトリー reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。