Cocoonフォーラム

前略、cragycloud さん ダウングレードに用いたプラグインが有効になったままで、プラグインによって表示されないようになっている、ということはありませんか？

手前味噌ですが・・ Windows10でスクリーンショット (キャプチャ)を撮る方法

匿名さん CSSやhtmlを編集する際は、文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができるテキストエディタをお使いになることをオススメします。 私のお気に入りのエディタは、Meryというエディタです。 Macでしたら、CotEditor あたりがよ...

匿名さん あと、104行目にも余分な大なり記号があるみたいです。  476866a146b55f70b897fa116c81f349.png

匿名さん あとやはり、子テーマの style.css の記述の133行目に、BOMとみられるような余分な文字がありますね。  bd270d84106c86aa43d5f289a89450c1.png

匿名さん 子テーマのstyle.cssにお書きになった、以下のコードを削除すると、どうなりますでしょうか？ /* 記事を真ん中に */ #main{ float: center; margin-right: 5%; padding-right: 5%; margin-left:...

匿名さん 確かにスマホ表示だと、横スクロールバーが表示されているようですね。  bfe3b5663bae073cf8885e6b08c34b08.png

匿名さん 「ABOUT」「WORKS」のページを拝見しますと、コンテンツ幅が、1256px となっていて、コンテンツ部分が左右中央に、それ以外が背景となっています。 コンテンツ幅を定めておかないと、文章やコンテンツを入れた場合に画面幅いっぱいに広がってしまい、文章などは、読みづら...

@puppy さん CSSの要領がわかってきたら、他の方のお問い合わせに回答なさってみてください。

CSSのセレクタを、適切に記述するには、デベロッパーツールを使い慣れていくと良いのかもしれません。

セレクタが li.logo-menu-button.menu-button だけだと他の不要部分への影響が懸念される場合は、li タグの親タグである、ul タグの classセレクタを親セレクタにして、子孫セレクタにしておくと良いかもしれません。 .mobile-header-menu-butt...

上記の内容から、以下のコードで、ロゴのボタンを非表示にできることがわかります。 li.logo-menu-button.menu-button { display: none; }

表示されたセレクタに、display: none; と書き込んでみます。  cad9ce27610ef74be3ecd61887473f45.png

すると以下のようなセレクタが表示されますので、  dd6eff3642dff42058e5fc462663c9d1.png

左ペインでロゴの li タグを選択した状態で、右ペインの「+」マークをクリックします。  81a76838778c4deb13caae04fbdc1967.png

上記の方法では、ロゴの文字だけを消しました。 では、ロゴの文字があるボタンごと消したいときはどうするかと言うと、文字が入っているボタンのタグをデベロッパーツールで探して、選択します。 この場合は、すぐ上にある「li」タグがボタンのようです。 46ba37c6f5a37b...

上記の内容から、以下のコードで、ロゴが消えることがわかります。 .mobile-menu-buttons .menu-button > a { display: none; }

すると、左側のエニュミレータのロゴの表示が消えるかと思います。  fa6f6af035917221bf3eb3264eeaf909.png

