ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
THE THOR ザ・トール ピックアップ3 をカスタマイズ
当ページのリンクには広告が含まれています。
ポチップ
この記事は ピックアップ3 (PICK-UP3) について、カスタマイズなどあれこれと記載しています。（追記あり）
ピックアップ3はトップページ上部に自分の好きな記事を3つ表示する機能です。
記事ランキングや新着記事とは違う、特別に読んで貰いたい記事をトップページ上部でアピールすることができます。
この記事は随時追記しています。カスタマイズ内容は目次をご確認ください。
目次
THE THOR ピックアップ3 角を丸くする PICK-UP 3
アイキャッチ画像を角丸にしたら一緒にピックアップ3記事の背景も角丸に統一しましょう。
追加CSSにコードを挿入します。
外観 → カスタマイズ → 追加CSS
挿入するコードは以下の通り。
/*ピックアップ記事角丸*/
.pickup3__item {
border-radius: 8px;
}
数字が角丸の半径になるので大きくすると大きな角丸になります。今回は8pxでアイキャッチ画像の角丸と大きさをあわせました。
角丸の大きさはパーセンテージ（%）でも指定が可能
border-radius: 5%;
角ごとに丸みを変更することも可能
border-radius: 10px 20px 30px 40px;
左上、右上、右下、左下の順番です。どんな角丸ができるかは試してみてください。面白いカタチができますよ。
THE THOR ピックアップ3 背景画像を消す PICK-UP 3
ピックアップ3の上部背景には1番に表示している記事のアイキャッチ画像が加工して表示されます。
この背景画像が画像により違和感が出たり、見づらくなったりすることがあります。もちろん凄くマッチして格好良くなることもあります。ちょっと不安定な要素なのでピックアップ3の背景画像を消去することにしました。
背景画像を消す方法はいくつかあると思います。ここでは2つの方法を記載。参考になれば幸いです。
2つの方法ともに追加cssを利用します。
操作手順
外観 → カスタマイズ → 追加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;
}
以上となります。
[wpap service=”with” type=”detail” id=”4800720648″ title=”WordPressの達人が教える 本気でカッコよくする WordPressで人気ブログ 思いどおりのブログにカスタマイズ…”]
あとがき
どういった使い方をすれば効果的なのか？
なかなか難しく感じるピックアップ3です。当サイトは雑記ブログなので敢えてカテゴリーを絞ったピックアップ3にしてみました。試行錯誤しながら良い使い方を模索していきます。
ピックアップ3の役割
ピックアップというぐらいなので目立たせたい、読んでもらいたい、今が旬、というような記事をこの場所に表示するものだと思います。同じような役割のカルーセルスライダーを導入済みなので役割が被ってしまいます。
3記事ということでランキング的な役割もできると思いますが、それは別でランキング表示をしています。
どう使うのが正解なのか悩み中です。
ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
この記事が気に入ったら
フォローしてね！
ブログテーマ選びについて
この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。
- THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る - THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る - 自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト
コメント
コメント一覧 （8件）
いつも記事を楽しく拝見させて頂いています。
背景画像の非表示を試してみたのですが、背景画像が消えたところにスペースができてしまいました。
padding-top: 0px;にしても変わらず….どうすれば良いでしょうか。。
匿名さん、コメントありがとうございます。
記事に追記を行いましたのでお試しください。
ピックアップ3記事を4記事に増やすカスタマイズは可能なのでしょうか？クロネさんのブログのように、トップページの上部にまとめ記事を4つ表示させたいのですが、どこにもやり方が書いていないもので…（ ; ; ）
みことさん、コメントありがとうございます。
ピックアップ3の記事数を4記事にするのは非常に難しいカスタマイズになります。
似たようなものは「どこでもメニューボタン」というカスタマイズで実現可能です。
https://karaagebow.com/archives/7695
ちょっとわかいづらいですが良かったら試しに見てください。（現在新しい「どこでもメニューボタン」製作中です）
返信頂いてありがとうございます！
できました！
ちなみに、ボタンそれぞれに枠をつけることは可能でしょうか？
本当に無知で申し訳ありません！！
スタイルでボーダーをつけて色を付ければ
それがボタンに反映されます。
不具合があったら教えてください。
ご丁寧にありがとうございます！
申し訳ありません、スタイル→カラーセット→ボーダー色と進んでも枠の色がどうしても反映されません…。
文字色、背景色は反映されます。
やり方が間違ってますでしょうか？
ボーダーは色以外に線を付ける操作が必要です。
スタイル→スタイルセット→ボーダー系 で線の種類を選んでください。
ご確認ください。