[TheThor]ブログトップページのピックアップ3記事の設定

今回は、WordPressのテーマ『TheThor』でピックアップ3記事を設定する方法を紹介。

さて、TheThorのピックアップ3記事とは！？

簡単に言うと、「ブログ運営者が選んだおすすめの記事をトップページの上部に表示できる機能」です。

《当ブログのピックアップ3記事の例》

画像の枠で囲まれた範囲が、ピックアップ3記事機能で設定できる範囲になります。

なお、ピックアップ3記事は、その名のとおり記事を3つまで選択することが出来ます。

ピックアップ3記事は、見ての通りかなり目立ちます。

一押しの記事を設定して、アクセス数のアップに繋げましょう。

では、さっそくピックアップ3記事の設定方法について、詳しく解説していきます。

スポンサーリンク

■TheThor ピックアップ3記事の設定画面を開く

WordPressにログインして、TheThorのピックアップ3記事の設定画面を開いていきましょう。

《画像1》

①・・・WordPressのサイドメニューから [外観] → [カスタマイズ] をクリック。

TheThorのカスタマイズ画面に移動します。

《画像2》

②・・・[TOPページ設定[THE]] をクリックして→ [ピックアップ3記事設定] をクリック。

ピックアップ3記事の設定画面が表示されます。

《画像3》

③・・・《画像3》左側の枠内がピックアップ3記事の設定項目です。

こちらからピックアップ3記事の設定を行っていきます。

■ピックアップ3記事 見出しの設定

まず最初に、ピックアップ3記事の『見出し』を設定していきましょう。

◆ピックアップ3記事の見出しを入力する

《画像4》

①・・・【ピックアップ3記事を表示するか選択の項目】にて、[表示]を選択します。
※初期設定では[非表示]が選択されています。

《画像5》

次に、ピックアップ3記事の見出し文言を入力しましょう。

②・・・【セクションの見出しを入力】にて、「おすすめ記事」と入力します。
※こちらの項目は入力必須の項目です。

入力が終わると、ピックアップ3記事と入力した[見出し]が表示されます。
※記事が未指定の場合、新しい記事から順に3件表示される仕様になっています。

なお、今回は例として「おすすめ記事」と入力しましたが、任意入力でOKです。

◆見出しを太文字にする

《画像6》

①・・・【見出しを太文字にする】のチェックボックスに、チェックを入れると見出し文言が太文字になります。

※見出しを太文字は、任意設定なので太文字にしたくない場合は、チェック無しでOK。

◆見出しの左側にアイコンを表示する

《画像7》

【見出しの左に表示するアイコンを入力】の項目。

この項目では、見出し文言の左にアイコンを表示することが出来ます。

まず、表示したいアイコンを選びましょう。

①・・・[アイコン一覧]をクリック。

新しいタブが開き、アイコンの一覧が表示されます。

《アイコンの一覧》

アイコンは非常に種類が豊富で、各カテゴリに分けられています。

今回は、ニュースペーパーのアイコンを表示してみます。

《画像8》

[基本アイコン]カテゴリの、一番上左から2番目にニュースペーパーのアイコンがあります。

②・・・アイコンの横にあるコードをコピーします → [icon-newspaper]をコピー。
（右クリックからコピー　又は、 [Ctrl] ＋ C のショートカットキーでコピー）

《画像9》

③・・・【見出しの左に表示するアイコンを入力】の入力欄に、コピーしたコードを貼りつけます。
（右クリックから貼りつけ　又は、 [Ctrl] ＋ V のショートカットキーで貼りつけ）

④・・・見出しの左に、ニュースペーパーのアイコンが表示されました。

見出しのアイコンを表示する場合は、適切なものを選んで表示しましょう。

※見出しのアイコンは、任意設定なので表示したくなければ、入力無しでOK。

◆見出しの右側に補足情報を表示する

《画像10》

①・・・【見出しの右に表示する補足情報を入力】の入力欄に任意の補足文を入力。
今回は、例として「～ピックアップ～」と入力してみました。

②・・・見出しの右側に入力した補足文が表示されます。

※補足情報の表示は、任意設定なので補足情報を表示したくなければ、入力無しでOK。

■ピックアップ3記事 画像の設定

引き続き、ピックアップ3記事のアイキャッチ画像や背景画像の設定を行っていきます。

◆記事のアイキャッチ画像のアスペクト比を設定

記事のアイキャッチ画像の表示サイズを設定していきます。

なお、1番目のピックアップ記事は、一番大きく表示されます。(TheThorの仕様)

《画像11》

①・・・【画像アスペクト比を選択】の項目にて、[16:9(default)]を選択します。
（※16：9は初期設定なので、おそらく選択済みになっていると思います。）

なお、defaultとは「初期設定」という意味です。

[16:9(default)]の表示サイズは、《画像11》のような感じになります。

《画像12》

②・・・【画像アスペクト比を選択】の項目にて、[4：3]を選択します。

[4：3]の表示サイズは、《画像12》のような感じになります。

16：9より、縦に少し大きくなります。

《画像13》

③・・・【画像アスペクト比を選択】の項目にて、[1：1]を選択します。

[1：1]の表示サイズは、《画像13》のような感じになります。

選択できる中で最大のサイズです。

※アスペクト比の設定も、任意なので、16：9の初期設定のままでよければ、特に変更しなくてもOKです。

