teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

要望に合わせて修正

2020/12/07 05:34

投稿

dit.
dit.

スコア3235

answer CHANGED
@@ -1,44 +1,12 @@
1
- 回答を全面的に変更し、「おそらく希望はこうではないか」という状態のものに書き換えています。
2
- 「希通りでは思うがエラーが出い状態」コードは編集履歴を参考
1
+ となく判明したでさらに書き換えました
2
+ 「トップページにカテゴリー一覧(リスト)を表示させる」
3
+ 「トップページには各カテゴリーのタイトルとそれに所属する記事を画像(150*150)とタイトルで表示→個別ページにリンク」
4
+ 「アーカイブページもトップページと同じような見た目で表示」
3
5
 
4
- [サンプルサイト](http://milchkrone.com/sample20201126/)
6
+ [サンプルサイト](http://milchkrone.com/dit20201204/)
5
7
 
6
- ・デザインはなるべく他の部分と合うようにしたけど適当。
7
- ・プラグイン不使用のため画像表示のEasy FancyBoxとかを使ってそうな挙動はすべて無視。
8
-
9
- ◆一覧にアイキャッチを表示、アイキャッチがなければ投稿中の一番初めの画像を表示、それもなければ代替画像を表示
10
- [参考サイト](https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a)
11
- functions.phpに追加
8
+ ◆index.phpをすべて下記書き換える
12
9
  ```php
13
- /*
14
- アイキャッチ画像が設定してある場合はそれを取得し出力
15
- アイキャッチは無いが投稿内に画像がある場合は、そのうちの1番最初の画像を取得し出力
16
- それも無い場合は代替画像を出力 or 何もしない
17
- https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a
18
- */
19
- function catch_thumbnail_image($get_size = 'thumbnail', $altimg_id = null) {
20
- global $post;
21
- $image = '';
22
- $image_get = preg_match_all( '/<img.+class=[\'"].*wp-image-([0-9]+).*[\'"].*>/i', $post->post_content, $matches );
23
- $image_id = $matches[1][0];
24
- if( !$image_id && $altimg_id ){
25
- $image_id = $altimg_id;
26
- }
27
- $image = wp_get_attachment_image( $image_id, $get_size, false, array(
28
- 'class' => 'thumbnail-image',
29
- 'srcset' => wp_get_attachment_image_srcset( $image_id, $get_size ),
30
- 'sizes' => wp_get_attachment_image_sizes( $image_id, $get_size )
31
- ) );
32
- if( empty($image) ) {
33
- $image = '<img src="https://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE">'; /* 代替画像のアドレスを指定する */
34
- }
35
- return $image;
36
- }
37
- ```
38
-
39
- ◆カテゴリー一覧の表示、アーカイブを一覧表示に変更
40
- index.php全部書き換え↓
41
- ```php
42
10
  <?php
43
11
  /**
44
12
  * The main template file
@@ -59,8 +27,6 @@
59
27
  ?>
60
28
 
61
29
  <main id="site-content" role="main">
62
-
63
-
64
30
  <div class="category_list"><!-- カテゴリ一覧の表示 ここから -->
65
31
  <ul>
66
32
  <?php
@@ -72,135 +38,122 @@
72
38
  </ul>
73
39
  </div><!-- カテゴリ一覧の表示 ここまで -->
74
40
 
75
-
41
+ <?php if ( is_home() ) { ?>
76
42
  <?php
43
+ $categories = get_categories();
44
+ foreach($categories as $category) :
45
+ ?>
46
+ <hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />
47
+ <div class="has-text-align-center"><h2><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->cat_name; ?></a></h2></div>
48
+ <?php
49
+ query_posts('cat='.$category->cat_ID.'&showposts=-1');
50
+ if (have_posts()) : ?>
51
+ <div class="ex-list">
52
+ <?php while (have_posts()) : the_post(); ?>
53
+ <div><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"><?php else: ?><img src="http://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE"><?php endif; ?><?php the_title(); ?></a></div>
54
+ <?php endwhile; ?>
55
+ </div>
56
+ <?php endif; ?>
57
+ <?php endforeach; ?>
77
58
 
78
- $archive_title = '';
79
- $archive_subtitle = '';
80
59
 
81
- if ( is_search() ) {
82
- global $wp_query;
60
+ <?php }else{ ?>
61
+ <?php
83
62
 
84
- $archive_title = sprintf(
63
+ $archive_title = '';
85
- '%1$s %2$s',
64
+ $archive_subtitle = '';
86
- '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
87
- '&ldquo;' . get_search_query() . '&rdquo;'
88
- );
89
65
 
90
- if ( $wp_query->found_posts ) {
91
- $archive_subtitle = sprintf(
92
- /* translators: %s: Number of search results. */
93
- _n(
94
- 'We found %s result for your search.',
95
- 'We found %s results for your search.',
96
- $wp_query->found_posts,
97
- 'twentytwenty'
98
- ),
99
- number_format_i18n( $wp_query->found_posts )
100
- );
101
- } else {
102
- $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
103
- }
104
- } elseif ( is_archive() && ! have_posts() ) {
105
- $archive_title = __( 'Nothing Found', 'twentytwenty' );
106
- } elseif ( ! is_home() ) {
66
+ if ( is_search() ) {
107
- $archive_title = get_the_archive_title();
67
+ global $wp_query;
108
- $archive_subtitle = get_the_archive_description();
109
- }
110
68
 
111
- if ( $archive_title || $archive_subtitle ) {
69
+ $archive_title = sprintf(
70
+ '%1$s %2$s',
71
+ '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
72
+ '&ldquo;' . get_search_query() . '&rdquo;'
112
- ?>
73
+ );
113
74
 
75
+ if ( $wp_query->found_posts ) {
76
+ $archive_subtitle = sprintf(
77
+ /* translators: %s: Number of search results. */
78
+ _n(
79
+ 'We found %s result for your search.',
80
+ 'We found %s results for your search.',
81
+ $wp_query->found_posts,
82
+ 'twentytwenty'
83
+ ),
84
+ number_format_i18n( $wp_query->found_posts )
85
+ );
86
+ } else {
87
+ $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
88
+ }
89
+ } elseif ( is_archive() && ! have_posts() ) {
114
- <header class="archive-header has-text-align-center header-footer-group">
90
+ $archive_title = __( 'Nothing Found', 'twentytwenty' );
91
+ } elseif ( ! is_home() ) {
92
+ $archive_title = get_the_archive_title();
93
+ $archive_subtitle = get_the_archive_description();
94
+ }
115
95
 
116
- <div class="archive-header-inner section-inner medium">
96
+ if ( $archive_title || $archive_subtitle ) {
97
+ ?>
117
98
 
118
- <?php if ( $archive_title ) { ?>
119
- <h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1>
99
+ <header class="archive-header has-text-align-center header-footer-group">
120
- <?php } ?>
121
100
 
122
- <?php if ( $archive_subtitle ) { ?>
101
+ <div class="archive-header-inner section-inner medium">
123
- <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
124
- <?php } ?>
125
102
 
126
- </div><!-- .archive-header-inner -->
103
+ <?php if ( $archive_title ) { ?>
104
+ <h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1>
105
+ <?php } ?>
127
106
 
128
- </header><!-- .archive-header -->
107
+ <?php if ( $archive_subtitle ) { ?>
108
+ <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
109
+ <?php } ?>
129
110
 
130
- <?php
111
+ </div><!-- .archive-header-inner -->
131
- }
132
112
 
113
+ </header><!-- .archive-header -->
114
+
115
+ <?php
116
+ }
117
+
133
- if ( have_posts() ) {
118
+ if ( have_posts() ) {
134
- if ( is_archive() ) {
135
119
  ?>
136
120
  <div class="ex-list">
121
+ <?php while ( have_posts() ) { the_post(); ?>
122
+ <div><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"><?php else: ?><img src="http://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE"><?php endif; ?><?php the_title(); ?></a></div>
123
+ <?php } ?>
124
+ </div>
137
125
  <?php
138
- while ( have_posts() ) {
126
+ } elseif ( is_search() ) {
139
- the_post();
140
- ?>
127
+ ?>
141
- <div>
142
- <a href="<?php the_permalink(); ?>">
143
- <?php $catch_thumbnail_size = 'thumbnail'; if(has_post_thumbnail()){ the_post_thumbnail($catch_thumbnail_size); } else { echo catch_thumbnail_image($catch_thumbnail_size); } ?>
144
- <?php the_title(); ?>
145
- </a>
146
- </div>
147
- <?php
148
- }
149
- ?>
150
- </div><!-- end of .category-list -->
151
- <?php
152
- }else{
153
128
 
154
- $i = 0;
129
+ <div class="no-search-results-form section-inner thin">
155
130
 
131
+ <?php
156
- while ( have_posts() ) {
132
+ get_search_form(
133
+ array(
134
+ 'label' => __( 'search again', 'twentytwenty' ),
135
+ )
136
+ );
137
+ ?>
157
138
 
139
+ </div><!-- .no-search-results -->
158
140
 
159
- $i++;
160
- if ( $i > 1 ) {
141
+ <?php
161
- echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
162
- }
142
+ }
163
- the_post();
143
+ ?>
164
144
 
165
- get_template_part( 'template-parts/content', get_post_type() );
166
-
167
- }
168
-
169
- }
170
-
171
- } elseif ( is_search() ) {
172
- ?>
173
-
174
- <div class="no-search-results-form section-inner thin">
175
-
176
- <?php
177
- get_search_form(
178
- array(
179
- 'label' => __( 'search again', 'twentytwenty' ),
180
- )
181
- );
182
- ?>
183
-
184
- </div><!-- .no-search-results -->
185
-
186
- <?php
187
- }
188
- ?>
189
-
190
- <?php get_template_part( 'template-parts/pagination' ); ?>
145
+ <?php get_template_part( 'template-parts/pagination' ); ?>
191
-
146
+ <?php } ?>
192
147
  </main><!-- #site-content -->
193
148
 
194
149
  <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
195
150
 
196
151
  <?php
197
152
  get_footer();
198
-
199
153
  ```
200
154
 
201
- ◆見た目の調整
202
- [外観]-[カスタマイズ]-[追加CSS]に追記↓
155
+ [外観]-[カスタマイズ]-[追加CSS]に追記↓
203
- flexbox使用。横幅700px以上で横4つ、それより小さい場合は横2つ
156
+ flexbox使用。横幅700px以上で横4つ、それより小さい場合は横2つ
204
157
  ```css
205
158
  .category_list{
206
159
  padding:4rem 0 0;
@@ -215,7 +168,6 @@
215
168
  width: calc(100% - 4rem);
216
169
  padding:4rem 0 0;
217
170
  max-width: 58rem;
218
- width: calc(100% - 4rem);
219
171
  margin-left: auto;
220
172
  margin-right: auto;
221
173
  }
@@ -223,16 +175,17 @@
223
175
  width:50%;
224
176
  padding: .5em;
225
177
  }
226
-
178
+ .ex-list img{
179
+ display:block;
180
+ }
227
181
  @media (min-width: 700px){
228
- .ex-list{
229
- padding:8rem 0 0;
230
- }
231
182
  .ex-list>div{
232
183
  width:25%;
233
184
  }
234
185
  }
235
186
  ```
236
187
 
237
- それっぽくはなと思いますが細かいところは調整せん
188
+ 書き換え部分を極力少なくしました
238
- 見落しがあるかもしれないので後でもう一度見直します。
189
+ index.phpカスタマイズ所の追加CSSだけです。
190
+
191
+ ※テーマの更新があった場合カスタマイズした内容が元に戻る可能性がありますので子テーマの作成をお勧めします。(子テーマについては知らなければまずは調べていただき、わからなければまた質問してください。)

1

追記編集

2020/12/07 05:34

投稿

dit.
dit.

スコア3235

answer CHANGED
@@ -1,10 +1,44 @@
1
+ 回答を全面的に変更し、「おそらく希望はこうではないか」という状態のものに書き換えています。
1
- エラーは出ないけれど希望通りではないであろう状態」のコードです
2
+ 「希望通りではないと思がエラーが出ない状態」のコードは編集履歴を参考
2
- 具体的には95行目、105行目、106行目に全角空白が入っていたり、
3
- 必要なコードを削除してしまっていたり、不必要な`}`が入っていたので修正しました。
4
3
 
5
- この後サンプルサイトを作り「おそらく希望のこと」ができたら回答を編集しますが取り急ぎ提示しておきます。
4
+ [サンプルサイト](http://milchkrone.com/sample20201126/)
6
5
 
6
+ ・デザインはなるべく他の部分と合うようにしたけど適当。
7
+ ・プラグイン不使用のため画像表示のEasy FancyBoxとかを使ってそうな挙動はすべて無視。
8
+
9
+ ◆一覧にアイキャッチを表示、アイキャッチがなければ投稿中の一番初めの画像を表示、それもなければ代替画像を表示
10
+ [参考サイト](https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a)
11
+ functions.phpに追加↓
7
12
  ```php
13
+ /*
14
+ アイキャッチ画像が設定してある場合はそれを取得し出力
15
+ アイキャッチは無いが投稿内に画像がある場合は、そのうちの1番最初の画像を取得し出力
16
+ それも無い場合は代替画像を出力 or 何もしない
17
+ https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a
18
+ */
19
+ function catch_thumbnail_image($get_size = 'thumbnail', $altimg_id = null) {
20
+ global $post;
21
+ $image = '';
22
+ $image_get = preg_match_all( '/<img.+class=[\'"].*wp-image-([0-9]+).*[\'"].*>/i', $post->post_content, $matches );
23
+ $image_id = $matches[1][0];
24
+ if( !$image_id && $altimg_id ){
25
+ $image_id = $altimg_id;
26
+ }
27
+ $image = wp_get_attachment_image( $image_id, $get_size, false, array(
28
+ 'class' => 'thumbnail-image',
29
+ 'srcset' => wp_get_attachment_image_srcset( $image_id, $get_size ),
30
+ 'sizes' => wp_get_attachment_image_sizes( $image_id, $get_size )
31
+ ) );
32
+ if( empty($image) ) {
33
+ $image = '<img src="https://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE">'; /* 代替画像のアドレスを指定する */
34
+ }
35
+ return $image;
36
+ }
37
+ ```
38
+
39
+ ◆カテゴリー一覧の表示、アーカイブを一覧表示に変更
40
+ index.php全部書き換え↓
41
+ ```php
8
42
  <?php
9
43
  /**
10
44
  * The main template file
@@ -25,8 +59,10 @@
25
59
  ?>
26
60
 
27
61
  <main id="site-content" role="main">
28
- <!-- カテゴリ一覧の表示 ここから -->
62
+
63
+
29
- <ul class="category_list">
64
+ <div class="category_list"><!-- カテゴリ一覧の表示 ここから -->
65
+ <ul>
30
66
  <?php
31
67
  $cat_all = get_terms( "category", "fields=all&get=all&exclude_tree=12&exclude=11" );
32
68
  foreach($cat_all as $value):
@@ -34,112 +70,169 @@
34
70
  <li><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?>(<?php echo $value->count;?>)</a></li>
35
71
  <?php endforeach; ?>
36
72
  </ul>
37
- <!-- カテゴリ一覧の表示 ここまで -->
73
+ </div><!-- カテゴリ一覧の表示 ここまで -->
38
74
 
39
- <!-- アイキャッチ画像一覧の表示 ここから -->
40
- <div class="article-wrap">
41
- <?php
42
75
 
43
- $archive_title = '';
76
+ <?php
44
- $archive_subtitle = '';
45
77
 
78
+ $archive_title = '';
46
- if ( is_search() ) {
79
+ $archive_subtitle = '';
47
- global $wp_query;
48
80
 
49
- $archive_title = sprintf(
81
+ if ( is_search() ) {
50
- '%1$s %2$s',
82
+ global $wp_query;
51
- '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
52
- '&ldquo;' . get_search_query() . '&rdquo;'
53
- );
54
83
 
84
+ $archive_title = sprintf(
85
+ '%1$s %2$s',
86
+ '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
87
+ '&ldquo;' . get_search_query() . '&rdquo;'
88
+ );
89
+
55
- if ( $wp_query->found_posts ) {
90
+ if ( $wp_query->found_posts ) {
56
- $archive_subtitle = sprintf(
91
+ $archive_subtitle = sprintf(
57
- /* translators: %s: Number of search results. */
92
+ /* translators: %s: Number of search results. */
58
- _n(
93
+ _n(
59
- 'We found %s result for your search.',
94
+ 'We found %s result for your search.',
60
- 'We found %s results for your search.',
95
+ 'We found %s results for your search.',
61
- $wp_query->found_posts,
96
+ $wp_query->found_posts,
62
- 'twentytwenty'
97
+ 'twentytwenty'
63
- ),
98
+ ),
64
- number_format_i18n( $wp_query->found_posts )
99
+ number_format_i18n( $wp_query->found_posts )
65
- );
100
+ );
66
- } else {
101
+ } else {
67
- $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
102
+ $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
68
- }
69
- } elseif ( is_archive() && ! have_posts() ) {
70
- $archive_title = __( 'Nothing Found', 'twentytwenty' );
71
- } elseif ( ! is_home() ) {
72
- $archive_title = get_the_archive_title();
73
- $archive_subtitle = get_the_archive_description();
74
103
  }
104
+ } elseif ( is_archive() && ! have_posts() ) {
105
+ $archive_title = __( 'Nothing Found', 'twentytwenty' );
106
+ } elseif ( ! is_home() ) {
107
+ $archive_title = get_the_archive_title();
108
+ $archive_subtitle = get_the_archive_description();
109
+ }
75
110
 
76
- if ( $archive_title || $archive_subtitle ) {
111
+ if ( $archive_title || $archive_subtitle ) {
77
- ?>
112
+ ?>
78
113
 
79
- <header class="archive-header has-text-align-center header-footer-group">
114
+ <header class="archive-header has-text-align-center header-footer-group">
80
115
 
81
- <div class="archive-header-inner section-inner medium">
116
+ <div class="archive-header-inner section-inner medium">
82
117
 
83
- <?php if ( $archive_title ) { ?>
118
+ <?php if ( $archive_title ) { ?>
84
- <h3 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h3>
119
+ <h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1>
85
- <?php } ?>
120
+ <?php } ?>
86
- <?php
87
- $thumbnail_id = get_post_thumbnail_id();//アイキャッチのID
88
- $data = wp_get_attachment_image_src($thumbnail_id,'thumbnail');//配列
89
- ?>
90
- <img src="<?php echo $data[0] ;?>" width="<?php echo $data[1] ;?>" height="<?php echo $data[2] ;?>" >
91
- <?php if ( $archive_subtitle ) { ?>
92
- <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
93
- <?php } ?>
94
121
 
95
- </div><!-- .archive-header-inner -->
122
+ <?php if ( $archive_subtitle ) { ?>
123
+ <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
124
+ <?php } ?>
96
125
 
126
+ </div><!-- .archive-header-inner -->
127
+
97
- </header><!-- .archive-header -->
128
+ </header><!-- .archive-header -->
98
-
129
+
99
- <?php
130
+ <?php
100
- }
131
+ }
101
-
132
+
102
- if ( have_posts() ) {
133
+ if ( have_posts() ) {
103
-
134
+ if ( is_archive() ) {
104
- $i = 0;
135
+ ?>
105
-
136
+ <div class="ex-list">
137
+ <?php
106
- while ( have_posts() ) {
138
+ while ( have_posts() ) {
139
+ the_post();
107
- $i++;
140
+ ?>
108
- if ( $i > 1 ) {
141
+ <div>
142
+ <a href="<?php the_permalink(); ?>">
109
- echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
143
+ <?php $catch_thumbnail_size = 'thumbnail'; if(has_post_thumbnail()){ the_post_thumbnail($catch_thumbnail_size); } else { echo catch_thumbnail_image($catch_thumbnail_size); } ?>
144
+ <?php the_title(); ?>
145
+ </a>
146
+ </div>
147
+ <?php
110
148
  }
149
+ ?>
150
+ </div><!-- end of .category-list -->
151
+ <?php
152
+ }else{
111
153
 
112
- the_post();
154
+ $i = 0;
113
155
 
114
- get_template_part( 'template-parts/content', get_post_type() );
156
+ while ( have_posts() ) {
115
157
 
116
- }
117
- } elseif ( is_search() ) {
118
- ?>
119
158
 
159
+ $i++;
160
+ if ( $i > 1 ) {
120
- <div class="no-search-results-form section-inner thin">
161
+ echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
162
+ }
163
+ the_post();
121
164
 
122
- <?php
123
- get_search_form(
124
- array(
125
- 'label' => __( 'search again', 'twentytwenty' ),
165
+ get_template_part( 'template-parts/content', get_post_type() );
126
- )
127
- );
128
- ?>
129
166
 
130
- </div><!-- .no-search-results -->
167
+ }
131
168
 
132
- <?php
133
- }
169
+ }
170
+
171
+ } elseif ( is_search() ) {
134
172
  ?>
135
173
 
136
- <?php get_template_part( 'template-parts/pagination' ); ?>
174
+ <div class="no-search-results-form section-inner thin">
137
175
 
176
+ <?php
177
+ get_search_form(
178
+ array(
179
+ 'label' => __( 'search again', 'twentytwenty' ),
180
+ )
181
+ );
182
+ ?>
183
+
184
+ </div><!-- .no-search-results -->
185
+
186
+ <?php
187
+ }
188
+ ?>
189
+
190
+ <?php get_template_part( 'template-parts/pagination' ); ?>
191
+
138
192
  </main><!-- #site-content -->
139
- </div><!-- /.article-wrap -->
140
193
 
141
194
  <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
142
195
 
143
196
  <?php
144
197
  get_footer();
198
+
145
- ```
199
+ ```
200
+
201
+ ◆見た目の調整
202
+ [外観]-[カスタマイズ]-[追加CSS]に追記↓
203
+ flexbox使用。横幅700px以上で横4つ、それより小さい場合は横2つ
204
+ ```css
205
+ .category_list{
206
+ padding:4rem 0 0;
207
+ max-width: 58rem;
208
+ width: calc(100% - 4rem);
209
+ margin-left: auto;
210
+ margin-right: auto;
211
+ }
212
+ .ex-list{
213
+ display:flex;
214
+ flex-wrap: wrap;
215
+ width: calc(100% - 4rem);
216
+ padding:4rem 0 0;
217
+ max-width: 58rem;
218
+ width: calc(100% - 4rem);
219
+ margin-left: auto;
220
+ margin-right: auto;
221
+ }
222
+ .ex-list>div{
223
+ width:50%;
224
+ padding: .5em;
225
+ }
226
+
227
+ @media (min-width: 700px){
228
+ .ex-list{
229
+ padding:8rem 0 0;
230
+ }
231
+ .ex-list>div{
232
+ width:25%;
233
+ }
234
+ }
235
+ ```
236
+
237
+ それっぽくはなると思いますが細かいところは調整してません。
238
+ 見落としがあるかもしれないので後でもう一度見直します。