AFFINGER6のトップページでできることカスタマイズまとめ!

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

ブログを作る場合、ほとんどの方はトップページを作られているのではないでしょうか?アフィリエイトを導入するのなら、その商品やサービスに関連したページにするでしょうし、ブログの全体をひとめでわかるようにも作成したりします。

当ブログは、トップページにブログの全体像がわかるようにし、ヘッダー画像も個別に作成して配置しています。

AFFINGER6のトップページでできることや作成例をお伝えします。

 

ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。

※今なら、5大購入特典をお付けしています!

AFFINGER6のトップページでできること一覧

まずは、AFFINGER6のトップページでできることを書きだしてみました。AFFINGER6の管理画面で操作するものが多いので、操作場所さえ覚えてしまえばあとは作りやすいです。

  1. スライドショー
  2. タブ式カテゴリー一覧
  3. レイアウト
  4. 新着記事一覧
  5. 記事一覧の作成&サムネイル画像設定
  6. 動画背景
  7. NEWS(お知らせ)の表示

 

 

AFFINGER6のトップページの使い方 1.「スライドショー」

Diver、THE THOR、STORK19などページにスライドショーを配置することができます。無料テーマなどではプラグインで挿入していましたが、Wordpressテーマ自体でスライドショーを入れられるものが多くなってきました。

AFFINGER6でも同じで管理画面で挿入します。

 

▼ AFFINGER6管理画面 ⇒ ヘッダー下/おすすめ

サムネイルスライドショーというタイトルの部分で調整していきます。

調整すれば以上のようになります。サムネイルにタイトルを付け、画像の角を取っています。その他、スライドショー部分に背景をつけました。

サムネイルスライドショーでは、どのページに表示させるか、どんな記事で何個にするのか、その他スタイルなどが調整できるようになっています。ご自身のブログに合わせて調整してください。

 

 

スライドショーの背景画像を追加する。

例の画像では、スライドショーの背景に画像を設置しています。その設置方法もお伝えします。

▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ ヘッダー画像上/下ウィジェット

 

ヘッダーエリア下に画像を追加し最後に公開をクリックします。

 

速報!
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。


⇒ 詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

 

AFFINGER6のトップページの使い方 2.「タブ式カテゴリー一覧」

トップページにタブが付いたカテゴリー一覧を配置することができます。JINやTCDでもおなじような機能がありますがAFFINGER6の場合には自分の好きな色やスタイルで調整できるようになっています。

とても可愛くなりますので是非設置してみてください。

 

左から黄色、赤、緑のタブがありますが、これはカテゴリーを設定しタブをクリックすると内容が表示されます。色を工夫すると目立つので記事が多い場合やユーザーに整理して見せたい場合などに使えます。

▼ AFFINGER6管理画面 ⇒ トップページ

 

 

タブ式カテゴリー一覧というタイトルの部分で設定をします。

カテゴリーが4つまで設定できますので、IDコードを入力します。(カテゴリーIDコードは次の章でも説明しています。)

 

なつ
ここで注意しないといけないのは、カテゴリーは2つ以上設定していないと表示されません。

それぞれのタブごとに色を設定し、タブの形(3種類)やその他必要事項を入力およびチェックを入れSAVEをクリックします。

 

AFFINGER6のトップページの使い方 3.「レイアウト」

トップページで表示したいもの、させたくないもの、さらに1カラム2カラムなどの調整が管理画面でできます。そして、ヘッダー自体がいらない場合にも対応できます。

ブログの内容によってはスライドショーや画像が必要でない場合にこちらを調整しましょう。

▼ AFFINGER6管理画面 ⇒ トップページ

トップページのレイアウトというタイトル部分で「1カラムにする」「LP化する」などにチェックを入れSAVEをクリックします。

ヘッダーを表示させたくない時

その他、ヘッダー(画像やスライドショー)を表示させたくない場合には「LP時にヘッダー(headerエリア)を表示する」の部分のチェックを外しSAVEにチェックを入れます。

ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー)の公式ページを確認する
※今なら、5大購入特典をお付けしています!
関連記事

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6(アフィンガー)。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。⇒ 違いについてはコチラの記事でどうぞ。

 

