Cocoonフォーラム

前略、ハヤトさん Cocoon設定の「エディタ―」タブの設定で、「エディタースタイル」のところの「エディターにテーマスタイルを反映させる」にチェックは入っていますか？  c38b558861e45d3bf9a48891defc81d6.png

誤記訂正 × 読みずらい 〇 読みづらい

bucho さん タイトルが長い場合も考慮すると、タイトル下にもマージンを付けておいた方が良いのかもしれません。 .entry-card-title { min-height: 3em; margin-top: .5em; margin-bottom: 1em;}.entry-card...

bucho さん スニペットの上の位置を揃えた方が、カッコイイかもしれません。 ちょっと、タイトルが長い場合のテストをしていないので、アレですが・・ .entry-card-title { min-height: 3.5em; margin-top: .5em;}.entry...

bucho さん 1.8 より、1.9 の方が、ちょうど４行で、いいのかもしれません。 .entry-card-snippet { line-height: 1.9;} いろいろ調整してみてください。

bucho さん あと、スニペットの行間も少し広げた方が、ゆったり感がでるかもしれません。 .entry-card-snippet { line-height: 1.8;} ただ、抜粋が長いと入らないので、Cocoon設定の「インデックス」タブの「自動生成抜粋文字数」で、少し減らさないと...

前略、bucho さん 出力されているHTMLの構造や、タイトルが１行のときと複数行になったとき、画像の横並びの高さがズレてしまうことなどを考えると、カスタマイズせずに、そのままお使いになった方が良いような気がします。 エントリーカードのタイトルの上下に少し余白を足すと、ごちゃごちゃ...

前略、レビュ男 さん 今回の原因とは無関係かもしれませんが、もし、子テーマをお使いになっていない場合は、子テーマを導入されることをオススメします。 子テーマを有効化して、子テーマ側ですべての設定を行っていれば、親テーマのCocoon設定をリセットすることも可能です。 ...

でも、サイドバーの padding と、メインカラムの幅の比率のところは、何かのヒントになればと思います。

わいひらさん どうやら、また、私の勘違いだったみたいです。 ローカルのテストサイトではなく、運用サイトでメディアクエリの切り替えの数値を増やしてみたら、上手くいかなかったので。（もっとも、この運用サイトはカラム幅の切り替えをカスタマイズしているところがあるので、テストの基準にはならないのです...

以前から以下のようだったか・・？ ちょっと、よく覚えていません。すみません。 72b86d44fbd021ce52c28c85432ebe42.gif

横スクロールバーが、メディアクエリの切り替え時に画面幅の少ない範囲で出るのは、安全策をとって、メディアクエリの数値をやや少なくして、カラム間の幅が広くなったりすることを防ぐ役割を持っていたような気もします。 でも、現状ほど被せていなかったような気がするのですが・・・私の勘違いかもしれませ...

デベロッパーツールでのテスト  4759042dcd334912029ea0edf37ef3f7.gif

また、サイドバーの padding を増やされたときに、メディアクエリの切り換え時の padding値を変えなかったので、切り替え時に少しギクシャクした感じになっているようです。 画面幅を縮めたときのサイドバーのpadding値を「10px」から「1.5％」に変更すると、ギクシャク感がと...

例えば、Cocoonのサイトの「.wrap」の値は、1276px で、メディアクエリの切り換え値は、1280px と、やはり、４px 足した値になっていますが、これを、1300px にすると、スムーズに切り替わるような気がします。

@riyu さん Webサイトのソースコードで、空のpタグが沢山使われているのは、あまり良くないのかもしれません。（でも、そうは言いつつも、私も、けっこう使ってしまっているんですけどね。） <p>記事の文章の文字列</p><p></p>...

Karol さん 【「カテゴリごと」表示でカード表示数を変更する場合はこちら】の文字をクリックすると、エントリーカードの表示数も変更できるようです。 小さな文字をクリックしないと、表示数の変更のところが出てこないので、ちょっと気づきにくいです。 あと、実際のURLを提示す...

Karol さん 実際のページを見ていないので、現況が何ともわかりませんが、Cocoonのフロントページタイプを利用すると表示タイプも選べますし、サポートも範囲内となると思われるので、オススメです。 Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法 ...

前略、Karol さん おそらく、新着記事のショートコードも表示タイプによって、生成されるサムネイル画像のサイズが異なるのではないかと推測します。 詳しいことは、わいひらさんが書いてくださるかと思いますが、実際に表示されるサイズのサムネイル画像が生成されるように、設定し直さなくてはな...

@suu0116 さん WordPressを初めて利用する場合だと、「固定ページ」をトップページにして、「ブログ投稿インデックスページ」を「お知らせ」ページに割り当てる、と言ってもなかなか難しいかもしれません。 現況のように「お知らせ」というカテゴリーを「お知らせ」ページに割り当てる...

kouichi さん kouichi さんでしたら、調べればわかるはずです。

kouichi さん 画面幅834px以下は以下の方がいいかもしれません。 @media screen and (max-width:834px) { .header div.header-in { min-height: auto; height: 55vw; }}

suu0116 さん よくわからないが、早く作りたい、といった場合は、有償になってしまいますが、プロに依頼するという方法もなくはないです。 Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】

