現在デフォルトスキンとして「Season (Summer)」を適用中。

カテゴリーウィジェットの記事数表示のレイアウト崩れについて | カスタマイズ相談 | Cocoon フォーラム

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

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

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

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

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

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

スポンサーリンク
カテゴリーウィジェットの記事数表示のレ...
 
Share:

[解決済] カテゴリーウィジェットの記事数表示のレイアウト崩れについて  

  RSS

みょこ
 みょこ
(@みょこ)
ゲスト
参加: 5か月 前
投稿: 14
2019年5月20日 17:55  

cocoonに限定した話ではなくwordpress全般になるのですが、CSSで修正できるのか、phpから改造するしかないかを教えて頂けると助かります。

知人がカテゴリー名にそこそこ長い文字列を設定しており、知人のスマホがiPhoneSEで少し画面幅が狭いため、添付画像左側のようなレイアウト崩れが発生しています。

具体的に説明すると
「カテゴリー名だけでは改行されない長さのカテゴリー名」
かつ
「カテゴリー名+記事数だと画面の幅を超える」
場合に限り、記事数が一段下に下がってしまってレイアウトが崩れます。

添付画像は自分のサーバーに設置しているWordpress( http://buffett.ac34.info/ )でchromeの検証機能を使って画面幅を狭めて再現した物です。(英語の未熟さは突っ込まないでやってください;)
再現なので1行だけのわずかな崩れなのですが、レイアウト崩れが生じるタイトルが続くと、記事数の表示位置がメチャクチャにずれこんでしまいます。

htmlと自分が追加したcssは次の通りです。

<li class="cat-item cat-item-19">
 <a href="https://~">カテゴリー名<span class="post-count">記事数</span></a>
</li> /* カテゴリー 親 */
.widget_categories ul li a{
text-decoration: none;
font-size: 15px;
font-weight: bold;
display: block;
padding: 4px 4px 2px 10px;
border-bottom: 1px dashed #dbdbdb;
}
.widget_categories ul li a::before{
font-family: FontAwesome;
content: "\f07c";
color: #198dba;
padding-right: 6px;
font-weight: 500;
}
.widget_categories > ul > li > a:first-child{
border-top: none;
}
/* カテゴリー 子 */
.widget_categories ul li ul li a{
text-decoration: none;
display: block;
padding: 4px 4px 2px 10px;
border-bottom: 1px dashed #dbdbdb;
}
.widget_categories ul li ul li a::before{
font-family: FontAwesome;
content: "\f115";
color: #198dba;
padding: 0px 6px 0px 2px;
}
/* カテゴリー 記事数 */
.widget_categories ul li a .post-count{
display: inline-block;
float: right;
margin-left: 8px;
color: #198dba;
background: #c9ebf8;
font-weight: bold;
font-style: oblique;
font-size: 14px;
white-space: nowrap;
line-height: 1.4;
padding: 0px 10px 0px 10px;
text-decoration: none;
border-radius: 2px;
}
/* カテゴリー マウスホバー */
.widget_categories ul li a:hover{
background: #e1f3f3;
transition: all 0.8s ease;
}
.widget_categories ul li a:hover .post-count{
background: #198dba;
color: #fff;
transition: all 0.8s ease;
}

添付画像右側のように、記事数が表示されてから次のカテゴリーとの境界が表示されるようにしたいのですが

.widget_categories ul,
.widget_categories li{
clear:both;
}

以上のようにclear:both;を追加しても、記事数が下に追いやられているのは解消せず…
自分の頭では、あとはphpを編集してカテゴリーウィジェットで出力されているhtmlを書き直すしかないのかなあと思っております。

phpの編集ができないわけではないのですが、自分のウェブサイトではないのでずっとサポートするつもりもないため、できるだけphpを触るのは避けたいところでして…
何か良いやり方をご教示頂けましたら助かります。


未解決
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3231
2019年5月20日 18:13  

ローカルでも確認してみたんですけど。

.widget_categories .cat-item a {
	padding-right: 1em
}

.widget_categories .cat-item a span {
	margin-right: -1em
}

メディアクエリ内に入れるともっと良いと思います。

※私も以前気になって、プチ装飾してる感じでした^^

追記:Cocoon仕様で、ほかのテーマにはリンクにspanは入ってないかもです。忘れましたけどおそらく!?

This post was modified 3か月 前 by かうたっく

みょこわいひら 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 9か月 前
投稿: 143
2019年5月20日 18:20  

こんにちは。

以下のコードを追加してみるとどうでしょうか。
この方法はclearfixと呼ばれるもので検索すれば詳しい解説も見つかるかと思います。

.widget_categories a::after {
content:'';
clear:both;
display:block;
}

みょこわいひら 件のいいね!
みょこ
 みょこ
(@みょこ)
ゲスト
参加: 5か月 前
投稿: 14
2019年5月20日 18:44  

かうたっく様
いつもご丁寧にありがとうございます!
何をやっているのかわかりやすく、細かい調整もしやすく、目から鱗が落ちました!
マージンをマイナスで設定するのが全然頭にありませんでした!

草村様
とてもスマートですね!?
afterでclearが効くとは思っていませんでした!

勉強不足でお恥ずかしい限りです。
どちらも試してみた結果、かうたっく様の方法だと記事数の上に空間ができ、草村様の方法だと空間ができないので、好みでどちらが良いか変わってきそうですね。
今回話している知人はある程度空間を取った方が「すっきりしてキレイ」と感じられる方なので、かうたっく様の方法でいきます!

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


わいひら草村 件のいいね!
みょこ
 みょこ
(@みょこ)
ゲスト
参加: 5か月 前
投稿: 14
2019年5月20日 19:00  

他の人の参考になるように、それぞれの違いを画像で添付しておきます。
かうたっく様の方法が画像左、草村様の方法が画像右です。


わいひら草村 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3231
2019年5月20日 20:07  

みょこさん。違いありがとうございます!

とりあえずカスタマイズに影響しないよ。って事を確かめたんです。

好みによって選べるページになりましたね^^

みなさまお疲れさまでした❦

そして自分がしたかった事が簡単にできる構造だったのが、ラッキー❦と思ってカスタマイズした記憶があるので、テーマ構造にも感謝です!

 

※グローバルメニューもカスタマイズしやすい構造になってたんで、嬉しかった記憶が蘇りました^^


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6125
2019年5月20日 20:20  

おお!分かりやすい。

修正前。

修正後。

Cocoonの親テーマにもこの修正を適用しようと思います。


みょこ
 みょこ
(@みょこ)
ゲスト
参加: 5か月 前
投稿: 14
2019年5月20日 20:30  

実際に導入してみたところ、かうたっく様の方法は記事数が増える(2桁、3桁と桁が増える)と幅を増やさないといけませんね。

元々が「画面の幅が狭くて」改行されるとレイアウトが崩れる、ということだったのですが、知人がブログ開設2ヶ月で3桁に届く記事を書いているので、この調子でいくと4桁も1年以内に達しそうです。

4桁5桁分のスペースを確保すると長いカテゴリー名が3行に達しそうですので、カテゴリー名が長くて、かつ記事数の多いブログは、草村様の方法のほうがよさそうです。

と、気付いた点を書き足しておきます。

Simplicityの頃からお世話になっているので、わいひら様に「わかりやすい」といっていただけたこと、お役に立てたようで嬉しいです!


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6125
2019年5月20日 20:31  

とりあえず、カテゴリーリンクに対してクリアフィックスクラス(.cf)クラスを追加することで対処しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6125
2019年5月20日 20:36  

僕も十数年前に、バフェット系の本を読みつつ投資を始めたので、更新楽しみにしています。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3231
2019年5月20日 20:39  

記事数が増える(2桁、3桁と桁が増える)と幅を増やさないといけませんね。

たしかにそうなんですよ。

記事が膨大な点もチェックしてたんですよね。そんなに需要がある事でもないと思ってました。

テーマ側としても対応してもらったんで、カテゴリ名が長い人は楽だと思います。

そもそもカテゴリを長くしてるのも変だと思うんですけど、長くなってしまう分野もあるかと思います。おそらく❦


みょこ
(@ukigumo413)
Active Memberサイト
参加: 3か月 前
投稿: 8
2019年5月20日 20:53  

投資のサイトは私ではなく知人のもので、デザインについて色々と相談を受けているので自分のドメインでテストをしている次第です。

せっかく興味を持って頂いたので、そちらのURLを貼らせておいてもらいますね。
https://www.buffettkenkyu.com/

海外の人物名をカテゴリーに設定したいので、どうしても長いカテゴリ名になってしまうのです。分野次第、まさにそういうことですね。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6125
2019年5月20日 21:01  

なるほど、ロゴはテストだったんですね。
本サイトの方をfeedly登録させていただきました。


みょこ 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年

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

クーポンコード:PK4JK4RJ

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

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

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

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

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

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

Cocoon
  
動作中

ログイン または 登録 してください

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