トップページに記事ランキングを設定する方法

TOPページに記事ランキングを表示

この記事では、トップページに記事ランキングを設定する方法について、解説しています。

トップページ記事ランキング

 

トップページの記事ランキングは、フッターCTAの上のエリアに表示されます。

どこで設定するの?

外観 > カスタマイズ >TOPページ設定 > 記事ランキング設定 で行います。

記事ランキング設定

 

記事ランキングを表示する

デフォルトでは「非表示」に設定されているので、「表示」を選択します。

記事ランキング表示設定

 

ランキングの対象期間を設定する

ランキングの対象とする期間を設定します。「全期間ランキング(デフォルト)」「月ランキング」「週ランキング」「日ランキング」から選択します。

ランキング期間の設定

 

全期間を選択していると、うまく表示されないことがあります。その場合は、月・週・日のいずれかを選択するか、リアルタイム機能をONにしてみましょう。

 リアルタイム機能を設定する(アクセスランキング設定)

 

表示件数を設定

ランキングの表示件数を5件~10件の間で設定します。未入力の場合、5件で表示されます。

表示件数の設定

 

表示条件の設定

表示条件を設定します。

カルーセルスライダーの表示条件

 

表示条件を設定した場合、指定するID入力が必要になります。複数指定する場合は、「,」カンマで区切って入力します。

指定するID入力

指定した投稿を表示

指定した投稿のみを表示することができます。

指定した投稿以外を表示

指定した投稿以外を表示することができます。

指定したカテゴリーの投稿を表示

指定したカテゴリーに属している投稿のみを表示することができます。

指定したカテゴリー以外の投稿を表示

指定したカテゴリー以外に属している投稿のみを表示することができます。

 

セクションの見出しを設定

ピックアップ3記事が表示されるエリアの見出しを設定します。「見出しを太字にする」にチェックを入れると太字にすることができます。

セクションの見出し設定

デフォルト

見出し(デフォルト)

 

太字

ランキング見出し(太字)

 

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

見出しの左に表示するアイコンを設定します。

ピックアップ3記事見出しアイコンの設定

「アイコン一覧」をクリックし、表示したいアイコンの横に表示されているアイコン名をコピーし、貼り付けます。

アイコン一覧

 

「icon-flag」を設定した場合、次のようになります。

アイコンフラッグを設定

 

見出しの右に表示する補足情報を設定する

見出しの右側に補足情報を表示することができます。

TOPランキング 補足情報

 

画像アスペクト比を設定する

画像のアスペクト比(サイズ)を選択します。

16:9(デフォルト)

記事ランキング画像アスペクト比16:9

 

4:3

記事ランキング画像アスペクト比4:3

 

1:1

記事ランキング画像アスペクト比1:1

 

0:0(非表示)

記事ランキング画像アスペクト比非表示

 

0:0非表示を選択時
記事タイトル上にカテゴリーが表示されます。これは、「アイキャッチ上のカテゴリを非表示にする」を設定しても消すことができない仕様です。そんなときは、投稿日・更新日などを表示する設定にしておくことで解決できます。

投稿日を表示

 

 
サトコハ
投稿日などを表示させたくない場合は、「0:0(非表示)」を選択せず、アイキャッチが表示されるように設定しておきましょう。

アイキャッチ上のカテゴリー・投稿日・更新日・閲覧数の表示設定

アイキャッチ上のカテゴリーを非表示にしたり、投稿日・更新日・閲覧数の表示を設定したりすることができます。

投稿日・更新日表示設定

カラー系マスク利用時の色を指定

「カラー系マスク利用時の色を指定」と項目にありますが、画像マスクを指定する項目がありません(表記誤りかな?)。

実際には、画像マスクのカラー指定ではなく、記事ランキングのタイトル背景のカラーを指定することになります(水色の部分)。

トップページ記事ランキング

 

カラーの指定方法

  1. まず、「色を選択」ボタンをクリックします。

    色を選択ボタン

  2. クリックするとカラーピッカーが表示されるので、色を選択します。

    カラーピッカー

    サトコハ
    色は、カラーコードでも指定することができるよ。「色を選択」ボタンの横にある欄(#00a568と表示があるところ)にコードを入力してね。

 

スポンサーリンク