Cocoonフォーラム

前略、初心者 さん 私も あまり詳しいことはわからないのですが、ローカルのテストサイトで他のスキンでも試してみたのですが、色は変更できるものの、太さの見た目が変わらないみたいです。 実際は、太さの指定がなされているようなのですが、１pxと、値が少ないので、変わっていないように見える、...

@es さん 追記していたら、解決されたようで、良かったです。

@es さん 現況の表示を確認する際は、「WP-Super-Cache」のようなキャッシュ系のプラグインは停止して、Cocoonの高速化設定の「ブラウザキャッシュ」も無効にしておいた方が良いような気がします。

@es さん 私のWindows環境では、Chrome でも特に問題なく表示されているようです。 キャッシュをクリアしてみるとどうでしょうか？ キャッシュと Cookie の消去 Chrome2020-12-07-005650.png

@yasu さん 一番下の波括弧が抜けていました。 #breadcrumb { width: 100%; padding: .6em calc((100vw - 1230px)/2);}@media screen and (max-width:1256px) { #breadc...

@yasu さん ちょっと苦し紛れではありますが、以下のCSSで試してみました。 #breadcrumb { width: 100%; padding: .6em calc((100vw - 1230px)/2);}@media screen and (max-width:1256px)...

前略、yasu さん ちょっと、試している時間がないので、それっぽいリンクだけ貼ってみます。 子要素をコンテナーからはみ出して画面いっぱいに広げる方法 子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS 「コンテナの外側まで表示を広げる css...

前略、komitsu2030 さん Cocoonの機能に添付いただいたようなものが見つけられなかったので、もしかしたら、見出しのデザインなのではないかと、勝手に推測してみました。 試しにｈ４の見出しデザインに以下のCSSのコードを適用してみたら、それっぽくなりました。 .arti...

@プー さん いつもお世話になっております。 ご案内いただいた方法を興味を持って拝見しています。 私は、PHPの素養がないので、勉強になります。 「フロントページタイプ（β版）」も、多くの方が手軽に利用でき、（β版）の文字がなくなるといいなと思います。

@yhira さん 「タブ一覧」と「大きなカード（先頭のみ）」との組み合わせでも、タブを「新着記事」以外のカテゴリのタブを選択すると、やはり先頭の大きなサムネイルがぼやけてしまうみたいです。 「フロントページタイプ（β版）」は、まだ β版 とのことのようですので、開発のヒントになれば...

@yhira さん 「タブ一覧」との組み合わせでは、ちゃんと大きなサイズの画像を読み込んでいるみたいです。  6cce59874d37e59c781ba8ca42e3810d.png

@yhira さん フロントページタイプ（β版）の設定で、 ・カテゴリごと・カテゴリごと（２カラム）・カテゴリごと（３カラム） とカードタイプを「大きなカード（先頭のみ）」と組み合わせたときの先頭の大きな画像の表示を確認した方が良いかもしれません。

@yhira さん ここの添付で、ぼやけ具合が伝わるかどうか・・・  8dfa15cc8a38bad5756e85f17a3fb15f.png

@yhira さん 私のテスト環境ではレティーナ対応はしていませんが、やはり先頭の大きなサムネイルがぼやけてしまうみたいです。 ソースを見ても、320px × 180px　と小さなサムネイル画像を読み込んでいるみたいです。 7d680295555d24ea932...

Begiblo さんの場合は、もともと、画像がヘッダー全体にピッタリ収まっていなくても良かったんですね。 でも、まあ、ピッタリ収めたいという方が、トピックを検索して、このトピックに来るかもしれないので、まあ、いいか・・  9fe151fbf54a926c34d4ae...

ヘッダー画像に「背景画像」を使った場合でも、CSSのコードを使わなくても、Cocoon設定の「ヘッダー」タブの設定で「高さ」と「高さ（モバイル）」の２箇所に「背景画像」に合った数値を入れれば、ある程度、体裁を整えることが可能かと思います。 でも、どの画面幅でも、ヘッダー画像の一部が隠れな...

ヘッダー画像設定イメージ  0f628009353d022513c28c20ed04e552.gif

前略、Begiblo さん Cocoonのヘッダーのデザインは、このCocoonのサイトのように「背景画像」と「ロゴ画像」の2枚の画像を使う仕様になっています。 本来は２枚の画像を使う仕様なのですが、1枚だけでデザインしたい場合もあろうかと思います。 ですので、画像を1枚...

西村さん お久しぶりです。 今、出先なので、リンクを貼りますので、参考にしてみてください。

今、出先なので、よく見れませんが、以下のリンクは、参考になりますでしょうか？

@SAKU さん いただいた文面ですと、Cocoonの広告設定と広告設定用のプラグインが干渉していたのか、それとも、目次プラグインか何かをお使いになられていたのかは、ちょっとよくわかりませんが、解決されたようで何よりです。

@bucho さん 私のテストサイトでも、試してみました。 Cocoon設定のインデックスタブのフロントページタイプ（β版）の設定で、カードタイプを「大きなカード（先頭のみ）」と組み合わせると、 ・一覧（デフォルト）・タブ一覧 の２つは、ぼやけないですが、 ...

@SAKU さん 私はプログラムのことはよくわからないですが、似たような機能のプログラムを併用した場合、干渉してしまうこともあるのでしょうか？

@SAKU さん プラグインの目次を停止して、Cocoonの目次にしてみましたが、ショートコードでは、ちゃんと目次上に表示されるみたいです。  4bcfbbebe72c2aeff7f40c7c18ee7b3c.png

