AFFINGER

AFFINGER5のトップページのカスタマイズ方法【写真付き】

AFFINGER5トップページのカスタマイズ方法

 

悩む学生
AFFINGER5を使っています。デフォルトのデザインが嫌なのでトップページを自分でカスタマイズしたいです。でも難しすぎて頭が壊れそう。方法を教えてください。  

 

今回はこんな悩みを解決します。

 

本記事の内容

  • AFFINGER5版】トップページの全体像
  • AFFINGER5版】メインエリアのカスタマイズ方法
  • AFFINGER5版】ヘッダー、サイドバー、フッターエリアのカスタマイズ方法

 

アフィンガー5のデフォルトのトップページはあまりおしゃれじゃないですよね。ですが、自分でどうやって作ればいいのか分からない人も多いかと思います。

 

ぼく自身まったく分かりませんでした。
リットン

 

そこで、今回はトップページのカスタマイズ方法を誰でも分かるように、写真を使いながら紹介します。

 

本記事を見れば、おしゃれなトップページの作り方も分かり、ブログのモチベも上がりますよ。

 

ぜひ最後まで見てください。

 

AFFINGER5のトップページの全体像

考え事をする男性

 

まずは、トップページの全体像を把握しておきましょう。全体像とは下記の3つ。

 

  • トップページの役割
  • トップページの構成要素
  • トップページの作り方の大まかな手順

 

さくっと紹介します。そんなこといいからカスタマイズ方法だけ教えてという方は次の目次へ飛んでください。

 

トップページのの役割

 

トップページはいわゆるサイトの看板。訪問者の多くはあなたのトップページを見ます。

 

そのため、トップページの見た目が悪いのは訪問者がすぐに離脱する原因になりかねません。

 

なので、トップページはしっかり作りこむ必要があります。また、単なるデザインだけではなくユーザビリティにも気を使いましょう。

 

つまり、トップページは訪問者が見たいところにすぐに飛べるように工夫する必要があります。具体的には、カテゴリーや悩み別に分けられているかが重要です。

 

どこに何があるか分からないサイトは見る気を失せますからね。
リットン

 

また、逆に記事を書く側にとってはトップページからいかに収益記事に運べるかが肝心です。トップページからいきなり収益記事に飛んで、購入してくれたらありがたいですからね。

 

トップページの役割をまとめると下記のとおりです。

 

トップページの役割まとめ

  • 見栄えを整えて離脱を防ぐ役割
  • 訪問者に何があるかを分かりやすく伝える役割
  • 収益記事に繋げる役割

 

トップページの構成要素

 

サイトは大まかに下記の4つの部分に分かれています。 

トップページの構成要素

  1. ヘッダーエリア
  2. サイドバーエリア
  3. メインエリア
  4. フッターエリア

 

図で表すと以下のとおりです。

ブログのトップページの要素

 

本記事では、このうちのトップページの最も重要なメインエリアのカスタマイズ方法を紹介していきます。

 

ほかのエリアもしっかりと参考記事を用意しているので安心してください。
リットン

 

AFFINGER5でのトップページの作り方を大まかに解説

 

次に、トップページ(メインエリア)を作る大まかな手順を紹介します。これを念頭に作業すれば、多少は理解しやすくなるはずです。

 

AFFINGER5トップページの作り方

  1. 固定ページの新規追加
  2. 新規固定ページの編集
  3. トップページを固定ページに

 

 上記の手順に従えば誰でもできます。

 

AFFINGER5のトップページの作り方(パターン別で紹介する)

頭にアイデアが浮かぶ人の図

【AFFINGER5】メインエリアのカスタマイズ方法

では、実際にトップページのカスタマイズ方法を紹介します。

 

step
1
固定ページの新規追加

 

まずは、固定ページを作成します。WordPressの管理画面から固定ページ新規追加をクリック。タイトルは分かりやすく、トップページ用という名前にしましょう。

新しい固定ページ

 

とりあえずこれで、新規の固定ページ作成が完了です。

 

step
2
新規固定ページの編集

 

ここからは実際に作成した固定ページを編集していきます。

 

トップページによく使われているカスタマイズ方法は下記のうちのどれかです。アフィンガー5ユーザーはこれらのうち2つを組み合わせて、トップページをカスタマイズしています。

 

  • その①:タブごとのカテゴリー
  • その②:新着記事のスライドショー
  • その③:バナー画像とブログカードを使う方法
  • その④:おすすめ記事をカード型にする手法

 

