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

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

トップページのカスタマイズ
 
共有:
通知
すべてクリア

[解決済] トップページのカスタマイズ

33 投稿
3 ユーザー
14 Reactions
3,034 表示
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

いつもお世話になります。
今まではトップページをサイト型にするのに固定ページを作っていたのですが、
最近インデックスタブを知り、先ほど使用してみました

(わいひら様、いつも新機能ありがとうございます)

そこでお聞きしたいのですが、一番上の新着のさらに上に「おすすめ記事」のナビカードを持ってくることは
可能でしょうか?

 

サイドバーに配置でも良いのですが、今までおすすめ記事の下に新着を持ってきていたので。

もし可能なら教えて頂ければ助かります。

お忙しいとは思いますが、どなたか宜しくお願い致します。

 

サイト名:引きこもり日記
サイトURL: https://goma58.com
ホームURL: https://goma58.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-fuwari-kachiiro/style.css
WordPressバージョン:5.4.2
PHPバージョン:7.2.32
ブラウザ:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.1.8
カテゴリ数:7
タグ数:4
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
style.cssサイズ:2425バイト
functions.phpサイズ:357バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Broken Link Checker 1.11.12
Category Order and Taxonomy Terms Order 1.5.7.1
Classic Editor 1.5
Contact Form 7 5.1.6
Edit Author Slug 1.6.1
Google XML Sitemaps 4.1.0
Post Types Order 1.9.4.2
Really Simple SSL 3.3.1
SiteGuard WP Plugin 1.5.0
TinyMCE Advanced 5.3.0


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、ann さん

トップページをフロントタイプにしていても、ウィジェットは通常どおり使えるようなので、テストサイトで、「インデックスリストトップ」のエリアに「[C]ナビカード」ウィジェットを入れてみました。

 

「ナビカード」ウィジェットは、基本的に縦に並ぶように作られているようで、以下の画像のようになります。

 

これだと、スマホのときは良いけど、PCだと、なんだか見た目がイマイチのような気もします。

 

 

This post was modified 4年前 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

そこで、ナビカードウィジェットの表示タイプを「タイトルを重ねた大きなサムネイル」にしてみると、案の定、縦にならんでしまいます。

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

そこで、試しに以下のようなCSSを書いてみると、横2列に並びました。

.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb-on {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
Width: 48%;
}

@media screen and (max-width:480px) {
.navi-entry-card-link.widget-entry-card-link.a-wrap {
Width: 100%;
}
}

デベロッパーツールでいじっただけなので、実際には試していません。

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

「インデックスリストトップ」に「ナビカード」ウィジェットを入れると、全てのページで表示されてしまうので、ナビカードウィジェットの表示設定で「チェック・入力したページで非表示」の機能を使って、表示させたくないページを指定するなどすれば、ご希望に近い表示になりそうな気もします。

 

いろいろ、方法は有りそうなので、ご自身でも模索、試してみてください。

 

他に、もっと良い方法もあるかもしれません。

 

This post was modified 4年前 2回 by リフィトリー

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

また、「インデックスリストトップ」のエリアに「おすすめカード」ウィジェットを入れた場合は、以下の画像のようになります。

 

「おすすめカード」は、「余白を有効にする」にチェックを入れても、スマホ表示のときに左右がくっついてしまう、という問い合わせが、ちょうど別のトピックで挙がっているところです。(おそらく近々に?解決するでしょう)

 

この場合でも、表示させたくないページは、ウィジェットの表示設定で、非表示にすれば良いのではないかと思います。

 

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

「インデックスリストトップ」のエリアに「ナビカード」ウィジェットを入れた場合のCSSのコードを少し修正してみました。

 

「ナビカード」ウィジェットの「表示タイプ」を変更しても適用されるようにしてみたつもりなのですが、上手くいくかどうか・・

 

充分にテストした、とは言えないので、修正が要るかもしれません。(ナビカードのメニューは偶数の方が良いです)

/*ナビカードウィジェットメインカラム設置2列表示*/
.navi-entry-cards.widget-entry-cards {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 48%;
}

