今回は、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です。
・おすすめ記事
・ピックアップ記事
・一押しの記事
などなど、好きなオリジナル文言を入力して下さい。
◆見出しを太文字にする
《画像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 のショートカットキーで貼りつけ)
④・・・見出しの左に、ニュースペーパーのアイコンが表示されました。
見出しのアイコンを表示する場合は、適切なものを選んで表示しましょう。
見出し文言に合ったものがきっと見つかると思うよ!
※見出しのアイコンは、任意設定なので表示したくなければ、入力無しでOK。
◆見出しの右側に補足情報を表示する
《画像10》
①・・・【見出しの右に表示する補足情報を入力】の入力欄に任意の補足文を入力。
今回は、例として「~ピックアップ~」と入力してみました。
②・・・見出しの右側に入力した補足文が表示されます。
※補足情報の表示は、任意設定なので補足情報を表示したくなければ、入力無しでOK。
■ピックアップ3記事 画像の設定
引き続き、ピックアップ3記事のアイキャッチ画像や背景画像の設定を行っていきます。
◆記事のアイキャッチ画像のアスペクト比を設定
記事のアイキャッチ画像の表示サイズを設定していきます。
なお、1番目のピックアップ記事は、一番大きく表示されます。(TheThorの仕様)
《画像11》
①・・・【画像アスペクト比を選択】の項目にて、[16:9(default)]を選択します。
(※16:9は初期設定なので、おそらく選択済みになっていると思います。)
なお、defaultとは「初期設定」という意味です。
[16:9(default)]の表示サイズは、《画像11》のような感じになります。
ちなみに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記事』と『カルーセルスライダー』の比較でした。
それでは、また!
スポンサーリンク