当サイトは②と④を使っています。アフィンガーユーザーでよく見るのは②と③の組み合わせですね。
リットン

 

どのタイプでもできるように、1つずつ詳しく説明していきます。

 

その①:タブごとのカテゴリー

 

完成すると以下のような状態になります。

 

まずはタグレイアウトタブ(切り替えボタン)をクリック。数は自分でお好みに決めましょう。

AFFINGER5のタブ切り替え

 

そしたら、このようなコードが表示されるはずです。(2つの場合)

 html
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main]
[/st-tab-content]

 

必要な部分だけ、1つずつ説明します。

fontawesomeテキストの前にアイコンを表示させます
textタブのカテゴリー名
bgcolorタブの色を変化させられます
bordercolorタブの境界線の色を変えられます
fontweightテキストの太さを変えられます(bold推奨)

 

例えば、以下のコードを利用すれば、こんなタブができます。

 

 html
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="st-svg-oukan" text="AFFINGER5" bgcolor="#ffff7f" bordercolor="#ffff7f" color="" fontweight="bold" checked="checked"]
[st-input-tab fontawesome="fa-file-text-o" text="BLOG" bgcolor="#ffbf7f" bordercolor="#ffbf7f" color="" fontweight="bold" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main]
[/st-tab-content]



タブ1のコンテンツ

タブ2のコンテンツ


 

このようにタブの見た目を整えたら、タブのコンテンツ部分に、自分の好きなカテゴリーの記事を入れます。

 

タグ記事一覧カテゴリ一覧というのをクリックして、表示されたコードをタブ1のコンテンツという部分に書き換えます。そして、cat=の部分にカテゴリーIDを入力しましょう。

 

アフィンガー5タグからカテゴリ一覧

 

カテゴリーのID投稿カテゴリーから確認できます。

 

cat以外の部分も少し説明しておきますが、スライドショーの設定をonにしないようにだけ注意しましょう。表示がおかしくなることが多々あります。基本はカテゴリのIDだけでかまいません。

page表示する記事数を調整
order降順か昇順かを指定
orderby並び方法の変更
child子カテゴリーの表示の有無
slideスライドショー化の有無
slides_to_showスライドショー表示数の列数の変更
slide_date日付の表示の変更
slide_more続きを読むの有無
slide_centeronにすると両端が見切れます(スマホの設定)

 

設定が終わり、プレビューの画面でうまくタブ切り替えができていたら終了です。

 

その②:新着記事のスライドショー

 

完成すると以下のような状態になります。

本に乗る少女

Webライターのスキル

2021/4/26

Webライターに学歴は必要か現役ライターが解説【結論:重要ではない】

  悩む学生副業のWebライターに興味があります!だけど、自分は学歴がないし無理なのかな?学歴がないと稼げないのか教えてほしい。   今回はこんな疑問をWebライターのぼく(学歴は国立の理系学生)が解決します。 本記事の内容 副業Webライターに学歴はいらない 副業Webライターに必要なモノは? 学歴なしがWebライターになるための勉強方法   副業Webライターに興味があるけど、学歴がなくて不安という人は少なからずいると思います。どんな仕事でも、学歴があった方が得をしたり、優遇されるのが基本で ...

ReadMore

たばこのゴミを捨てる

Webライターのスキル

2021/4/18

Webライターはゴミなのか?Webライターが語る【結論:ゴミ記事は多い】

  悩む学生副業に挑戦しようと思ってます。Webライターに興味があるのですが、Webライターはゴミみたいな仕事をするって本当ですか?知りたい。。。   今回は、こんな悩みをWebライターしてるぼくが答えます。   本記事の内容 Webライターがゴミと呼ばれる理由【WELQ事件から学ぶ】 Webライターがゴミと呼ばれないためには【真摯であれ】 Webライターがゴミと思う人はやらなくてもいいんじゃないか   Webライターを始めよう、もしくはちょっとかじってみた人のなか ...

ReadMore

落ち込んでいる人

Webライターのスキル

2021/4/17

Webライターはオワコンか?将来なくなるのかを考えてみた【結論:やってから決めよう】

  悩む学生Webライターは飽和しているらしいけど、オワコンなんですか?今からでも始めるべきなの?   今回はこんな悩みを解決します。   本記事の内容 Webライターに将来性を感じてしまう理由 【注意】将来性のないWebライターもいる 脱オワコンWebライターのためにするべきこと   Webライターという副業に興味がある人は増える一方で、『Webライターはオワコンだし、将来性がない』といった意見も少なくありません。   そこで、今回は現役のWebライターであるぼくが、Webライターがオワコンか ...