@media screen and (max-width:480px) {
.navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 100%;
}
}

 

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

また、「ナビカード」ウィジェットにタイトルが付けられるようなので、中央寄せにして太字にし、下側のマージンを付けると・・

.widget-index-top-title.main-widget-label {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}

それっぽい表示にできそうです。

 

This post was modified 4年前 3回 by リフィトリー

   
わいひら reacted
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

リフィトリー様、昨日から沢山調べて頂きありがとうございました!

ウィジェットは出来たのですが、教えて頂いたCSSが反映されず2列になりませんでした。ちなみに「-おすすめ記事-」だけを太文字にするCSSだけ入れてみても反映されませんでした。。。

子テーマに入れていますが、何か他に考えられるエラーはありますでしょうか?

お手数をお掛けしますが、ご教示頂ければ助かりますm(__)m

宜しくお願い致します。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

子テーマのCSSを拝見しましたが、コードが見当たらないようです。

 

高速化設定がなされたままですと、状況が読めません。

 

Cocoonの高速化設定を無効にしてくださるようお願いいたします。

 

 


   
わいひら reacted
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

お返事ありがとうございます。

すみません、コードを消していました。

(それと設定→高速化タブが見つからず、無効に出来ていません)

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

投稿者:: @ann

(それと設定→高速化タブが見つからず、無効に出来ていません)

高速化設定はタブではなく左側のサイドバーにあると思います。

 

This post was modified 4年前 3回 by リフィトリー

   
わいひら reacted
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

リフィトリー様、お手数をお掛けします。今しがた高速化を外しました。

宜しくお願い致します。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

もう一度、コードを設定してみていただけますか?

 


   
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

最初に書いておられたコードと後に書かれたコード、両方とも入れてみましたが、反応なしです。

どこか修正箇所がありますでしょうか?


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

最初のコードを設定されていらっしゃるようです。

とりあず、以下に差し替えてみてください。

/*ナビカードウィジェットメインカラム設置2列表示*/
.navi-entry-cards.widget-entry-cards {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 48%;
}

@media screen and (max-width:480px) {
.navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 100%;
}
}

/*ナビカードウィジェットのタイトルを中央に*/
.widget-index-top-title.main-widget-label {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

子テーマのCSSのコードを拝見しますと、最初に書いたコードのままになっているようです。

 

コードを差し替えてみてください。


   
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

差し替えてみたのですが、どうも二列にならず・・・です。

色々お手数をお掛けしますm(__)m


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

今度は、コードは合っているようですので、余分なハイフンを削除してみてください。

子テーマのCSSの75行目と125行目にある点線状のハイフンです。

 

 


   
わいひら reacted
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

点々を消したら無事できました!

ちなみにスマホで見たときは一列なのですが、これを二列には出来ますでしょうか?

(すみません、色々と)


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

以下のコードに差し替えてみてください。

/*ナビカードウィジェットメインカラム設置2列表示*/
.navi-entry-cards.widget-entry-cards {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 48%;
}

@media screen and (max-width:356px) {
.navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 100%;
}
}

/*ナビカードウィジェットのタイトルを中央に*/
.widget-index-top-title.main-widget-label {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}

 

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

「ナビカード」ウィジェットのサムネイル画像が下の新着記事より、ややピンボケですが、これは、ちょっと私には原因がわからないです。

 

プラグインでサムネイルを再生成すれば、改善するのか、それとも「ナビカード」ウィジェットの仕様なのか・・


   
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

スマホも二列になりました。ですが先ほどまで効いていた

カード下の文字サイズの調整が出来なくなってしまいました。

 

下記が先程まで出来ていたコードです。

.entry-card-title {
font-size: 17px;
}

 

ほかに文字サイズを下のカード同様に合わせる事は出来ますでしょうか?

 

それと仰る通り、おすすめ記事のカードだけが、ぼやけてますよね。

これは前からなので、どうしようもなくて・・・。

わいひらさんにいずれお聞きしたほうがいいかもしれませんね。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