kouichi さん たぶん、要らないと思いますが、上記のコードだけではスマホ表示でヘッダーの高さが足りないときは、以下を足してみてください。 @media screen and (max-width:834px) { .header div.header-in { min-heig...

kouichi さん 余白はサファリに限ったことではないみたいです。  a46b9c926c40274d22a18eba2f6a66d0.png

前略、kouichi さん 以下のコードだと、どうなりますでしょうか？ .header .header-in { min-height: auto; height: 29.39vw;} これだけで、足りないときは、ちょっとまた、足すかもしれません。

suu0116 さん グローバルメニューのメニュー項目を拝見した感じでは、「お知らせ」のページをブログのインデックスページに割り当て、他のページは「固定ページ」で作成、というような印象を受けました。 お知らせ一覧ページがブログ投稿インデックスページとなり、そこに載せる記事は、「投稿ペ...

suu0116 さん 「投稿ページ」「固定ページ」は以下の画像のところから辿って作成できます。 先ずは、WordPress の 記事の投稿の基本的なやり方や「投稿ページ」「固定ページ」のそれぞれの役割を、学べばよいかと思います。  a6de6b196af58e4...

前略、suu0116 さん WordPressの記事を書くときによく使われるのが、 ・投稿ページ ・固定ページ の２種類です。 「投稿ページ」はブログを書く時などに良く使われ、「固定ページ」は通常のホームページの１ページのような用途で使われることが多いです。 ...

ぐり さん あと、サイドバーの「最新の投稿」を「新着記事」ウィジェットに変えると、サイドバーの新着記事リストにもサムネイル画像が表示されると思います。 「メタ情報」は表示しなくてもいいかもしれません。

わいひらさん エントリーカードのカテゴリー表記は、投稿日のコンテナの「entry-card-meta」にも出力されていたんですね。 display: none; を解除したら出てきました。 サムネイル画像の中じゃない方が良いと言う場合は、投稿日の付近にも表示できるように配...

猫ちゃんさん そう言えば、私も「解決済み」って、やった記憶がないです・・ ?  ea2f9a685c1a29f4e995b76c5142fd77.png

猫ちゃん さん 投稿ページ下の関連記事のカテゴリーラベルは、とても小さいので、枠線の上に持ってくるより、消してしまった方がスッキリするかもしれません。 .related-entry-card .cat-label { display: none;} 0fdbd54a333c30...

猫ちゃん さん ちょっと、他の部分にも影響していまわないか心配なところもありますが、試しにコードを書いてみました。 .entry-card-wrap.a-wrap.border-element { position: relative;}.entry-card-wrap .entry-ca...

前略、チャッカマン さん 「みるらいと」の場合は、CSSの読み込み順のためか、親テーマの指定が上書きされているようです。 .micro-balloon { background: transparent; border: 1px solid #b3ada8; border-radius...

「みるらいと」だと表示がおかしいですね。 c3dc88085f29866034bfeaedd3f40387.png  98d5f3fd6ef9afad171b7ce6eff340d1.png

猫ちゃん さん CSSを記述する場所は、子テーマの style.css ファイルか、追加CSS のどちらかになります。 子テーマの style.css ファイルに記述する場合は、ダッシュボードの「外観」→「テーマエディター」とたどると開けます。 あらかじめ、そこに記述して...

猫ちゃん さん 先ほどの、コードを適用したときのサンプル画像を貼っておきます。 私も、どちらかと言うと、Simplicity2 のように、カテゴリのラベルは、アイキャッチの中ではない方が好みです。 912eba8ade07fa46b22c1e2d049af78f.png...

猫ちゃん さん スキンを別のに変更したりすると、また調整が必要かもしれません。 この辺りのデザインは、けっこうデリケートなんです。

猫ちゃん さん 「みるらいと」だとこんな感じ。  704208987132af374101f723731f3f4d.png

猫ちゃん さん スキンを、「COLORS」系の６種類のどれかにすれば、ランキングの数字は、わいひらさんと同じようになるような気もします。 62e80bcfdcd6d88973830dc784608b46.png  f323037b765238e7e0f4dfd7c46...

前略、猫ちゃん さん はるさんのおっしゃるように、投稿ページの関連記事などに影響が出ないように、また、スマホ表示も考慮しなくてはならなので、簡単にはいかないです。 .entry-card-wrap .entry-card-thumb { margin-top: 30px;}.entry-c...

前略、猫ちゃんさん 見本となるページのリンクを貼っていただけますか？

きいちゃん さん あと、子テーマをお使いになられていないようなので、子テーマを導入されることをオススメします。 以下の過去のトピックをお読みいただければ、その理由がわかると思います。 [解決済] 親テーマと子テーマについてです。 Cocoonテーマをインストー...

前略、きいちゃん さん Cocoon設定の「インデックス」タブの設定に「投稿関連情報の表示」という項目があります。 そこの「スニペット（抜粋）の表示」のところにチェックを入れて、「変更をまとめて保存」のボタンをクリックします。 831139b584b0427b84b41...

ぐり さん Login rebuilder もセキュリティー関連のプラグインだったのですね。 複数インストールすると、問題が出る可能性があるので、1つの方が良いかと思います。

ぐり さん あと、これは余談ですが、トップページはフロントページタイプがオススメです。 ショートコードを使わなくてもよいので、簡単に導入できます。 Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法 Cocoon 2.1.6公開。フ...

ぐり さん もう一つ重要なことですが、子テーマをお使いになられていらっしゃらないようなので、子テーマの導入をオススメします。 これは、テーマ作者様も推奨されています。 子テーマを導入し、Cocoon設定や各タグの設定等も全て子テーマで行うことをオススメします。 ...

前略、ぐり さん ソースコードを拝見したところ、トップページが noindex となっていて、他の記事のページは noindex タグは見当たらないような気がします。 トップページの編集画面の下の方にある「SEO」の欄の「インデックスしない（noindex）」にチェックが入っていたり...