ReadMore

家でお金を稼ぐ人

Webライターのスキル

2021/4/17

【未経験OKです】副業でWebライターを始める手順を【現役ライター】が解説

  悩む学生副業としてWebライターを始めたい。お小遣いくらいは稼げたら嬉しい。。始め方とか、どうやったら稼げるようになるのか教えてほしい。 こんな悩みを解決します。   本記事の内容 副業でWebライターを始める手順【簡単】 副業Webライターの収入目安 副業Webライターの注意点【ぼくの失敗談も添えて】   この記事を書くぼくは、現役のライターで初月から3万円以上稼げました。自分で言うのもなんですが、Webライターとして頑張った方かなと。   ただ、「よく考えたら遠回りだ ...

ReadMore

大学生にwebライターはおすすめ

Webライターのスキル

2021/4/18

大学生にwebライターのバイトはおすすめできる!【現役ライターが解説】

  悩む学生大学生です。最近webライターというバイトがあるって聞きました。何やら普通のバイトより稼げるとかいう噂も聞いてます。稼げるなら始めたいけど、仕事内容のイメージができない。というか、そもそも大学生でもWebライターになれるの?   今回はこんな疑問に答えます。   本記事の内容 大学生がWebライターのバイトで稼ぐ全体像 大学生がWebライターのバイトをするメリット・デメリット 大学生がWebライターのバイトを始める手順   大学生でWebライターというバ ...

ReadMore

新着記事のスライドショーはとても簡単。タグ記事一覧/カードカテゴリ一覧(スライドショー)をクリックして終了です。

 

アフィンガー5スライドショー作成

 

ただ、このままではスライドショーしか流れておらず、訪問者は何が流れているのか見当がつかない可能性もあります。なので、見出しを付けてあげましょう。

 

スライドショーの上に、NEWや新着記事などと書きます。その文字を選択して、h2h3タグで囲んであげましょう。

 

そうすれば、読者にも新しい記事であることが伝わりやすくなります。

 

その③:バナー画像とブログカードを使う方法

 

このカスタマイズはAFFINGER5ユーザーの多くが利用しています。ぼくのブログカードはカスタマイズしているので、デフォルトとは違いますが、イメージはこんな感じです。

 

バナー画像とブログカード

 

大まかな手順は下記のとおりです。

 

バナー画像とブログカードを使う方法

  1. レイアウトで画面を2分割
  2. バナーの作成
  3. 好きな記事を挿入

 

 順に説明します。まずはタグレイアウトPCとTab(959px以上)左右50%をクリック。これで画面の2分割は終了です。

アフィンガー5のPCとTab→左右50%

 

悩む学生
全サイズとPCとTabは何が違うの?  

 

全サイズだと、スマホで見たときも画面が2分割で表示されます。逆にPCとTabならパソコンで見たときのみ、画面が2分割されます。

 

バナーの作成をおこないます。タグボックスデザインバナー風ボックス基本をクリックして、2分割した画面のボックスに入力してください。

 

以下のコードが表示されると思います。

 html
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]
[/st-flexbox]

 

そしたら、url=""、title="タイトル" backgroud_image=""3つを以下のように変更してください。 

 

  • url=”自分のカテゴリーページのURL”
  • title="カテゴリーの名前" 
  • backgroud_image="写真のURL"

 

写真のURLに関してはメディアから好きな画像をクリックすれば、ファイルのURLというのがあるので、それをコピーしましょう。

 

メディアからURLを確認する方法

 

これで、バナーの作成は終了です。バナーの下でカードをクリック。表示させたいおすすめの記事が複数あれば好きな数だけ用意しましょう。

 

おすすめは3つです!多くても4つまでにしましょう。
リットン

 

カードをクリックしたら下記のようなコードが表示されるはずです。

 

 html
[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]

 

表示されたら以下のようにお好みで入力してください。

id記事のIDを入力
label入力したテキストがラベルになってカードにつきます
pc_height高さの調節ができます
name入力した文字がタイトルになります
bgcolorラベルの背景色になります
colorラベルのテキスト色が変わります
fontawesome入力すればアイコンが表示されます
readmore続きを読むの有無の設定(offにすると消えます)
thumbnailサムネイルの表示か非表示を設定できます

 

