Cocoonカスタマイズ

WordPress無料テーマ「Cocoon」でショートコードで表示した新着情報を横並びにする

スポンサーリンク

どうもこんにちわ、だいぐぅです。

本日は、先日ご紹介した「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」のご相談承ります 現役エンジニアが初心者さんでも安心のサポートをいたします

1箇所だけカスタマイズしたい、といったケースにも対応してます。
ご相談・お見積りは無料となっておりますので、お気軽にお問い合わせください。

コメント

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