前略、SAKU さん 今日、同じご質問があったみたいです。 広告設定で「本文中」に設定しても、目次上に広告がこない

前略、石谷陽子 さん 以下のCSSのコードを追加CSSか子テーマのCSSにコピペすれば、消せるような気がします。 .front-top-page .list-new-entries-title.list-title { display: none;}

なにしろ、自動広告は一度も使ったことがないので、このショートコードの機能が、自動広告を使っている場合でも利用できるのかどうか、私にはわかりません。 他のどなたかが、書きこんでくださるでしょう。

前略、匿名 さん Adsenseの設定で自動広告がONになっている場合は、広告の位置の制御は難しいみたいです。 私は、自動広告は使っていないので、試しに以下の方法で、最初のh2の見出しのすぐ上に、ショートコードを設置してみたら、目次の上に広告が表示されました。 ショートコ...

@ぜき さん もし、ヘッダー画像を「ヘッダー背景画像」を使ったデザインに変更される場合は、背景画像に合った高さを設定してくだささい。 ヘッダー画像が「背景画像」の場合は、高さは自動的に調整されません。 今は、空欄でOKです。

@ぜき さん ひとつお伝えするのを忘れていました。 どの画面幅でもヘッダーロゴ画像を隙間なく表示するには、先にお伝えしたCSSのコードの他に、Cocoon設定の「ヘッダー」タブの設定で「高さ」の数値を消しておいてください。 高さはロゴ画像によって、自動的に変わると思います...

@ぜき さん 「Autoptimize」は、Cocoonの高速化機能と併用すると不具合が出るようですので、Cocoonをお使いになっている限りは不要かと思います。

@nyan319 さん それでしたら、シンプルに以下のコードでイケそうな気がします。 .article h4 { border: none; font-size: 30px; margin: 10px; text-align: center; background-ima...

@ぜき さん 画像関連のプラグインで lazyload 機能がついているものもありますし、その他のプラグインでlazyload 機能を持っているものもあるかと思います。 現在は、WordPressに lazyload 機能が標準で備わっていますので、プラグインのlazyload機能は...

@ぜき さん Cocoonの高速化設定をするだけで、 .lazyload { display: none;} が指定されるとは、ちょっと考えにくいので、何か別の要因と重なって、指定が生じるのではないかと推測します。 例えば、何かのプラグインの影響とか・・

@ぜき さん どこかで以下の指定がなされているようです。 .lazyload { display: none;} Cocoonの高速化設定をOFFにしていただけると、状況が掴みやすいです。

@nyan319 さん 以下のコードでイケるっぽいです。 .article h4の text-align: center; を削除。 position: relative; 追加 .article h4::before の。 vertical-a...

書き込みテスト

@yhira さん すみません。移動は出来ないと思っていました。 ?

テストサイトで試してみました。 8166eb0e283a3db39badc3cf08fe5216.gif 下の方にちょっぴり隙間っぽく見えるのは、画像の下端に補足白い部分があるためです。 画像の方を修正すれば、消えると思います。 &...

@ぜき さん ヘッダーロゴ画像を隙間なくピッタリ収めるには、以下のコードを子テーマのCSSファイルか、追加CSSにコピペすればイケるかと思います。 追加CSSは、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」で開けるかと思います。 追加CSSの変更を確定するに...

ぜき さん ヘッダー画像の端から端までクリックできるようにするには、現在お使いの背景画像の方だけを、ロゴ画像の方に設定して、CSSのコードで、ヘッダーにちょうど収まるように調整します。 ただ、その場合は、１枚の画像しか使えず、現在お使いのロゴ画像の方が使えなくなってしまいます。 ...

前略、ぜき さん ①に関しましては、ちゃんと表示されているようです。 ただ、ロゴ画像が小さいので、重なっていて、目立たないのだと思います。 ②に関しましては、Cocoon設定で設定が可能です。 ただ、ヘッダー画像全体のどこをクリックしてもトップに戻るようにするには、独自のカス...

haukamu88 さん ボックスメニューは、基本的にメニューなので、カテゴリーへのリンクだけでなく、個別の記事にもリンクできるようです。  8ddfe660947cf7690982f33890b79a13.png

haukamu88 さん もう少し、高さや、色など、微調整が必要かもしれませんが、独自メニューウィジェットとしても使えそうな感じです。  e8c0070fe21104c16c967c2f1482061f.gif

前略、haukamu88 さん いただいたご説明だけですと、用途の詳細が掴めないのですが、添付画像を拝見しますと、タブというか、メニューの役割を担っているようにも見えてしまいます。（間違っていたらごめんなさい） と、いうことは、Cocoonの「ボックスメニュー」でも似たようなことがで...

トピックを検索されたときに、トピックのタイトルと関連がありそうなので、リンクを貼っておきます。 （ウィジェットを横並びにするコード等を含むので） 【教えてください】

@Toru A さん 通常なら、LINEでも表示されるはずなのですが、どうしてでしょうね？ まだ、LINEにキャッシュされていないのであれば、待っていれば表示されるかと思うのですが・・ ただ、以下のリンクの記事などを見てみると、縦長の画像は、あまり適していないのかもしれま...

@きりみ さん 以下のトピックにCSS関連の基礎を学ぶリンクがあります。 お時間のある時にでも、ご覧になってみてください。 【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

@きりみ さん 子テーマのCSSのコードに余分な波括弧が残ってしまっています。 そのため、ヘッダーロゴ画像を上下中央に配置するためのコードが無効になってしまっています。 50行目にある、波括弧です。 d8ed498ac06ac49e94857dc6f...