【THE THORピックアップ3記事のカスタマイズ】初心者向けに画像付きで解説

ピックアップ3記事
the thor ピックアップ3

 

今回は、THE THOR(ザ・トール)ピックアップ3記事のカスタマイズ方法についてお伝えします。

 

ピックアップ3記事以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

THE THORピックアップ3記事カスタマイズの手順

 

  • STEP1
    サンプルを見てカスタマイズする内容を決める
  • STEP2
    それぞれのカスタマイズをする
    1.ピックアップ3記事の表示・非表示
    2.ピックアップ3記事の見出し
    3.ピックアップ3記事の画像の大きさ
    4.ピックアップ3記事の画像マスク
    5.ピックアップ3記事の表示する記事の指定
    6.カテゴリーのイメージカラー

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

THE THORピックアップ3記事のカスタマイズサンプル

 

the thor ピックアップ3表示
非表示

 

the thor ピックアップ3

 

the thor ピックアップ316:9

the thor ピックアップ34:3

the thor ピックアップ31:1

 

the thor ピックアップ3なし
the thor ピックアップ3ブラック
the thor ピックアップ3ブラックメッシュ
カラー
the thor ピックアップ3カラー+画像グレー

 

the thor ピックアップ3カテゴリ名がイメージカラー
the thor ピックアップ3カテゴリ名がテーマカラー

 

【カスタマイズ1】ピックアップ3記事の表示・非表示

 

THE THORピックアップ3記事は、表示・非表示を選択することができます。

 

the thor ピックアップ3表示
非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー ピックアップ3記事
カスタマイザー ピックアップ3記事

Topページ設定>ピックアップ3記事設定>ピックアップ3記事設定>ピックアップ3記事を表示するか選択

選択してカスタマイザー公開 をクリック

 

【カスタマイズ2】ピックアップ3記事の見出し

 

THE THORピックアップ3記事は、見出し見出し左に表示するアイコン・見出し左に表示する補足説明をカスタマイズすることができます。

 

the thor ピックアップ3

 

THE THORピックアップ3記事は、見出しを入力しないと表示ができない仕組みになっているので、ご注意ください!見出し左に表示するアイコン・見出し右に表示する補足情報は、空欄でもピックアップ3記事は表示されます。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー ピックアップ3記事
カスタマイザー ピックアップ3記事

Topページ設定>ピックアップ3記事設定>ピックアップ3記事設定>セクションの見出しを入力

セクションの見出しを入力してカスタマイザー公開 をクリック

アイコンを表示:表示させたいアイコン名を入力

補足情報を表示:補足情報を入力

 

アイコン名を調べる
アイコン名がわからないときは、左上のアイコンオプション」のボタンをクリック
アイコン
アイコン一覧が表示されるので、アイコンのコードをコピーしてください

 

【カスタマイズ3】ピックアップ3記事画像の大きさ

 

THE THORピックアップ3記事に表示する画像の大きさは、16:9・4:3・1:1の3種類から選択できます。

 

the thor ピックアップ316:9

the thor ピックアップ34:3

the thor ピックアップ31:1

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー ピックアップ3記事
カスタマイザー ピックアップ3記事

Topページ設定>ピックアップ3記事設定>ピックアップ3記事設定>画像アスペクト比を選択

画像の大きさを選択して、カスタマイザー公開 をクリック

 

 

【カスタマイズ4】ピックアップ3記事見出し画像のマスク

 

THE THORピックアップ3記事の見出しの画像マスクは、下記の5種類から選択することができます。

(画像マスクとは、画像に透明度のある色や画像でカバーをかけること)

 

the thor ピックアップ3ブラック

the thor ピックアップ3ブラックメッシュ

カラー

the thor ピックアップ3カラー+画像グレー

the thor ピックアップ3なし

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー ピックアップ3記事
カスタマイザー ピックアップ3記事

Topページ設定>ピックアップ3記事設定>ピックアップ3記事設定>カラー系マスク利用時の色を指定

画像のマスクを選択して、カスタマイザー公開 をクリック

カラー系のマスクは、色の指定ができるので「色を選択」をクリックして色の指定をします。

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

【カスタマイズ5】THE THORピックアップ3記事の記事指定

 

THE THORピックアップ3記事に表示させたい記事を指定して表示させることができます。表示指定は、投稿名・カテゴリ名ではなく、IDを使って指定するので番号を調べてIDを入力します。

 

投稿ID
投稿記事のIDは、ダッシュボード>投稿>投稿一覧から調べることができます。
固定ページID
固定ページのIDは、ダッシュボード>固定ページ>固定ページ一覧から調べることができます。

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー ピックアップ3記事
カスタマイザー ピックアップ3記事

Topページ設定>ピックアップ3記事設定>ピックアップ3記事設定>1番目の記事IDを入力>2番目の記事IDを入力>3番目の記事IDを入力

ピックアップ3記事に表示させたい投稿ページ・固定ページのIDを入力して、カスタマイザー公開 をクリック

空欄の部分は、自動的に他の記事が表示されるようになります。

 

【カスタマイズ6】カテゴリーのイメージカラー

 

the thor ピックアップ3カテゴリ名がイメージカラー
the thor ピックアップ3カテゴリ名がテーマカラー

 

THE THORのカテゴリーはイメージカラーをカスタマイズすることができます。イメージカラーをカスタマイズすると、アイキャッチの右上にイメージカラーを背景にしてカテゴリーが表示されるようになります。

 

他には、カテゴリーごとのアーカイブページのタイトル、TOPページのピックアップ3記事、TOPページのカテゴリごとの最新記事にイメージカラーが反映されるようになっています。

 

カテゴリー
  1. ダッシュボード
  2. 投稿
  3. カテゴリー
ダッシュボード カテゴリー
  1. 色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力カラーパネル
  2. 更新 をクリック

 

カテゴリーの作成方法もお伝えしますね。

 

カテゴリー
  1. ダッシュボード
  2. 投稿
  3. カテゴリー
ダッシュボード カテゴリー
  1. カテゴリーの名前を入力
  2. カテゴリーのURLをアルファベットで入力
  3. 新規カテゴリ追加 をクリック

 

投稿新規追加
  1. ダッシュボード
  2. 投稿
  3. 新規追加
クラッシックエディタ カテゴリー

クラッシックエディタ

  1. カテゴリー名を入力
  2. 新規カテゴリーを追加をクリック
  3. 公開 をクリックしてカテゴリの追加が完了
ブロックエディタ カテゴリー

ブロッククエディタ

  1. カテゴリー名を入力
  2. 新規カテゴリーを追加をクリック
  3. 公開 をクリックしてカテゴリの追加が完了

 

THE THORピックアップ3記事のカスタマイズは完了です。

 


 

おつかれさまでした。

 

以上が、【THE THORピックアップ3記事のカスタマイズ】初心者向けに画像付きで解説でした。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

お読みいただき、ありがとうございました。

Chiharu