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

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

CSSのダイエット:[C] Faceb...
 
共有:
通知
すべてクリア

[解決済] CSSのダイエット:[C] Facebookボックスのmax-width・displayの値が重複

12 投稿
2 ユーザー
4 Reactions
1,631 表示
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
トピックスターター  

[C] Facebookボックスのスタイルを変更していて気づいたんですが、メディアクエリmax-width: 834px内の以下スタイルは不要なので削除しても良い気がします。

  .fb-like-box {
    max-width: 640px;
    display: block;
  }

https://github.com/yhira/cocoon/blob/master/style.css#L9210

  • 上記max-widthがいらない理由

すぐ下のスタイルで上書きされているので640px・none、どちらか1つは不要だからです。

  .fb-like-box {
    max-width: none;
  }

https://github.com/yhira/cocoon/blob/master/style.css#L9221


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
トピックスターター  
  • display: block;が不要な理由

現状はあってもなくても問題ありません。でも装飾する際、769px~839pxの間だけ、装飾がおかしくなるから不要だと思って。

https://gyazo.com/7614a749bf7b6d30758e4275b1268120

上画像は変。
下画像はdisplayの値がflexでちょっと見栄えが違って、良いかも。

https://gyazo.com/7fa4a7b99d70d5e4a0977018edb2451b

デフォルトの状態でチェックしても、なに一つ変化がないのでCSSダイエットにも良いかなと思った感じです。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
トピックスターター  

ちなみに、上のほうでdisplay: flex;の指定もキチンとあります。

.fb-like-box {
  background-color: #444;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
}

https://github.com/yhira/cocoon/blob/master/style.css#L6324

*****

デフォルト状態では、WindowsPCのIE・Chromeでしか確認してませんけど、display: block;の上書きは削除しても問題ないようです。

https://gyazo.com/705b05c27b51852512a29b5bcfaa3f9a

***

scss

https://github.com/yhira/cocoon/blob/master/scss/breakpoints/_max-width-834.scss#L180

https://github.com/yhira/cocoon/blob/41d44c1a60ce12303fd679d55abe25a022d3ffd1/scss/_defins.scss#L261

おまけ

https://github.com/yhira/cocoon/search?q=fb-like-box&unscoped_q=fb-like-box

*****

関係ないですが
[C] Facebookボックスのmargin-bottomの指定はないので、次の要素とピッタリくっつくかも。

https://gyazo.com/1840a3f47ce1324ebe9eda4199af20c7

  • 『余白用』と右端にかいているのは、HTMLウィジェットで文字列を入れただけ。
  • その下には広告ウィジェットで広告ラベルありにした状態です。

 

強い要望ではなく、CSSのダイエット感覚だけで。ちょっとした報告だと思ってください。


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

SCSSの方のソースコードを見てみると、fb_like_boxでincludeされるものを上書きするためにそのようにしていたようです(@mixinを変更するのが億劫だった)。
ただ、@mixinに引数を割り当てることで、出力しないようにもできるので変更しておきました。
https://github.com/yhira/cocoon/commit/19e2a9a9e160c94af6d353a4c0a9067d1a32755a
display: block;は必要なような気がします。
これがないと、画像と文字の部分が縦並びにならないからです。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
トピックスターター  

なるほど。noimage画像あたりのページで確認してしまったようです?

画像付きで再度、確認させてください(。>人<。)

以前も確認を怠った事があり、モバイルヘッダーとフッターがposition:fiexdになってるのが原因だと思って微妙に気持ち悪さを感じたことがあるので。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
トピックスターター  

個人的に不要だと思うところをチェックしてみました。

縦長の大きなアイキャッチ・小さなアイキャッチ・noimageとかでチェックしてデザインが現状と変わらないのを(時間的に)所々でチェックしました。漏れがあったらスミマセン。

CSSしかチェックしてませんけど、現状Version: 1.9.3.4親テーマstyle.cssの6331~6380行目

https://github.com/yhira/cocoon/blob/master/style.css#L6331

ダイエットできそうで、もしかしたらいらないかも。って思う所をコメントしてます。※scss的にものすごくややこしくて面倒!って感じもあるかと思いますけど。

/*
.fb-like-box .fb-like-thumb > *,
.fb-like-box .fb-like-content > * {
  min-width: 100%;
}
*/
.fb-like-box img {
  /* display: block; */
  width: 100%;
  height: 100%;
}
.fb-like-box .fb_reset {
  display: none;
}

