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

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

 

~この記事は、こんな方におすすめ!~
●TheThorを使ってブログにピックアップ記事を設定したい。

●TheThorのピックアップ3記事ってどんな機能!?
●WordPressのテーマ[TheThor]の使い方をもっと知りたい。


さて、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です。

 

~ピックアップ3記事の見出し(セクションの見出し)の例~

・おすすめ記事
・ピックアップ記事
・一押しの記事
などなど、好きなオリジナル文言を入力して下さい。

 

◆見出しを太文字にする


《画像6》

 

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

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

 

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


《画像7》


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

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

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

 

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

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

 

《アイコンの一覧》


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

~アイコン一覧の カテゴリとアイコン数~

●基本アイコン・・・256種類
●建物・乗り物アイコン・・・8種類
●読込・AV機器アイコン・・・24種類
●オーディオ系アイコン・・・27種類
●人・顔アイコン・・・45種類
●矢印・コメントアイコン・・・36種類
●ロゴアイコン・・・100種類

(TheThorのバージョン2.2.2では、全496種類のアイコンがあります。)


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

 

《画像8》


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

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

 

《画像9》


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

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

 

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

 

 
Nada
TheThorのアイコンは種類が豊富。
見出し文言に合ったものがきっと見つかると思うよ!


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

 

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


《画像10》


・・・【見出しの右に表示する補足情報を入力】の入力欄に任意の補足文を入力。

今回は、例として「~ピックアップ~」と入力してみました。

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


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

 

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


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

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


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

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

 

《画像11》

 

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

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

 

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

 

 
Nada
僕のおすすめは初期設定の16:9。
ちなみに16:9は、これでも最小サイズなんです。


《画像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記事』と『カルーセルスライダー』を比較してみました。

~ピックアップ3記事の良いところ/悪いところ~

良いところ
カルーセルスライダーに比べると、断然で表示速度が速い(検証済み)
・一押しの記事を分かりやすく表示でき、ユーザーの目線を誘導する効果がある
悪いところ
・1番目のピックアップ記事が大きすぎる
・3記事しかピックアップ出来ない

~カルーセルスライダーの良いところ悪いところ

良いところ
・ピックアップ3記事より、もっと多くの記事を表示することが出来る
・見栄えが良く、デザイン的にもオシャレ
悪いところ
トップページの表示速度低下の原因となる
・記事が流れるため、ピックアップ3記事ほどの目線誘導効果は無い

以上、『ピックアップ3記事』と『カルーセルスライダー』の比較でした。

 

 
Nada
どちらを選ぶかは、貴方しだい!

 

それでは、また!

スポンサーリンク