WordPress Cocoon

【Cocoon】ヘッダー下にピックアップコンテンツを表示する方法

当サイトはアフィリエイト広告を利用しています。

今回はリクエストをいただいた、ヘッダー下に任意の「ピックアップコンテンツ」を表示する方法をご紹介します。

ウィジェットの調整などは必要ですが、Cocoon以外のテーマでも使えるので他のテーマをお使いの方も参考にしてみてください。

ちなみにCocoonの標準機能でも似たような「おすすめカード」というものがありますが、今回紹介する方法だとリンク先や画像の設定などがより柔軟にできます。

PCで見るとこんな感じ↓

モバイル表示では2列になるようにしています。

マウスホバーすると「ふわっと浮き上がる＋タイトルの背景色と文字色が変化」します↓

後半ではタイトルなしで画像だけを表示するパターンも紹介しています。それではやっていきましょう！

ウィジェットの準備

今回のピックアップコンテンツはウィジェットを利用します。Cocoonの場合は「コンテンツ上部」というウィジェットエリアでヘッダー下に表示することができます。

左側のウィジェットアイテムから「カスタムHTML」を選んで、「コンテンツ上部」の中にいれましょう↓

Cocoon以外のテーマをお使いの方は、テーマで用意されているウィジェットエリアの中から適当なものを選んでください。

タイトルありバージョン

まずはタイトルありの場合ですが、まずはCSSをコピペしておいてください。コードはこちら↓

.content-top {
  background: #ececec; /* 全体の背景色 */
  margin: 0;
  padding: 20px 16px; /* 全体の余白 */
}
.pickup-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.pickup-item {
  list-style: none;
  width: 24%;
  position: relative;
  transition-duration: 0.4s;
  box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75);
}
.pickup-item img {
  width: 100%;
  vertical-align: bottom;
}
.pickup-item:hover {
  transform: translateY(-6px);
  box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75);
}
.pickup-title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  text-align: center;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  white-space: nowrap;
  background: rgba(255,255,255,0.9); /* タイトルの背景 */
  font-size: 15px; /* タイトルの文字サイズ */
  padding: 6px 0;
  border-radius: 40px;
  border: 3px solid #ccc; /* タイトルのボーダー */
  transition-duration: 0.4s;
  color: #000; /* タイトルの文字色 */
}
.pickup-item:hover a .pickup-title { /* タイトルのマウスホバー時の設定 */
  border: 3px solid #90dffd; /* タイトルのボーダー */
  background: #23a7d9; /* タイトルの背景色 */
  color: #fff; /* タイトルの文字色 */
}
@media screen and (max-width: 768px){ /* モバイル表示の設定 */
.content-top {
  padding: 20px 16px 4px 16px;
}
.pickup-item {
  width: 48.5%;
  margin-bottom: 16px;
}
}

次にさきほど用意した「カスタムHTML」のウィジェットに以下のHTMLコードをコピペします↓

<div class="pickup-wrap">
  <div class="pickup-item">
    <a href="リンク先URL１">
      <img src="画像パス１" alt="画像説明文１">
      <div class="pickup-title">タイトル１</div>
    </a>
  </div>
  <div class="pickup-item">
    <a href="リンク先URL２">
      <img src="画像パス２" alt="画像説明文２">
      <div class="pickup-title">タイトル２</div>
    </a>
  </div>
  <div class="pickup-item">
    <a href="リンク先URL３">
      <img src="画像パス３" alt="画像説明文３">
      <div class="pickup-title">タイトル３</div>
    </a>
  </div>
  <div class="pickup-item">
    <a href="リンク先URL４">
      <img src="画像パス４" alt="画像説明文４">
      <div class="pickup-title">タイトル４</div>
    </a>
  </div>
</div>

リンク先URL１〜４、画像パス１〜４、画像説明文１〜４、タイトル１〜４となっている箇所をそれぞれ書き換えてください。

「タイトル」は2行にもできますが、1行で収まるようにしたほうが見た目は良いと思います。

「リンク先URL」は個別の記事でも良いですし、カテゴリページ、タグページなどでも良いと思います。

「画像説明文」は画像の代替テキスト（alt属性）ですが、タイトルと同じにしておいて大丈夫です。

「画像パス」はアイキャッチ画像を流用するか、または新しく用意してください。「メディア」を開いて画像を選択すると「リンクをコピー」のところに画像のパスがあるのでコピペすればオッケーです↓

上記コードの3〜6行目を当ブログで当てはめると以下のようになります↓

<a href="https://web-ashibi.net/archives/2189">
  <img src="https://web-ashibi.net/wp-content/uploads/2018/12/cocoon_custom_imd.jpg" alt="Cocoonカスタマイズ">
  <div class="pickup-title">Cocoonカスタマイズ</div>
</a>

全体の背景色や、タイトルの背景色、ボーダー色などはCSSでお好みで調整してくださいね。

３列にしたい場合

３列にしたい場合はCSSの15行目の
width: 24%; を→32%へ

さらに55行目の
width: 48.5%; を→100%へ変更してください。

それとHTMLの20〜25行目の以下の部分を削除します↓

<div class="pickup-item">
  <a href="リンク先URL４">
    <img src="画像パス４" alt="タイトル４">
    <div class="pickup-title">タイトル４</div>
  </a>
</div>

この変更でPC表示だと３列に、モバイル表示では１列になります。

タイトルなしバージョン

次にタイトルなしバージョンです。こんな感じですね↓

画像の中にタイトルが含まれている場合や、新しくタイトルを含めた画像を用意する場合などはこちらを使ってください。

CSSはこちら↓

.content-top {
  background: #ececec;
  margin: 0;
  padding: 20px 16px;
}
.pickup-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.pickup-item {
  list-style: none;
  width: 24%;
  transition-duration: 0.4s;
  box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75);
}
.pickup-item img {
  width: 100%;
  vertical-align: bottom;
}
.pickup-item:hover {
  transform: translateY(-6px);
  box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75);
}
@media screen and (max-width: 768px){
.content-top {
  padding: 20px 16px 4px 16px;
}
.pickup-item {
  width: 48.5%;
  margin-bottom: 16px;
}
}

HTMLはこちら↓

<div class="pickup-wrap">
  <div class="pickup-item">
    <a href="リンク先URL１">
      <img src="画像パス１" alt="画像説明文１">
    </a>
  </div>
  <div class="pickup-item">
    <a href="リンク先URL２">
      <img src="画像パス２" alt="画像説明文２">
    </a>
  </div>
  <div class="pickup-item">
    <a href="リンク先URL３">
      <img src="画像パス３" alt="画像説明文３">
    </a>
  </div>
  <div class="pickup-item">
    <a href="リンク先URL４">
      <img src="画像パス４" alt="画像説明文４">
    </a>
  </div>
</div>

３列にする場合

タイトルなしで３列にする場合も先ほどと要領は同じです。

CSSの15行目、32行目をそれぞれ24→32、48.5→100と変更して、HTMLの17〜21行目までを削除すればオッケーです。

いろいろ応用もできます

今回はヘッダー下に表示しましたが、他のウィジェットエリアを使えばサイドバーなど好きな場所に表示できます。

その場合は4列→3列にする場合と同じように、各アイテムの横幅をCSSで調整して応用してみてください。

ということでCocoonでヘッダー下にピックアップコンテンツを表示する方法の紹介でした！

けっこう簡単にできるのでアピールしたい記事などあればぜひ設定してみてくださいね！

WordPress
Cocoon
＼記事が役に立ったらシェアしてね／
DICE
うぇぶあしび

comment

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