「メイド・イン・ヘブン」スキン適用中

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

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

モバイル表示でコンテンツが少ないときに...
 
共有:
通知
すべてクリア

[解決済] モバイル表示でコンテンツが少ないときにフッターが下端から離れないように

12 投稿
3 ユーザー
5 Likes
2,207 表示
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
Topic starter  

いつも大変お世話になっております。

Simplictiy2から乗り換えようと、ローカルでCocoonを操作しています。

サイドバーが非表示になる画面幅のとき、コンテンツが少ないとフッターが下端から離れてしまうようなので、対処法を考えてみました。

コリス様のサイトを参考にして、CSSを書いてみましたが、あまり自信はありません。

どなたか、ご検証いただけますと助かります。

#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}

#content {
flex-grow: 1;
}


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

https://wp-cocoon.com/1-5-8/

上記でチェックしたら、いけそうにも思いますよ。

https://gyazo.com/29486b18833cb0443e3dfae6d857e18a

個人的に必須事項でもなく、アドバイス程度しか行えませんので、その後の検証はそちらでして頂けたらと思います。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
Topic starter  

かうたっく様 早々のご返信ありがとうございます。

Cocoonへの切り替えは、もうちょっとかかりそうなので、まだSimplicity2のままですが、切り替え後は、これで運用してみようかなと思います。 ? 


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

2月13日に投稿したCSSだけですと、ヘッダーとメイン、メインとフッターの間が少しだけ広くなってしまうようなので、以下のようにしてみました。

#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}

#content {
flex-grow: 1;
}

/*以下を追記しました*/
#main.main, div.sidebar {
margin-top: 0;
margin-bottom: 0;
}

トップページで、エントリーカードが1つしかない場合などを想定しています。

また、最近は縦長の画面のスマホが増えてきたような気もします。

自分で運用して不具合があれば、追記したいと思っています。


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
Topic starter  

おっと、うっかり、これでは、サイドバーが下になるとき、メインカラムとくっついてしまう。

/*1023px以下*/
@media screen and (max-width: 1023px){
div.sidebar {
margin-top: 10px;
}
}

これも要るかと思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16432
 

出来れば、その状態になっているページおみたい感じです。画面幅は1023で良いのでしょうか。

コンテンツが少なければ、コンテンツを増やせばいいというようなことで対処できるものでもないのでしょうか。

そこまでコンテンツが少ないページだと、検索結果とかにもならないと思いますし。


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

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

わいひらさんのおっしゃるとおり、記事数を増やせば、最後のページまで辿るユーザーは、ほぼいないのかもしれません。

デフォルトのエントリ―カードで、トップページのエントリ―カードの表示数を10記事に設定にしている場合、11記事目のエントリ―カードは、2ページ目に1枚だけ表示されるかと思います。

21記事を投稿すると21記事目のエントリ―カードは3ページ目に1枚だけ表示されるかと思います。

そんなときに、シンプルなフッターデザインでも、フッターを下端に固定しておけたら・・というだけの話です。

1023pxは、「サイドバーがメインカラムの下になる画面幅だと上方向にはマージンが必要かな」と思ったので、という理由です。

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16432
 

出来れば、やりたいのはやまやまです。
ただ、AMPのCSSサイズ50000バイト(約50KB)制限が気になってしまって。
ほぼ見られないページのために、(計算したら)219バイト増えるのは、と考えてしまいました。

Cocoonの親テーマ自体大体35KB CSSを使用しています。
親テーマのCSSが増えると、それだけ子テーマでカスタマイズCSSを書く幅が狭まってしまいます。

以下の2つを天秤にかけた場合、前者をとらせてもらおうと思います。

  1. 提案いただいたCSSを書かずにAMP用にサイズを空けておく
  2. AMP制限に近くなっても提案いただいたCSSを書く

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

AMPのCSSのサイズ制限ですか・・・

Webサイトを作る際に、フッターが下端から離れないようにするというのは、よくある仕様なので、AMPのことまで思慮が及ばず、大変失礼しました。

私も自分と同じような事を考える方がいらっしゃるのかどうか、これって、需要があることなのかなあと思いながらトピックを立てました。

なので、トピックの閲覧数の推移を見ていました。

もし、必要と思う方が万が一いらしたら、自分で子テーマに追記すればよいことですし。

 

 

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16432
 

普通は全然考えない部分だと思います。
Cocoonは、通常ページとAMPページの見た目を同一にするため、同じCSSを使うため、どうしてもサイズが増えてしまいます。
僕も出来る限り、普段からCSSを増やさない書き方になるように気をつけているので、ついつい気になってしまうだけです。
気をつけないと、50KBとかすぐに超えてしまうので…。
AMPがせめて100KBになればいいんですけどね^^;

気になる場合は、このトピックのCSSを子テーマのstyle.cssに貼り付けてことで僕も良いと思います。


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

Simplicity2からCocoonへテーマを変えて試してみたところ、前述のCSSでは、「IE11」で画面幅によっては、メインコンテンツとフッターの間が離れてしまうようです。

まだIE11を使われているユーザー様もいらっしゃるので、現状、良い提案ではないみたいです。

もうひと工夫しないといけません。

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16432
 

IE11は、今後確実に利用者は減っていくので、前述のCSSを使用しても悪くなることはないかもしれませんね。
CSSが適用されなくても、特に問題ある表示ではありませんし、今後正しく表示される人は増えていくと思うので。


   
共有:

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

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

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

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

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

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

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

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