簡単!ウィジェットに人気記事を横並びに表示する方法!

cocoonで人気記事を横並びに表示する方法を紹介します!

この記事は人気記事を横並びにするために、cocoonの専用のウィジェットを使用します。

「WorldPress popular posts」は利用しないやり方ですが、ウィジェットIDの箇所を変えることで、人気記事を横並びにすることができると思います。

編集前(上)は縦に表示されていましたが、編集後(下)は横並びにすることができました!

編集前
編集後

ウィジェットの設定

人気記事を追加する

私の場合、コンテンツ上という箇所にウィジェットを表示させました。人気記事を表示させたいウィジェットに追加します。

人気記事の設定

ここでは人気記事の順位を何位まで表示するのかや、アイキャッチの画像の大きさなどの設定できます!

ウィジェットIDを確認する

人気記事を横向きに表示するためには、ウィジェット単体に対して横向きにするCSSを設定する必要があります。そのためには、ウィジェットIDというそのウィジェットの住所を特定してあげる必要があります。

まず、ウィジェット画面右上の赤下線の「アクセシビリティモードを有効にする」をクリックしてアクセシビリティモードを有効にします。

アクセシビリティモードを有効にした後、自分が表示させたいウィジェットの編集の上にマウスを置きます。

すると、PC画面の左下にURLが表示されます。このURL部分のpopular_entries-6がウィジェットIDになります。ウィジェットIDの数字部分(この場合は6)が次のステップで重要になります。

ウィジェットIDは人それぞれで異なるため、しっかりと確認しましょう。

横並びにするCSSを追加

横並びにするためのCSSは、cocoonの相談フォームにあるCSSを利用します。

参考にした記事はこちらです。

人気記事を縦表示から横表示にしたいです。
お世話になっております。ウィジェットを使用してトップページに人気記事を表示しています。縦に表示しているものを横並びに表示したいです。 過去の記事を参考にしてみたのですが,出来ませんでした。 ウィジット固有ID?を見る方法も知りたいです。 ご回答いただけますと幸いです。よろしくお願いいたします。 UR...

この記事に書いてあるCSS(以下)をコピーして、子テーマのstyle.cssに貼り付けます。その後、先ほどのウィジェットIDに変換します。

先ほどの私のウィジェットIDの数字部分は6だったため、11の数字を6にして変換します。(人によってこのIDは違うため各々変えてください)

これで一通りの作業は終了になります!

#popular_entries-11 .popular-entry-cards {
    display: flex;
    margin-bottom: 1em;
}

#popular_entries-11 .popular-entry-cards > a {
    margin: 1%;
}

/*480px以下*/
@media screen and (max-width: 480px){
  #popular_entries-11 .popular-entry-cards {
      flex-wrap: wrap;
  }

  #popular_entries-11 .popular-entry-cards > a {
      width: 48%;
  }
} 

完成!

以上のことをしていただくと、このようにウィジェットを設定することで人気記事を横並びに表示することができました!

私はブログを始めて1か月経っておらず、様々なサイトを見ましたがよくわからず。やっとできたため、皆さんにはもっと簡単に作業してもえたらと思います!

学ぶ・習得 情報
スポンサーリンク
Rion's Blog
タイトルとURLをコピーしました