AFFINGER6のトップページの使い方 4.「新着記事一覧」

新着記事一覧の記事数や配置場所の調整も管理画面でできるようになっています。カテゴリーのIDコードで個別指定もできます。記事一覧のタイトルの部分で設定をしていきます。

▼ AFFINGER6管理画面 ⇒ トップページ

カテゴリーIDで設定

一番最初に「トップページ新着記事一覧に表示するカテゴリ(ID)を指定」という枠内にカテゴリーのIDコードを入れて個別設定します。カテゴリーIDの調べ方は以下の通り。

▼ 投稿 ⇒ カテゴリー

 

画面を開くとIDコードが記載されていますので一覧表に表示させたいコードを控え記事一覧の枠内に入力します。

新着記事

新着記事として表示させたい記事数、表示させたくない場所など指定する部分がありますのでそれぞれチェックを入れSAVEをクリックします。

 

訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。

※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

AFFINGER6のトップページの使い方 5.「記事一覧の作成&サムネイル画像設定」

新着記事や記事一覧にサムネイル画像を表示させたときのスタイルの変更ができます。例えば、サムネイルは四角ですが丸にも変更可能ですし、AFFINGER5の時にもあったように、ポラロイド写真風でセロテープまで付けるということも可能です。

 

▼ AFFINGER6管理画面 ⇒ 全体

サムネイル画像設定の部分でスタイルを選ぶことができます。

私のように楕円になったり条件によってはまん丸にならない場合があるらしいので少し雰囲気を変えたい時には活用できます。その他、右に配置したり、ポラロイド写真風にしたりはこの部分で設定を行います。

 

 

AFFINGER6のトップページの使い方 6.「動画背景」

トップページの背景にYoutubeの動画を設定する方法です。ご自身で動画を作っていたりイメージ動画を購入された方などこの方法で設定してみてください。

▼ AFFINGER6管理画面 ⇒ トップページ

下の方にスクロールしていくと動画背景というタイトルがあります。

そちらにYoutubeの動画コードを入力します。

Youtube動画のコードの探しかた

背景に使いたい動画の右下に「共有」という部分がありますのでそちらをクリックします。するとコードが出てきますので、後半部分、アンダーラインのところをコピペしておいてください。

動画背景の「背景に流すYoutube動画ID」の部分にコピペしたコードを貼り付けます。

トップページ(PC)の背景で動画を流すにチェックを入れSAVEをクリックします。

 

 

訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。

※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

 

AFFINGER6のトップページの使い方 7.「NEWS(お知らせ)の表示」

記事一覧などのサムネイルばかりでは、記事が目立たないこともあります。そんな時には、NEWS(お知らせ)というテキストでシンプルに配置する項目を使いましょう。

▼ AFFINGER6管理画面 ⇒ トップページ

 

NEWS(お知らせ)の表示のタイトル部分でまず「お知らせをTOPページの一番上に表示する」のチェックを入れます。後、「お知らせタイトルバーに表示する文字」にタイトルを入れ何件表示するのか入力しSAVEをクリックします。

 

  • タイトル・・・NEWS
  • お知らせの表示・・・3記事

上記の内容を設定すると以下の画像のようになります。

 

 

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. マニュアルなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

 

出典:AFFINGER5(アフィンガー5)

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. マニュアルなどのサポート

なにかわからないことがあった場合、詳しく記載しているものがあるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

 

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

おすすめ!WordPressテーマ
「ACTION(AFFINGER6)」

  • 高機能の最新テーマで大人気
  • デザイン変更でいろんな用途に使える
  • マニュアル完備
  • 各パーツがプロに作ってもらったみたいにアレンジ可能
  • バナーや囲い枠スライダーなど特殊なものが簡単に作れる。

 

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。⇒ 違いについてはコチラの記事でどうぞ。