右ペインに表示されいる、 .mobile-menu-buttons .menu-button > a { display: block; color: #333; text-decoration: none; } のうちの、 display: block; を disp...

@puppy さん デベロッパーツールをスマホ表示にして、調べたい箇所（この場合はロゴの真上）で右クリックして、Google Chrome なら、「検証」をクリックします。 すると、その部分に関する情報がデベロッパーツールに表示されます。  1146f18e7b521b...

AMPページでは、モバイルボタンは表示されないと思います。

しいなさん AMPページについては、以下のトピックが参考になるかもしれません。 AMP対応は本当に必要なことなのでしょうか。みなさんどう思いますか？

しいなさん ダッシュボードのCocoon設定をクリックすると「キャッシュ削除」という項目が一番下に表示されますので、それを選択し、「AMPキャッシュの削除」をクリックし、本当に削除してもいいですか？と表示されたら、「OK」をクリックします。 あとは、サーチコンソールから、新しいサイト...

前略、しいなさん おそらく、ampページが表示されているからだと思います。 ampページについてよくわからない場合は、cocoon 設定のAMPタブでampページを利用しない設定にすると良いかもしれません。

前略、匿名さん アピールエリアは、画像をhtmlの「背景画像」として表示します。 htmlでは、背景画像は画像自体では「高さ」を持っていません。 そのため、画像のアスペクト比を保って表示するには、以下のようなCSSでの表示指定が必要になってきます。 #appe...

前略、puppy さん HTMLとCSSの基本的な操作であれば、それほど期間がかからずに習得ができるかと思います。 いままでの puppy さんのフォーラムへの書き込み内容から、充分、ご自身で出来るのではと推測しています。 ちょうど良い課題ですので、ご自身でやってみること...

あと、プラグインの「WP Multibyte Patch」は日本語環境では必須だそうなので、イントールしておいた方が良いかもしれません。 それと、Cocoonのスキンをお使いにならない場合は、Cocoon設定の「スキン」タブで、スキンの「なし」にチェックを入れて、「変更をまとめて保存」ボ...

「追加CSS」は、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」と たどると開けます。 コードをコピペしたら、すぐ上にある、青色の「公開」ボタンで、追加CSSの変更を確定します。

計算式は、以下のような感じです。 #appeal { height: 数値vw; } 背景画像の高さ÷(背景画像画像の幅+17px(縦スクロールバーの幅))×100＝数値vw デベロッパーツールに仮のコードを書いて、サイトの表示をブラウザで確認して、数値を微調整す...

前略、kasama さん 以下のコードを追加CSSか、子テーマのstyle.cssにコピペすれば、モバイルでも画像が表示されるようになるかと思います。 #appeal { height: 28.9vw; }

わいひらさんの記事が参考になるかも・・ WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）

DAIKI さん lazyloadについても、現在は重複していないようです。

DAIKI さん ｍｋ２さん 私の環境では、contact-form-7のエラーが１つ出ているようですが、見た目やトップへ戻るボタンの機能は正常に見えています。

DAIKI さん 私が気になったのは、Cocoonの設定ではなく、プラグインの中でlazyload機能が備わっているプラグインがあれば、その機能を停止しておく、という意味です。

mk2 さん DAIKI さん 私の環境でも、見た目や機能とも正常に見えています。ただ、トラブルの予防的な観点から、プラグインの lazyload 機能が有効化してある場合は、無効にしておいた方が良いのではないかということです。

DAIKI さん まだ、どうもモバイル表示でlazyload が有効になっているような気がします。 Jetpackの画像遅延読み込み機能「lazy load imeges」は無効になっていますか？

DAIKI さん プラグインの中にlazyload機能を有効化しているものはありませんか？ 例えば、jetpacK とか・・

ｍｋ２ さん JavaScript の エラーは、プラグインの「Async JavaScript」が関係している可能性もありますね？ DAIKI さん モバイル表示では、画像の遅延読み込み機能が有効になっているような気がします。 WordPress5.5からは、画像の...

DAIKI さん 念のため、ブラウザのキャッシュをクリアしてみましたが、私の環境では、アイコンフォントがまだ表示されていません。 もう少し調べてみます。  52abe4ab1784204120fad77c78b69363.png

DAIKI さん 高速化設定を無効にしたため？か、私の環境ではアイコンフォントは表示されないものの、トップへ戻るボタンが表示され、クリックすると機能するようです。 前述しましたとおり、プラグインのAutoptimize は、削除することをオススメします。 top-01-...

ladybeatle さん ヘムテルのサポートページを以下に貼り付けてみます。 WordPress のインストール 簡単インストールを利用すると、データベースも作成してくれるようですが、そうでない場合はデータベースを作成する必要があるかと思いますが、その辺りはいかが...

前略、adybeatle さん これ、例えば、テーマを「Cocoon」ではなく、WordPress同梱の「twentytwentyone」を有効化しても同様なのでしょうか、それともCocoonのテーマにしたときに限ったことなのでしょうか？ と言いますのは、WordPress同梱の「t...

@charlie さん あと、別件ですが、PHPのバージョンとCocoonの親テーマのバージョンが古いようです。 PHPは、7.4系に、Cocoonの親テーマは2.2.9にアップデートすることをオススメします。 また、プラグインのWP Multibyte Patchのイン...

@charlie さん 環境情報をありがとうございます。 プラグインの「Head, Footer and Post Injections」を停止して、バリューコマースの広告が表示されるかどうか試してみてください。

NEO さん AMPページは、回線速度が遅い場合でも、早めにWebサイトのデータを読み込んで表示されるようにしたページです。 軽いデータで早めに読み込まれる(表示される)利点がある一方で、デザインや機能に制限がかかる難点があります。 以下の過去のトピックのやりとりが、参考...

前略、NEO さん 私はツイッターのアカウントすら持っていないので、よくわかりませんが、「該当ツイート」のページのリンクのURLを見ると、AMPページへのリンクになっているみたいです。 AMPページでは、ほとんどのJavaScriptが機能しないため、通常のページへリンクするようにし...

DAIKI さん ｍｋ２さんご案内の、「Cocoonの高速化設定を無効にする方法」は以下のリンクのページに、わいひらさんが書いてくださっています。 高速化設定を無効にするには

前略、DAIKI さん 過去のフォーラムのトピックでの経験から、プラグインの Autoptimize とCocoonの高速化設定を併用すると不具合が生じてしまうようです。 Cocoonをお使いになる場合は、Autoptimize は削除してしまった方が良いような気がします。

charlie さん 以下のコードに見覚えがあるはずです。  e6674d3a1c71b68ee5aaed06f392d7b3.gif

charlie さん フォーラム冒頭の案内にありますとおり、対象ページのURLをご提示いただき、環境情報を貼り付けていただければと思います。 環境情報の取得方法