.fb-like-thumb {
  /* max-width: 56%; */
}

.fb-like-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  /* align-content: space-around; */
  text-align: center;
}
.fb-like-content > div {
  padding-top: 8px;
}

.fb-like-message {
  color: #eee;
  font-size: 0.9em;
}

.fb-like-sub-message {
  color: #ccc;
  font-size: 0.7em;
  margin-bottom: 8px;
}

.fb-like-buttons {
  padding: 0;
  text-align: center;
}
.fb-like-buttons > div {
  margin: 8px;
  display: flex;
  /* align-items: center; */
  justify-content: center;
}

 

@media screen and (max-width: 834px)のくだり、9210行目

https://github.com/yhira/cocoon/blob/master/style.css#L9210

/*
  .fb-like-box {
    max-width: none;
    display: block;
  }
  .fb-like-box > div,
  .fb-like-box > figure {
    width: 100%;
    max-width: none;
  }
*/

 

見た目

https://bibabosi-rizumu.com/cocoon-header-logo-each-page/#toc9

noimageアイキャッチの見た目

https://bibabosi-rizumu.com/siteguard-captcha-none/#toc6

 

  • HTML・CSSの圧縮を切ってます。
  • 親テーマにコメントを入れたものを一時的に導入。(次FTPで親テーマをアップロードするまで)

~~追記~~

  • 子テーマでの[C] Facebookボックスの装飾は一旦、無効化済み
  • FBボックスの場所は記事下。
    広告
    FBボックス ←ここ
    SNSシェアボタン

https://gyazo.com/4dc467c2abff98fad669cf5679c98e37

この投稿は5年前 2回ずつかうたっくに変更されました

   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
トピックスターター  

わすれもの。

追記するコードを忘れてました!

@media screen and (max-width: 834px) {
	.fb-like-box {
		flex-direction: column;
	}
}

現状私のページでは親テーマの一番下に追記して書いてます。

これがないとダメじゃん!的な^^;


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

とりあえず確認して、不要そうなものは全て削除しておきました。
https://github.com/yhira/cocoon


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
トピックスターター  

https://github.com/yhira/cocoon/commit/77f89112c3b4209a745e63de378212326a00e208

とりあえずですが。ご確認いただいた作業。それ自体。

ありがとうございました! ? 

 

ご足労かけたような感じもしながら、需要面も考えてしまった節も、チェックしながら個人的にあったけど。よかったかも知れません?

いつも色んな対応されているのでお疲れ様です!ってほとんどの人がミンナ思ってると思います!

 

※分かってもらっているか不明ですが。ディスってません。初めてカスタマイズするときとかよくあるので、それをチェックしてくれる人が居れば。って思うけどいない。
またそんなマニアックな事を誰もしない。って言う面もあってのことです。うまく言えませんが。

プチダイエットが出来ていて、少しだけでもダイエットができてれば、それでいいかな。って思います。コチラのタイミングで、イラン事言って申し訳ないです^^;

この投稿は5年前ずつかうたっくに変更されました

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

全然、ディスってるなんて思ってませんよ笑
現段階でのCocoon開発では、とてもじゃないけどCSSダイエットのことを考える時間も余裕もないので、滅茶苦茶助かります。
機能を作ってスタイリングするとき、とりあえずいろいろ試すので、いろいろ試したCSSの残骸を消し忘れているのは、結構あると思います。
そう思えば、他の機能でもダイエットするところはまだまだありそうですね ? 

それにしても、今回結構ダイエットできましたね。


   
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
トピックスターター  

全然、ディスってるなんて思ってませんよ笑

良かったです(笑

実際ディスる要素が全くないですし^^

そう思えば、他の機能でもダイエットするところはまだまだありそうですね ? 

設定が多いのでスリムになり切れるか分からないですけど、また機会があれば!そしてダイエットの気力が出た頃、またチェックしてみますね❦

AMPが無けりゃ・・・ ですねっ? ? 

対応お疲れさまでした!


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

AMPさえなければ、そこまで気を遣う必要もないんですけどね ? 
もちろん、余計なコードが少なければ少ないほど良いのは間違いないんでしょうけど。


   
共有:

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

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

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

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

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

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

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

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