.entry-card-title {
font-size: 17px;
}

上記のコードは、ちゃんと有効になっているようです。

 

ナビカードのタイトルのフォントサイズは、以下のように指定すれば、同じサイズになるかと思います。

.navi-entry-card-title.widget-entry-card-title.card-title {
font-size: 17px;
}

 


   
ann
 ann
(@ann)
Eminent Member Registered
結合: 5年前
投稿: 43
Topic starter  

分かりやすいように14pxにしてみたのですが、変わりなしです・・。

どこか変なのでしょうか?色々お手数をお掛けします。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

CSSのコードに余計な文字、入っていてはいけない文字が入っているようです。

.navi-entry-card-title.widget-entry-card-title.card-title {
  font-size: 14px;
}

HTMLやCSS、その他コンピューターを扱うための言語を書くときは、文字コードをUTF-8(BOMなし)で扱うことのできるテキストエディターをお使いになられることをオススメします。

 

私はよく、Mery というテキストエディターを使っているのですが、 Terapad や サクラエディター等でも良いかと思います。

 

これらのテキストエディターを適正な設定で使えば、不要な文字が入ってしまうことは、ほぼ無くなりますし、入っていれば、目に見えるので、その時点でわかります。


   
 ann
(@ann)
Eminent Member
結合: 5年前
投稿: 28
 

ありがとうございます。

ナビカードとエントリーナビカードを一つずつコードを書いたらどうにかトップページは文字サイズが整いました。

が、なぜか投稿ページのサイドバーにウィジェットで入れていた「おすすめ記事」のタイトルが縦書き&二列になってしまいました。

どうやらおすすめ記事を二列にするコードが反映されてるみたいで。

とっても難しくて、何か案があればお聞きしたいです。

宜しくお願いします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

先ほど、別のトピックで、CSSのセレクタが他と被っていることに気づきました。

 

対応策を考えますので、お待ちください。


   
 ann
(@ann)
Eminent Member
結合: 5年前
投稿: 28
 

@leafytree sama

そうなんですね。色々とありがとうございます。

それと余談ですが、

先ほど下記のスマホ用コードを消してみたのですが、なぜかスマホでも二列になっていました。

反映しているなら、とくに記載しなくても良いですよね。

(さっきは以下のコードを書いていないとスマホは一列だったのですが、こんがらがってきました・・・)

@media screen and (max-width:356px) {
.navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 100%;
}
}


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

以下のコードに差し替えてみて、不具合がないか確認してみてください。

/*ナビカードウィジェットメインカラム設置2列表示*/
#navi_entries-4 .navi-entry-cards.widget-entry-cards {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

#navi_entries-4 .navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 48%;
}

@media screen and (max-width:356px) {
#navi_entries-4 .navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 100%;
}
}

/*ナビカードウィジェットのタイトルを中央に*/
#navi_entries-4 .widget-index-top-title.main-widget-label {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}

 

 

This post was modified 4年前 by リフィトリー

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@ann さん

CSSのコードの以下の部分は、とても小さいサイズ(幅の狭い小さなスマホ)のために、1列になるようにしたものです。

 

@media screen and (max-width:356px) {
#navi_entries-4 .navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 100%;
}
}

 

 

旧 iphone SE など小さなスマホで2列だとカードもとても小さくなってしまうので・・

 

不要なら、記述しなくても大丈夫です。

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
 ann
(@ann)
Eminent Member
結合: 5年前
投稿: 28
 

サイドバーのナビカードもきちんと整いました。

固定ページを用いなくてもサイト型に出来ることで、この二列にする方法などのカスタマイズは、今後も皆さんの参考にもなると思います。

リフィトリー様、制作してくださるわいひら様、お礼申し上げます。

では解決にさせて頂きますね。

ありがとうございました。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

このカスタマイズのやり方にには、補足事項(注意事項)があります。

 

ann さんが別トピックを立ててくださいましたので、そちらのリンクを以下に貼っておきます。

 

[解決済] cssの#navi_entries-4について


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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