うつ病WEBデザイナーがうつ病を克服するため独学で学んだことをアウトプットして共有するためのブログ

うつWEB

CSS WEBデザイン

WordPressテーマ「Affinger5」や「Stinger8」のトップの記事一覧を追加CSSだけでグリッドレイアウトにしてみた話

2019年10月8日

記事一覧をグリッドレイアウトにしたかった

wordpressテーマの affinger5(wing) や stinger8 を使ってるんですけど、基本デフォルトのまんまあまりいじらず使ってたんですが、飽きてきたのでちょっとレイアウトをいじってみたい。

トップページのレイアウトが、デフォルトのままだと記事1件につき、1カラム1段で下に並んでいくというレイアウトですよね。

こんな感じで、レイアウトのリズムが単調でちょっとつまんないなあって感じだったので。

こんな感じで、3カラムのボックス型グリッドレイアウトに変更したい。

でもテーマファイルを修正したりするのは、phpやhtmlやcssがわからないとちょっとしんどいし、テーマファイルに変更を加えるとどのような弊害があるかわからないので、出来ればあまり触りたくない。

なので、CSSにちょこっと追加してオーバーライドさせる形で対応してみました。

Affinger5 の追加CSS

Affinger5 の子テーマ使用時の場合で説明します。

追加する箇所は、

1.管理画面から「外観」→「テーマの編集」をクリック

wordpress管理画面からテーマの編集選択

2.編集するテーマはWING-AFFINGER5 child で、テーマファイルは「スタイルシート(style.css)」を選択

スタイルシートの選択

スタイルシートの最後に以下のコードを追加します。

CSS

article aside .kanren{
display: flex;
flex-wrap: wrap;
}
article aside .kanren dl {
flex-basis: 28%; /*この幅を調整してカラム数変更*/
margin-left: 2.5%;
margin-right: 2.5%;
}
@media print, screen and (max-width: 600px){
article aside .kanren dl {
flex-basis: 45%; /*スマホのときは2カラムにする設定*/
}
}
article aside .kanren dt {
width: 100%!important;
}

article aside .kanren dt img {
width: 100%!important;
}

article aside .kanren dd {
padding-left: 0!important;
}

コメントに書いてある幅の設定箇所のパーセントの値を変更すると、カラム数など調整できます。

Stinger8の追加CSS

Stinger8の場合も同様に、

1.管理画面から「外観」→「テーマの編集」をクリック

wordpress管理画面からテーマの編集選択

2.編集するテーマはSTINGER8、テーマファイルは「スタイルシート(style.css)」を選択

スタイルシートの最後に以下のコードを追加します。

CSS

article .st-aside .kanren{
display: flex;
flex-wrap: wrap;
}
article .st-aside .kanren dl {
flex-basis: 28%;/*この幅を調整してカラム数変更*/
margin-left: 2.5%;
margin-right: 2.5%;
}
@media print, screen and (max-width: 600px){
article .st-aside .kanren dl {
flex-basis: 45%;/*スマホのときは2カラムにする設定*/
}
}
article .st-aside .kanren dt {
width: 100%!important;
}

article .st-aside .kanren dt img {
width: 100%!important;
}

article .st-aside .kanren dd {
padding-left: 0!important;
}

コメントに書いてある幅の設定箇所のパーセントの値を変更すると、カラム数など調整できます。

 

-CSS, WEBデザイン

Copyright© うつWEB , 2019 All Rights Reserved Powered by AFFINGER5.