サポート » テーマ » フッターで使っているカテゴリーメニューのスタイリングについて

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっています。
    ブログサイトのフッターで使っているカテゴリーメニューについて2点の質問がございます。ご存知の方がいらっしゃいましたらご教示を願います。

    ### 【質問の主旨】

    #### 1. カテゴリーメニュー記事数の装飾について

    親のカテゴリーメニューと子のカテゴリーメニューの文字列にはフォントサイズが14pxの水色のタグがついています。そのスタイリングを記事数にも含めるためには、今のstyle.cssをどのように書き換えればよろしいでしょうか?

    #### 2. カテゴリーメニューの折り返し

    現在、カテゴリーメニューはどのようなデバイスでも一列で表示されています。その状態から599px以上のデバイスで閲覧する時は親カテゴリーごとに折り返し表示をし、599px未満のデバイスで閲覧するときはそのまま一列で表示させたいと考えています。その場合、今のstyle.cssをどのように書き換えればよろしいでしょうか?

    ### 【質問の主旨】

    #### 1. style.cssについて

    今回の質問に関するstyle.cssは以下の通りです。また詳細につきましては、GitHubにもUPしています。
    https://github.com/echizenyayota/e-yota/blob/personal_lesson_20171012/wp-content/themes/mytheme/style.css

    .widget_categories {
      list-style:none;
    }
    .widgettitle {
      font-size: 18px;
    }
    
    .widget_categories ul {
      list-style:none;
    }
    
    .cat-item a {
      padding: 3px 5px;
      border-radius:2px;
      background-color: #75dbe7;
      color: #ffffff;
      font-size: 14px;
      text-decoration: none;
    }

    イメージ的には同じブログサイトのサイドバーで使っている「エコテキブログのキーワード」のタグと同じ見栄えにしたいと考えています。

    #### 2. 折り返す親カテゴリーについて

    親カテゴリーは、以下の通りです。これらの親カテゴリーがフッターにおいて先頭に表示され、それぞれの子カテゴリーが引き続くという見栄えにしたいと考えています。

    • Webサービス
    • インフラ
    • Web学習法
    • ビットコイン
    • あれこれ

    以上、よろしくお願い申し上げます。

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは

    1. カテゴリーメニュー記事数の装飾について

    記事数をカテゴリーと同じ a タグ内に移動するというのはどうでしょうか。

    function my_list_categories( $output ) {
    	$output = preg_replace( '/<\/a>\s(\(\d+\))/', ' $1</a>', $output );
    	return $output;
    }
    
    add_filter ( 'wp_list_categories', 'my_list_categories' );

    2. カテゴリーメニューの折り返し

    親カテゴリーごとに段組みのようにするということでしょうか?
    その場合は下記のようなスタイルになると思います。

    @media (min-width: 599px) {
    	.widget_categories > ul > li {
    		float: left;
    	}
    	.widget_categories {
    		/* float 解除 */
    		overflow: hidden;
    	}
    }

    または

    @media (min-width: 599px) {
    	.widget_categories > ul {
    		display: flex;
    		flex-wrap: wrap;
    	}
    }

    もしかしたら、子カテゴリーを横並びするといことかしら?
    その場合は下記のようなスタイルになると思います。

    @media (min-width: 599px) {
    	.widget_categories li{
    		display: inline-block;
    	}
    }

    @ishitaka さん。
    いつもコメントありがとうございます。

    1. カテゴリーメニュー記事数の装飾について

    記事数をカテゴリーと同じ a タグ内に移動するというのはどうでしょうか。

    アドバイスありがとうございます。
    この記述をfunctions.phpにコピペしたところ、意図通りの動作ができました。前回の質問でいただいたアドバイスと合わせてフィルターフックの使い方について、WordPressの学習をかねて確認をさせていただきます。

    2. カテゴリーメニューの折り返し

    親カテゴリーごとに段組みのようにするということでしょうか?

    はい。現在6つの親メニューを使っていますので、6列の段組にしたいと考えています。手書きではありますが、イメージとしてこのようなフッターにしたいと考えています。

    http://takaiba.net/wp-forum/wpforum20180326.jpg

    ただ、大変申し訳ありません。ご提示いただいた2種類の記述を試してみましたが、
    意図どおりの動作ができませんでした。

    自分でもアドバイスいただいたコードを元に何か手を加えられないかと考えてみましたが、
    良いアイデアが浮かばないという状況です。

    https://github.com/echizenyayota/e-yota/blob/personal_lesson_20171012/wp-content/themes/mytheme/style.css#L154-L173

    なお該当箇所は現在コメントアウトしています。お手すきのときにでもご確認いただければ幸いです。

    以上、よろしくお願い申し上げます。

    • この返信は1年、 8ヶ月前にechizenyaが編集しました。

    6 段組となるとちょっと窮屈な感じになってしまう気もしますが、下記のスタイルではどうでしょうか。

    @media (min-width: 599px) {
    	/*
    	カテゴリー ウィジェットの 6 段組
    	*/
    	.widget_categories > ul > li {
    		float: left;
    		width: calc(100% / 6);
    	}
    	.widget_categories {
    		/* float 解除 */
    		overflow: hidden;
    	}
    
    	/* 高さを揃える(カテゴリーが 6 個を超える場合) */
    	/*
    	.widget_categories > ul > li:nth-child(7n) {
    		clear: both;
    	}
    	*/
    }

    @ishitaka さん。
    たびたびのコメントありがとうございます。

    @media (min-width: 599px) {
    	/*
    	カテゴリー ウィジェットの 3 段組
    	*/
    	.widget_categories > ul > li {
    		float: left;
    		width: calc(100% / 3);
    	}
    }

    いただいたコードに基づいて上記のコードに書き換えたら、3段組で良い感じのデザインになりました。

    https://e-yota.com/book_report/47_ways_freelance_keeps_earning/
    https://github.com/echizenyayota/e-yota/blob/personal_lesson_20171012/wp-content/themes/mytheme/style.css#L154-L162

    おっしゃる通り6段組では一列あたりの幅が狭くなりすぎて見苦しかったので、3段組に変更しました。今後ともどうぞよろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「フッターで使っているカテゴリーメニューのスタイリングについて」には新たに返信することはできません。