本日は、先日ご紹介した「WordPress無料テーマ「Cocoon」のトップページに表示する記事をカスタマイズする」で、カテゴリー別に表示した記事を横並びに変更するCSSをご紹介いたします。
ショートコードで表示させた記事の状態
ショートコードでトップページに並べた記事は、何もしない状態だと縦並びになります。
こちらは、ショートコードを挿入し、固定ページをトップに設定した段階でのページの状況です。
指定したショートコードは、以下です。
[new_list count=5 cats=5,4 children=1 type=large_thumb_on]特にCSSでの設定等をしていませんので、普通の固定ページの状態と変わりません。
トップページらしさがないので、CSSで設定していきます。
ショートコードの使い方については、先日の記事で説明していますので、そちらをご覧ください。
CSSの設定の仕方
トップページにCSSを設定する場合、必ず「トップページとして設定した固定ページにのみ設定」するようにしなければなりません。
全体に指定すると、全投稿もしくは全固定ページにCSSが反映されます。
タイトルや日付の非表示などは他のページに指定したくないCSSになりますので、トップページにのみ設定するようにしてください。
特定のページにのみCSSを指定する方法
特定のページにのみCSSを指定する場合、投稿IDを指定してCSSに記述する方法もありますが、投稿時に指定する方法もあります。投稿ページで指定した方が、管理はしやすいかもしれません。
投稿画面の下の方に「カスタムCSS」というボックスがありますので、トップページ用の固定ページの編集画面で表示される「カスタムCSS」の欄に、CSSを貼り付けるとトップページにのみ反映されるようになります。
コピペOK・追加するCSS
各種項目を非表示にするCSS
各種項目を非表示にするCSSは以下になります。
h1.entry-title {
display: none; //固定ページタイトル非表示
}
.date-tags {
display: none; //日付欄非表示
}
.sns-share {
display: none; //SNSシェアボタン(上下共通)非表示
}
.sns-follow {
display: none; //SNSフォローボタン非表示
} エントリーカードを横並びにするCSS
.new-entry-cards {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards .a-wrap {
width: 50%; //ボックスの幅
}CSSを設定したサンプル
上記のCSSを設定すると、トップページの表示は以下のようになります。
ボックスの幅を変更し、33.33333%で指定すると以下のようになります。
4列にしたければ25%、5列にしたければ20%になりますね。
まとめ
以上、WordPress無料テーマ「Cocoon」でショートコードで表示した新着情報を横並びにする方法でした。
他にもCSSでかなりカスタマイズは自在に出来ますので、カスタマイズしたいけれど上手くいかないとか、どうしたら良いかわからない、というときは、是非ご依頼ください。
WPテーマ「Cocoon」のご相談承ります 現役エンジニアが初心者さんでも安心のサポートをいたします１箇所だけカスタマイズしたい、といったケースにも対応してます。
ご相談・お見積りは無料となっておりますので、お気軽にお問い合わせください。
コメント