この記事は ピックアップ3 (PICK-UP3) について、カスタマイズなどあれこれと記載しています。（追記あり）
ピックアップ3はトップページ上部に自分の好きな記事を3つ表示する機能です。
記事ランキングや新着記事とは違う、特別に読んで貰いたい記事をトップページ上部でアピールすることができます。
この記事は随時追記しています。カスタマイズ内容は目次をご確認ください。
THE THOR ピックアップ3 角を丸くする PICK-UP 3
アイキャッチ画像を角丸にしたら一緒にピックアップ3記事の背景も角丸に統一しましょう。
追加CSSにコードを挿入します。
挿入するコードは以下の通り。
/*ピックアップ記事角丸*/
.pickup3__item {
border-radius: 8px;
}
数字が角丸の半径になるので大きくすると大きな角丸になります。今回は8pxでアイキャッチ画像の角丸と大きさをあわせました。
角丸の大きさはパーセンテージ（%）でも指定が可能
border-radius: 5%;
角ごとに丸みを変更することも可能
border-radius: 10px 20px 30px 40px;
左上、右上、右下、左下の順番です。どんな角丸ができるかは試してみてください。面白いカタチができますよ。
当サイトではワードプレスの有料テーマ THE THOR を利用しています。 THE THOR は優れたデザイン性が売りですが、細かい部分は自分の好みに合わせて変更していきたいと思います。 今回はアイキャッチ画[…]
THE THOR ピックアップ3 背景画像を消す PICK-UP 3
ピックアップ3の上部背景には1番に表示している記事のアイキャッチ画像が加工して表示されます。
この背景画像が画像により違和感が出たり、見づらくなったりすることがあります。もちろん凄くマッチして格好良くなることもあります。ちょっと不安定な要素なのでピックアップ3の背景画像を消去することにしました。
背景画像を消す方法はいくつかあると思います。ここでは2つの方法を記載。参考になれば幸いです。
2つの方法ともに追加cssを利用します。
外観 → カスタマイズ → 追加css
※カスタマイズは自己責任でお願いします。
ピックアップ3 色をかぶせて背景画像を見えなくする
ヘッダー部分に色を付けるとピックアップ3の背景画像が見えなくなります。当サイトで使用しているのはこちらの方法です。#ffffffの部分を変更すればヘッダー部分の背景色を変えることができます。
背景画像の部分に隙間ができてしまうのでpadding-top: 30pxで隙間を少し詰めています。数値を変更してサイトにあった間隔を適用してください。
追加するコードはこちら↓
/* ヘッダーのコンテナ背景色 */
.l-headerBottom{
background-color: #ffffff;
}
.pickup3 {
padding-top: 30px;
}
背景画像を非表示にする
こちらは背景画像を非表示にする方法です。こちらでも隙間の調整を適時おこなってください。
追加するコードはこちら↓
/* ヘッダーのコンテナ背景色 */
.pickup3__bg{
display: none;
}
.pickup3 {
padding-top: 30px;
}
背景画像を消したあとに出来るスペースを消去する方法
上記の方法で画像を消したあとに何もない空間が少しできます。padding-topを0にしてもまだ少しスペースがあります。そのスペースをさらに詰める方法です。上記2種類どちらの方法をしようしていても以下のコードを追加すると空間を最小限にすることができるので、スペースが気になる方はお試しください。
追加するコードはこちら↓
.pickup3 .heading.heading-main {
display: none;
}
以上となります。
WordPressの達人が教える 本気でカッコよくする WordPressで人気ブログ 思いどおりのブログにカスタマイズ...
あとがき
どういった使い方をすれば効果的なのか？
なかなか難しく感じるピックアップ3です。当サイトは雑記ブログなので敢えてカテゴリーを絞ったピックアップ3にしてみました。試行錯誤しながら良い使い方を模索していきます。
ピックアップ3の役割
ピックアップというぐらいなので目立たせたい、読んでもらいたい、今が旬、というような記事をこの場所に表示するものだと思います。同じような役割のカルーセルスライダーを導入済みなので役割が被ってしまいます。
3記事ということでランキング的な役割もできると思いますが、それは別でランキング表示をしています。
どう使うのが正解なのか悩み中です。