◆背景画像のマスクを選択する

ピックアップ3記事の背景画像のマスクを選択していきます。

ピックアップ3記事の背景画像とは、見出しやアイコンの背後に表示されている画像のことです。

まずは、マスクを選択すると、何処がどのように変わるのか！？確認してみましょう。

《画像14》

①・・・【画像のマスクを選択】の項目にて、[ブラック]を選択します。

②・・・背景画像にマスクが設定され、薄暗い背景になりました。

《画像14》を見ると分かると思いますが、背景画像とはピックアップ3記事の上部（点線の部分）。

つまり、見出しの背後の画像のことです。

ピックアップ3記事の背景画像は、ピックアップ1番目の記事の一部を切り抜きしたものが表示される仕様です。

それでは、ほかのマスクも選択してみましょう。

《画像15》

ほかのマスクの選択結果は、《画像15》のような感じです。

ただし、[カラー]と[カラー＋画像グレー]は、次項で設定する項目と関連性があります。

次項も確認した上で、設定してみて下さい。

◆背景画像のカラー系マスクの色を設定する

前項の【画像のマスクを選択】にて、カラー系マスクを選択すると、色の設定を行えます。

具体的には、[カラー]と[カラー＋画像グレー]が対象となります。

それでは、カラー系マスクの色を設定していきます。

《画像16》

①・・・前項の【画像のマスクを選択】にて、[カラー] や [カラー＋画像グレー]を選択。
※[カラー]や[カラー＋画像グレー]以外を選択していると、色は反映されません。

②・・・【カラー系マスク利用時の色を指定】の項目にて、[色を選択]をクリック。
　カラーピッカーが表示されるので、好みの色をクリックして選択します。

③・・・選択した色が、ピックアップ3記事の背景画像に反映されます。

他の色を選択した場合の、カラーサンプルは以下。

《画像17》

ブログ全体の基本色にベースに、好みの色を選んでみて下さい。

◆記事アイキャッチ上のカテゴリ名の表示／非表示

ピックアップ3記事にて、アイキャッチ上の[カテゴリ名]の表示／非表示を選択することが出来ます。

まず、カテゴリ名を表示してみましょう。

《画像18》

①・・・【アイキャッチ上のカテゴリを非表示にする】のチェックを外します。

②・・・記事のアイキャッチに、カテゴリ名が表示されました。

次にカテゴリ名を非表示にしてみましょう。

《画像19》

③・・・【アイキャッチ上のカテゴリを非表示にする】にチェックをします。

④・・・記事のアイキャッチから、カテゴリ名が非表示になりました。

ちなみに、アイキャッチ上のカテゴリ名は、カテゴリのリンクにもなっています。

表示／非表示は任意のため、お好みで設定してみて下さい。

■ピックアップ3記事　表示する記事を指定する

最後の設定では、ピックアップする3つの記事を指定していきます。

《画像20》

《画像20》を参照。

記事の指定は、設定項目の一番下。

記事IDの入力欄に、対象記事のIDを入力することで指定することが出来ます。

それでは、記事IDの確認方法を説明していきます。

《画像21》

記事IDを確認するためには、WordPressのダッシュボード画面に戻る必要があります。

そのまま戻ると、今までの設定がリセットされてしまうので、新しいタブでWordPressをもう一つ開くなどすると良いでしょう。

いったん、ピックアップ3記事の設定を[公開]にして、IDの指定のみ後で行うでもOKです。

①・・・WordPressのダッシュボード画面にて、[投稿]→[投稿一覧]を表示します。

②・・・対象の記事のID番号をコピーしましょう。
（右クリックからコピー　又は、 [Ctrl] ＋ C のショートカットキーでコピー）

《画像22》

もう一度、ピックアップ記事の設定画面を開きます。
（ダッシュボードから[外観] → [カスタマイズ]→[TOPページ設定[THE]] → [ピックアップ3記事設定]） 

③・・・コピーした記事IDを、各入力欄に貼りつけます。
（右クリックから貼りつけ　又は、 [Ctrl] ＋ V のショートカットキーで貼りつけ）

④・・・ピックアップ3記事が、ID指定した記事に変わりました。

最初の方で説明しましたが、記事の指定が無いと新着順に3つの記事がピックアップ記事に設定されます。

最後に、設定を有効にするため[公開]ボタンをクリックしましょう。

《画像23》

⑤・・・ピックアップ3記事の設定画面の一番上、[公開]をクリック。

以上で、ピックアップ3記事の設定は全て完了です。

サンプルとして、設定後の当ブログの全体像を貼っておきます。（参照程度に）

《ピックアップ3記事の設定後》

ピックアップ3記事を設定すると、こんな感じになります。

是非、カラーなど、自分好みに設定してみて下さい。

ピックアップ3記事の設定解説は以上になります。

お疲れ様でした。

■おまけ：『ピックアップ3記事』と『カルーセルスライダー』を比較

今回は、TheThorのピックアップ3記事の設定方法を紹介してきました。

当ブログでは、以前にカルーセルスライダーの設定方法も紹介しています。

よろしければ、こちらもご覧ください。

⇒⇒[TheThor]ブログにカルーセルスライダーを表示する方法

以下で『ピックアップ3記事』と『カルーセルスライダー』を比較してみました。

それでは、また！

スポンサーリンク