そんなお悩みを解決します。
本記事の内容
・アフィンガーとは？
・カスタマイズ方法について
・アフィンガーを使っているブロガー紹介
私もブログを始めた当初は、デザインについてとても悩んでいました。
そこで、今回は画像つきで当ブログ「今日からフリーランス革命」と同じデザインにする方法を伝授します！
アフィンガーを使ったら、簡単に真似できるので参考にしてみてください。
WordPressテーマ「アフィンガー5」とは？
SEOにかなり強い
アフィンガー5を一言で表すと「稼ぐことに特化したテーマ」です。
ポイント
・自由にサイトをデザインできる
・SEO対策がしっかりいしている
・表示速度が早い
・特典やサポートが充実
アフィンガー5では管理画面で様々な設定が可能です。
デザインから広告管理・SEO対策まですべてアフィンガー5で完結します。
アフィンガー5の概要
| テーマ名 | WING（AFFINGER5版） |
| 料金 | 14,800円（税込） |
| 使用制限 | 複数サイト使用OK |
| SEO内部対策 | ◎ |
| レスポンシブデザイン | ◎ |
| マニュアル・デザインテンプレート | ◎（購入者は無料でダウンロードできます） |
上記の様な感じです。
正直、無料テーマでもブログ運営はできますが、有料テーマ（特にアフィンガー）の方がSEO内部対策がしっかりしているので成果が早く出ます。
それと私の体験談なんですが、無料テーマから有料テーマに後から移行すると、記事の編集だけでかなりの時間を使います。
アフィンガーのカスタマイズ【当ブログ風】
ここからは、アフィンガーのカスタマイズについてご紹介していきます。
当ブログのような雰囲気のサイトにしたければ、下記の通り設定すればOKです。
トップページ編
まずは全体のアイキャッチとなるトップページから。
当ブログのトップページは固定ページで作成しています。
固定ページ
トップページの編集手順は以下の通りです。
①新着記事のスライドショーを作成
②列レイアウト・カテゴリ・バナー（おすすめ記事外枠）
③ブログカード作成（「おすすめ記事」にする記事を選択する）
3段階くらいの作業でトップページは仕上がりますよ。
①カテゴリーのスライドショー作成
新着記事のスライドショー
トップページの上部にある、スライドショーの作り方についてご紹介します。
上記の「固定ページ」の画像にあるように、新着記事・おすすめ記事は見出しのh3で作成しています。
これから、実際の作り方を紹介しますが、ワードプレスのエディターをClassic Editorのプラグインで有効化して編集を始めてください。（ブロックエディターだと作業が異なる）
固定ページで新規作成
それでは、まず「固定ページ」→「新規追加」でページを新規作成しましょう。
最初の行でh3で新着記事と入力したら、「タグ」→「記事一覧」→「カテゴリ一覧」という流れで、ショートコードを挿入します。
新着記事のスライドショー
工夫次第では様々なスライドショーにできますが、新着記事をスライドショーとして表示したければHTML下記のように変更してください。
⚠︎画像なのでコピーできません
変更点は2つ。
slide="off" → slide="on"
slide_date="" → slide_date="off"
slide_more="ReadMore" → slide_more="続きを読む"
すると、下記のようなスライドショーが完成します。
②列レイアウト・カテゴリ・バナー（おすすめ記事外枠）
続いては、カテゴリ一覧の下の「おすすめ記事」の部分の作り方について解説します。
アフィンガー上では、「レイアウト」というタグを変更することで、２列の記事表示ができるようになります。
「タグ」→「レイアウト」→「PCとTab左右50%」→「左右50%」
「左右50%」まで選択すると、左（黄色）右（水色）の列が表示されます。
次は、そのままカテゴリーの名前とリンクのバナー風ボックスを作成します。
バナー風ボックス
バナー風ボックスも先ほどの手順で、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」と挿入します。
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」
以下のポイントを変更すればOK。
- st-flexbox url=”リンク先URL”
- title=”カテゴリーのタイトル”
- backgroud_image=”タイトルの背景画像”
これで②も終了です。
③ブログカード作成（「おすすめ記事」にする記事を選択する）
ブログカード
ブログカードの配置はとても簡単。
「バナー風ボックス」の後で改行をして、「カード」というボタンを押すだけ。
すると下記のようなコードが表示されます。
このコードの変更点は1つ。
id="組み込みたい記事のID"
※記事のIDは「管理画面」→「投稿一覧」の記事タイトル欄にある数字のこと。
記事を4つ表示させたければ、この作業を4回繰り返すだけです。
最後に、「管理画面」→「AFFINGER5 管理」→「デザイン」→「抜粋設定」で、「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れると、ブログカードがタイトルだけの表示になります。
以上でトップページは完成です。
アフィンガーを使っているブログサイト紹介
「アフィンガー5」だと他にも様々なデザインが楽しめます！
数あるアフィンガーサイトの中から、特に参考になるサイトをご紹介します。
幼児教材ガイドブック
幼児教材の比較サイトです。
サイトの色だけではなく、イラストや写真にまでこだわっているのが伝わります。
DEVICEZ
DEVICESは理化学機器の擬人化をコンセプトにしたサイトです。
同じアフィンガーを使っているとは思えないくらい、デザインの種類が異なっています。
てっぺのマネーハック
題名の通り、借金地獄から復活したサラリーマンがお金の知識を発信するサイトです。
当ブログと同じ、列レイアウト・バナーデザインが使われていてなんだか親近感が湧きます。
NOJI BLOG
ブログ情報や人に役立つ情報を発信しているサイト。
落ち着いたデザインで統一感がありますね。
HAYAMIZ BLOG
ブログの作り方を始め・スマホ/PC・ネットのノウハウを発信するサイト。
ヘッダーがインパクトあってとてもお洒落です。
まとめ：WordPressテーマなら「アフィンガー5」
結論、私も「アフィンガー5」を使ってとても満足しています。
有名ブロガーも使用者が多いので、参考にできるサイトが多く、デザインに対するモチベーションが高まります。
冒頭でも書いた通り、テーマの移行は記事数が増えるほど大変な作業になります。
なので、無料テーマ・有料テーマで迷うくらいなら、
私もそんな感じでした。
※お金をかけた事で意欲も上がり、成果も生まれました。
まずは、公式ホームページからチェックしてみて下さい。
購入はコチラ
「稼ぐ」に特化したWordPressテーマ