記事のIDは投稿から確認できます。同様にほかのカードも設定しましょう。

 

カードを設定すれば、「このテキストは最後に消して下さい(50%)」を消してください。最終的に以下のようになれば、完成です。

 

バナーとブログカードのコード

 

その④:おすすめ記事をカード型にする手法

 

おすすめ記事をカード型にする方法を紹介します。完成イメージはこのとおりです。

カード型の表示

 

手順を先に確認しましょう。

おすすめ記事をカード型にする手順

  1. AFFINGER5管理でサムネイルサイズの調整
  2. PCTabで画面を2分割にする
  3. ブログカードを設置
  4. カード型に設定

 まずはWordPress管理画面からAFFINGER5管理デザインサムネイル画像設定といきます。そしたら、各記事一覧で表示するサムネイルデザインです。の部分をフルサイズにチェックしましょう。

 

アフィンガー5管理画面のサムネイル設定

 

次に固定ページに移ります。先ほどと同じく、タグレイアウトPCとTab(959px以上)左右50%をクリックで画面を2分割にします。

 

2分割した画面のところでカードをクリックしましょう。先ほどと同じで、このidの部分に自分の好きな記事のIDを入力しましょう。ほかはいじらなくてもOKです。

 

最後にカード型の設定をおこないます。先ほどのコードを選択して、スタイルレイアウトカードスタイルを選びましょう。
そしたら、編集画面では薄い点線で先ほどのコードが囲まれます。この状態になれば、プレビューで確認しましょう。

 

アフィンガー5のレイアウトからカードスタイルの設定

カード型の表示のコード

以上でメインエリアのカスタマイズ方法の紹介は終わりです。上記で紹介した4つを組み合わせて、オリジナルのトップページを作りましょう。

 

step
3
トップページを固定ページに

 

最後に、作成した固定ページをトップページに設定します。

 

カスタマイズホームページ設定ホームページから作成した固定ページを選択してクリック。

アフィンガー5のホームページ設定の図

 

そして、下記のようにトップページ用と書かれたものが、フロントページと表示されていればOKです。

 

トップページがフロントページになっている図

 

【AFFINGER5】ヘッダーエリアのカスタマイズ方法

 

ヘッダーエリアでカスタマイズできるところは主に写真の5つです。

アフィンガー5のヘッダー部分

 

ヘッダーエリアのカスタマイズ方法は写真付きで詳細にこちらの記事で解説しているので、参考にしてみてください。

 

AFFINGER5 のヘッダーエリアのカスタマイズ法【写真あり】

 

【AFFINGER5】サイドバーのカスタマイズ方法

 

サイドバーには主に以下の4つの要素を入れているブロガーさんが多いです。

  • プロフィール
  • アーカイブ
  • カテゴリー別メニュー
  • おすすめ記事

 

上記の設定方法に関しては、こちらの記事で詳しく解説しています。

AFFINGER5のサイドバーカスタマイズ方法【写真付きで解説】

 

【AFFINGER5】フッターエリアのカスタマイズ方法

 

フッターエリアの重要度はそれほど高くありません。とはいえ、記事を読み終えると目につく部分ではあるので見栄えは整えたいところです。

 

Copyright@サイト名 年 All Rights Reserved Powered by AFFINGER5のようになっていたりすると、使用しているテーマがもろばれで少し恥ずかしいですよね。

 

当サイトのように表記をスマートにする方法も紹介しているので、ぜひこちらの記事を参考にしてみてください。

AFFINGER5のフッターのカスタマイズ方法【誰でもできる】

 

まとめ:アフィンガー5のトップページをおしゃれにカスタマイズしよう

ロケットを見上げる男性

 

今回はAFFINGER5のトップページの中心となるメインのエリアのカスタマイズ方法を紹介しました。

 

アフィンガー5はカスタマイズ箇所が多すぎて、初心者の方は悩むことも多いでしょう。しかし、利用者が多いのでググればほとんど解決します。

 

諦めてほかのテーマに移ったりせずに、落ち着いて1つずつ自分好みのブログに仕上げていきましょう。

 

今回は以上です。ありがとうございました。

関連記事【AFFNGER5のレビュー】メリットとデメリットを使用者が解説

関連記事AFFINGER5は初心者におすすめできる?【嘘なしでレビュー】

-AFFINGER

Copyright © Lytton Blog