Cocoonフォーラム

上記の内容から、以下のコードで、ロゴのボタンを非表示にできることがわかります。 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をご提示いただき、環境情報を貼り付けていただければと思います。 環境情報の取得方法

前略、charlie さん ソースコードを拝見しますと、バリューコマースの広告コードがあるようです。 よくわかりませんが、プラグインで広告を挿入できるようなものは入れていませんか？

前略、ume さん 本来は、依頼した希望どおりになっていない場合は、発注先に問い合わせれば良いはずですが、このフォーラムにいらしたということは、すでにそれはなさっているのかもしれませんね。 親身になって相談に乗ってくれるところを見つけるのも、ひとつの方法かもしれません。 ...

前略、nafokof さん 私は自分のサイトでは２カラムは１度も使ったことがないのですが、フォーラムに回答する折に何度か使って試してみたりしたことがあります。 PC表示のときは、左右の比率が設定できる？ようですが、どうも画面幅が600pxから781pxの画面幅のときは、50対50にな...

はるさん いつもお世話になっております。 1枚目は通常通りで、添付して投稿した後に、編集ボタンで、編集状態にしたところで、編集は何もせずに、参照ボタンをクリックして２枚目を添付しています。

前略、きりみさん Cocoonのインデックスタブの設定で、カードタイプを「タイルカード２列」にした場合は、左右のエントリーカードの高さは揃いません。 その代わり、サムネイル画像がトリミングされずに、画像全体が表示される利点があります。 左右のエントリーカードの高さを揃える...

MMMさん 私の書いたCSSのコードは、SILKの縦型のブログカードをCocoonのデフォルトの横長ものにするためのものです。 SILKの横長のものに使うことは想定していません。 SILKのオプションで、縦型のブログカードに戻した上で、CSSのコードを適用してみてください...

@7dawne2 さん あと、画面が小さいパソコンの場合は、大きなディスプレイを買って接続して、２画面で作業するという手もあります。 ディスプレイを買わなくても、テレビに繋ぐという方法もあります。

@7dawne2 さん パソコンの画面が小さいときは、Windowsのタスクバーの設定で、「デスクトップモードでタスクバーを自動的に隠す」をONにしておくとか、作業によっては、タスクバーを画面下に移動する、などすると良いかもしれません。 超簡単！Windows10 タスクバーの位置を...

前略、ガーフィーさん もし、ガーフィーさんが、SILKのデザイナーだったら、この文章を読んだらどのように感じるでしょうか。 SILKのデザイナー様は、最も良いと思って、このデザインを選んでいるのではないかと思います。 お気に召さないときは、別のスキンを使うか、ご自身で...

ヒサシ さん 現状は、左右のpaddingは 16px ずつになっているようなので、10pxずつに減らして書いてみました。 もっと少ない方がよければ、適宜数値を変更してください。 前述しましたとおり、ゼロはオススメいたしませんが・・

前略、ヒサシ さん 子テーマのCSSにファイルにお書きになっている以下のコードに替えて、 @media screen and (max-width: 480px) { .entry-content > * { margin-right: 0; margin-l...