トップページのカスタマイズ | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Share:
Notifications
Clear all

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


ann
 ann
(@ann)
Eminent Member
参加: 1年 前
投稿: 25
2020年7月30日 23:41  

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

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

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

 

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

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

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

 

サイト名:引きこもり日記
サイト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)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 02:00  

前略、ann さん

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

 

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

 

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

 

 

This post was modified 2週間 前 by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 02:03  

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 02:05  

そこで、試しに以下のような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%;
}
}

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 02:10  

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

 

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

 

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

 

This post was modified 2週間 前 2 times by リフィトリー

リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 02:22  

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

 

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

 

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

 

This post was modified 2週間 前 2 times by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 11:32  

「インデックスリストトップ」のエリアに「ナビカード」ウィジェットを入れた場合の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 2週間 前 2 times by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 12:09  

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

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

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

 

This post was modified 2週間 前 3 times by リフィトリー

わいひら 件のいいね!
ann
 ann
(@ann)
Eminent Member
参加: 1年 前
投稿: 25
2020年7月31日 17:13  

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

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

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

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

宜しくお願い致します。

 


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 17:24  

@ann さん

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

 

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

 

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

 

 


わいひら 件のいいね!
ann
 ann
(@ann)
Eminent Member
参加: 1年 前
投稿: 25
2020年7月31日 18:09  

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

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

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

 


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 18:20  

@ann さん

投稿者:: @ann

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

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

 

This post was modified 2週間 前 3 times by リフィトリー

わいひら 件のいいね!
ann
 ann
(@ann)
Eminent Member
参加: 1年 前
投稿: 25
2020年7月31日 18:28  

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

宜しくお願い致します。


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 18:29  

@ann さん

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

 


ann
 ann
(@ann)
Eminent Member
参加: 1年 前
投稿: 25
2020年7月31日 18:31  

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

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 18:34  

@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)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 19:03  

@ann さん

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

 

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


ann
 ann
(@ann)
Eminent Member
参加: 1年 前
投稿: 25
2020年7月31日 19:13  

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

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 19:21  

@ann さん

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

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

 

 


わいひら 件のいいね!
ann
 ann
(@ann)
Eminent Member
参加: 1年 前
投稿: 25
2020年7月31日 19:30  

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

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

(すみません、色々と)


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 19:37  

@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;
}

 

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 19:52  

@ann さん

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

 

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


ann
 ann
(@ann)
Eminent Member
参加: 1年 前
投稿: 25
2020年7月31日 21:08  

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

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

 

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

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

 

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

 

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

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

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 21:32  

@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
参加: 1年 前
投稿: 25
2020年7月31日 21:45  

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

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

 


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月31日 22:52  

@ann さん

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

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

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

 

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

 

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


ann
 ann
(@ann)
ゲスト
参加: 9か月 前
投稿: 26
2020年8月1日 00:57  

ありがとうございます。

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

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

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

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

宜しくお願いします。


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年8月1日 01:00  

@ann さん

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

 

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


ann
 ann
(@ann)
ゲスト
参加: 9か月 前
投稿: 26
2020年8月1日 01:06  

@leafytree sama

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

それと余談ですが、

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

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

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

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年8月1日 01:14  

@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 2週間 前 by リフィトリー

リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年8月1日 16:52  

@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 2週間 前 2 times by リフィトリー

わいひら 件のいいね!
ann
 ann
(@ann)
ゲスト
参加: 9か月 前
投稿: 26
2020年8月1日 18:56  

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

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

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

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

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


リフィトリーわいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年8月4日 21:16  

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

 

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

 

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


わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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