BLOG

アフィンガーのおすすめカスタマイズ法を解説【Tsuzuki Blog風デザイン】

アフィンガーのおすすめカスタマイズ法を解説【Tsuzuki Blog風デザイン】
悩んでいる人

先日、アフィンガーを購入して、いまデザインカスタマイズに取り組んでいます。かっこいいサイトデザインを実現したいのですが、Tsuzuki Blog風のカスタマイズ方法を教えてほしい!

こんな疑問にお答えします。

本記事の内容

・アフィンガーとはどんなテーマなのか?
・カスタマイズ方法①:トップページ編
・カスタマイズ方法②:フォント編
・カスタマイズ方法③:サイドバー編
・カスタマイズ方法④:おすすめ記事編

本記事の信頼性

Tsuzuki
Tsuzuki(@1276tsuzuki

この記事を書いている僕は、ブログ歴1年です。
副業で当ブログを運営しており、月間のブログ収入は285万円ほど。WordPressのテーマはアフィンガーを使っています。

以前、WordPressテーマのAFFINGER5をレビューする【デメリットあり】という記事を書いたところ、「アフィンガー導入したのですが、Tsuzuki Blogっぽいデザインカスタマイズの方法が知りたい!」という意見をいただきました。

そこで、今回はアフィンガーを当ブログ風にカスタマイズする方法について、画像つきでご紹介していきます。

当ブログでは、「なんかいい感じ」を大切にしており、TOPページ・本文のフォントなどの細かい部分のクオリティを重視しています。

アフィンガーを使っている人なら、簡単にマネできるので、当ブログのデザインが好きな方は参考にしてみてください。

それでは、さっそくご紹介していきます。

アフィンガーとはどんなテーマなのか?

アフィンガーとはどんなテーマなのか?
アフィンガーとはどんなテーマなのか?

最初に、簡単にアフィンガーについてご説明します。

アフィンガーの基本情報

  • 値段:14,800円(税込)
  • プラン:WING(AFFINGER5版)
  • 販売元:株式会社オンスピード
  • 複数サイト使用:個人ならOK

WordPressのテーマとしては、中間的な価格です。

ちなみに、僕はWING(AFFINGER5版)という一番シンプルなプランを購入して使っています。

続いて、アフィンガーの魅力を5つご紹介していきます。

ブログに役立つアフィンガーの魅力5つ

  • SEO内部対策
  • カスタマイズ性の高さ
  • 複数サイトでの使用OK
  • モバイル高速表示に対応している
  • 有名テーマなのでググった時の情報が豊富

こんな感じです。

元々は、アフィリエイターから人気の高いテーマであるため、CVRをあげる装飾が充実していたり、簡単に本格的なメディアデザインを作れるテンプレがあったりします。

実際に、アフィンガーを導入して使ってみたレビューについては、下記の記事にまとめていますので導入検討をしている方は、チェックしてみてください。

関連記事
AFFINGER5を実際に使ってみた感想レビュー【デメリットも公開】
AFFINGER5を実際に使ってみた感想レビュー【デメリットも公開】

次の章から、具体的なカスタマイズ方法をご紹介していきます。

カスタマイズ方法①:トップページ編

カスタマイズ方法①:トップページ編
カスタマイズ方法①:トップページ編

まずは、トップページのカスタマイズ方法について解説します。

その①:固定ページの編集

Tsuzuki Blog のトップページは、記事ページではなく固定ページにて作成しています。

固定ページにて作成
固定ページにて作成

管理画面から、上記のように固定ページへとアクセスしましょう。

全ての編集が終了したら、下記のように作成した固定ページを、ブログのトップページとして使用するように設定すれば、トップページが固定ページとなります。

カスタマイズ」→「ホームページ設定」→「ホームページ」にて設定可能です。

固定ページをホームページに設定する
固定ページをホームページに設定する

こんな感じで、「フロントページ」と表示されたら、TOPページに設定完了です。

TOPページへの設定完了
TOPページへの設定完了

それでは、具体的なTOPページ編集の方法をご案内します。

その②:カテゴリ一覧スライドショー(新着記事)

カテゴリ一覧スライドショー
カテゴリ一覧スライドショー

Tsuzuki Blog トップページの上部にある、スライドショーの作り方についてご紹介します。

まずは「新着記事」と「おすすめ記事」の見出しですが、こちらはどちらも共通して「見出し3」に設定しています。

「新着記事」と「おすすめ記事」を見出し3に設定
「新着記事」と「おすすめ記事」を見出し3に設定

では、これから新着記事の「カテゴリ一覧スライドショー」の作り方について、ご紹介していきます。

ワードプレスのエディターがGutenbergになっている場合、Classic Editorというプラグインを有効化しておきましょう。(固定ページの編集が終わったら、有効化を解除すればGutenbergに戻ります。)

Classic Editorを有効化
Classic Editorを有効化

ちなみに、「カテゴリー一覧スライドショー」の設定方法は、アフィンガー購入者ページ内のこちらの記事で紹介されています。

※「購入ユーザー専用ページ」へのログイン方法が分からない方は、手順③:AFFINGERの初期設定の下部をご覧ください。

固定ページを新規作成
固定ページを新規作成

それでは、固定ページを新規作成して、上記のような編集画面を表示してください。

カテゴリ一覧のスライドショーを作成するには、「タグ」→「記事一覧」→「カテゴリ一覧」という流れで、ショートコードを挿入します。

カテゴリ一覧のスライドショー
カテゴリ一覧のスライドショー

上記のような感じですね。

コードの説明は、下記となります。

※こちらは、画像のためコピペできません。「タグ」→「記事一覧」→「カテゴリ一覧」で作成してください。

  • st-catgroup cat="カテゴリID指定"
  • page="読み込み数"
  • orderby="id"
  • child="子カテゴリーの読み込み"
  • slide="スライドショーのオンオフ"
  • slides_to_show="列数の指定"
  • slide_more="続きを読む" 
  • slide_center="off"

1つ1つに意味があるので、どこを動かすと、どのように表示が変わるかはプレビューを見つつ、肌感をつかみましょう。(最初は大変ですが、慣れれば解決できます。)

注意点

カテゴリID
カテゴリID

カテゴリIDは、記事IDではありません。

表示したいカテゴリIDは、上記のように「投稿」→「カテゴリー」の一覧「ID」で確認できます。

Tsuzuki Blogでは、公開した最新記事を5本掲載したいので、下記のようなコードに設定しています。

※こちらは、画像のためコピペできません。

そうすると、下記のようなカテゴリ一覧が完成します。

2020/5/20

【事実】ブログで挫折する原因は「自分流」にある【対策方法あり】

悩んでいる人 ブログを始めて2ヶ月くらいなのですが、半分挫折してます。よく、最初の3ヶ月を乗り越えたらラクになるといいますが、すでにもうギブアップしそうです。どうやったら、ブログの挫折を解決できるんでしょうか? こんなお悩みを解消します。 本記事の内容 ・ブログで挫折する原因は「自分流」にある・ブログで挫折しないための3つの対策方法・ブログ3ヶ月目で挫折した時のリアルな体験談 本記事の信頼性 Tsuzuki(@1276tsuzuki) この記事を書いている僕は、現在ブログ歴1年3ヶ月ほど。副業で当ブログを ...

続きを読む

2020/5/19

【初心者】ブログをアクセスアップするたった1つの方法

悩んでいる人 ブログをアクセスアップする方法が知りたい!いくら記事を書いても、全然アクセスが増えなくて困っています。よく、良質な記事を書こうと言われるけど、本当にそれだけでいいの? こんなお悩みを解決します。 本記事の内容 ・ブログをアクセスアップする方法はSEOです・いくら記事を書いてもアクセスアップできない理由・ブログのアクセスアップのためにやるべきこと3つ・ブログのアクセスアップに役立ってくれる本・ツール 本記事の信頼性 Tsuzuki(@1276tsuzuki) この記事を書いている僕は、現在ブロ ...

続きを読む

2020/5/16

アフィリエイトの特別単価をもらう3つの方法を解説

悩んでいる人 アフィリエイトの特別単価を申請する方法について教えてほしい!最近、いい感じで成約が増えているから、そろそろ特別単価を獲得できるんじゃないかと思ってます。 こんな疑問を解消します。 本記事の内容 ・アフィリエイトの特別単価とは?・アフィリエイトの特別単価をもらう方法・アフィリエイトの特別単価を交渉するタイミング・アフィリエイトの特別単価を申請するときの注意点 本記事の信頼性 Tsuzuki(@1276tsuzuki) この記事を書いている僕は、現在ブログ歴1年3ヶ月ほど。副業で当ブログを運営し ...

続きを読む

2020/5/17

ブログの更新頻度は、SEOに直接的な影響はありません

悩んでいる人 ブログってどのくらいの頻度で更新するべきなの?更新頻度がどのくらいSEOに影響を与えるのかも知りたい! こんな疑問にお答えします。 本記事の内容 ・ブログの更新頻度は、SEOに直接的な影響はない・ブログの質を上げるには、量を積み上げるのが近道・更新頻度をキープして質の高い記事を書く手順 本記事の信頼性 Tsuzuki(@1276tsuzuki) この記事を書いている僕は、現在ブログ歴1年3ヶ月ほど。副業で当ブログを運営しており、ブログ収入で月300万円ほど稼いでいます。 今回は、ブログの更新 ...

続きを読む

2020/5/14

【必見】テレワークを快適にするおすすめガジェット&グッズ10選

悩んでいる人 仕事がテレワークになったけど、自宅の作業環境が全然整っていなくて、仕事が捗らない(´-ω-`)在宅ワークにおすすめのガジェットとか、グッズがあれば教えてほしい! こんなお悩みを解決します。 本記事の内容 ・在宅ワークにおすすめのガジェット&グッズ10選 この記事を書いている僕は、テレワーク歴1年のブロガーです。 新卒で入った会社がフルリモートだったので、ずっと家で働いており、ブログで月100万円以上を稼ぎながら暮らしています。 基本的に、テレワークではPCとインターネットがあれば問題なく仕事 ...

続きを読む

その③:列レイアウト+カテゴリ設定(おすすめ記事)

続いては、カテゴリ一覧の下の「おすすめ記事」の部分の作り方について解説します。

Tsuzuki Blogでは、下記のような部分です。

おすすめ記事
おすすめ記事

アフィンガー上では、「レイアウト」というタグを変更することで、2列の記事表示ができるようになります。

「タグ」→「レイアウト」→「PCとTab左右50%」
「タグ」→「レイアウト」→「PCとTab左右50%」
「タグ」→「レイアウト」→「PCとTab左右50%」
「タグ」→「レイアウト」→「PCとTab左右50%」

上記のように、「タグ」→「レイアウト」→「PCとTab左右50%」をクリックして、2つの列を作成しましょう。

左側の黄色いところが、左側に表示される列で、右側の青色のところが、右側に表示される列になっています。

※スマホ版では1列で表示されます。

続いて、カテゴリーの名前とリンクのバナー風ボックスを作成しましょう。

バナー風ボックス
バナー風ボックス

下記のように「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順番で、バナー風ボックスのコードを挿入します。

「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」

ちなみに、Tsuzuki Blogでは下記のようなコードになっています。

  • st-flexbox url=”リンク先URL”
  • title=”カテゴリーのタイトル”
  • backgroud_image=”タイトルの背景画像”

ポイントとしては、上記のような感じですね。

続いて、ブログカードを作成していきましょう。ブログカードとは、下記のような部分です。

ブログカード
ブログカード

ブログカードは、下記のようなコードで作成できます。

  • st-card id=記事のID

気にすべきポイントは、上記ですね。

記事のIDについては、投稿の記事一覧にて確認できます。アフィンガー公式HPでは記事IDの確認方法にて紹介されています。

Tsuzuki Blogの場合は、ブログカードを4つずつ配置しています。

最後に、「管理画面」→「AFFINGER5 管理」→「デザイン」→「抜粋設定」で、「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れると、ブログカードがタイトルだけの表示になります。

「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れる
「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れる

これで、列レイアウト+カテゴリ設定が完成です。

カスタマイズ方法②:フォント編

カスタマイズ方法②:フォント編
カスタマイズ方法②:フォント編

2つ目のカスタマイズは、フォント編となります。

フォントはブログ記事の「なんとなくいい感」を司る、超重要なファクターですのでこだわっていきましょう。

その①:フォントの種類

Tsuzuki Blog のフォント種類は、下記のように設定しています。

font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

上記の設定は、管理画面から設定可能です。

「AFFINGER5管理」→「デザイン」→「フォントの種類」にいき、「その他(優先)」に上記のフォントを書き込めば設定できます。

「AFFINGER5管理」→「デザイン」→「フォントの種類」
「AFFINGER5管理」→「デザイン」→「フォントの種類」

上記のような感じですね。

「全体」と「記事タイトル・見出し(h2~3)・ウィジェットボタンなど」に書き込めば、完了です。

その②:フォントサイズ

続いては、フォントサイズについてです。

Tsuzuki Blogで、フォントサイズを指定しているのは下記の項目になります。

  • タイトル
  • H2タグ
  • H3タグ
  • 基本(Pタグ)

上記に関して、PC版とスマホ版の両方を設定しています。

フォントサイズを指定
フォントサイズを指定

上の画像のように設定すれば、反映されます。

フォントの種類をいくつも設定しておく理由としては、ブラウザによって表示できないフォントなどがあるためです。

そのため、必ずしも設定したフォントが反映されるというわけではないので、ご注意ください。

その③:文章の行間

最後に、行間についてご紹介します。

フォントサイズを設定した画面で、設定をすることができます。

フォントサイズと同様に、下記の項目を設定していきましょう。

  • タイトル
  • H2タグ
  • H3タグ
  • 基本(Pタグ)
行間の指定
行間の指定

上記のように設定できれば、反映されます。

ちなみに、記事内で行間を空けるにはGutenbergだとスペーサーで、設定しましょう。

スペーサーを入れると、行間を調整できます。スペーサーを入れない場合、行間は「AFFINGER5管理」で設定した行間になります。

Classic Editorを使っている方は、WordPressで記事作成時に改行する方法【初心者向け】にて行間を設定できます。

その④:見出し(H2, H3)について

見出しの設定は、「管理画面」→「外観」→「カスタマイズ」にて行います。

H2のタグ設定は、「各テキストとhタグ(見出し)」→「H2タグ」を選択して、下記のように設定していきます。(H3も同様のやり方)

H2の設定
H2の設定
  • 文字色:#333333
  • 背景色:#f7f7f7
  • 背景色(グラデーション上部):#f7f7f7
  • ボーダー色:#4865b2

フォントカラーや背景は、上記のように設定します。

見出しのデザインについては、下記の画像のように設定しましょう。

H2のデザイン設定
H2のデザイン設定

H3のデザイン設定は下記です。違いとしては、左の余白が異なります。

H3のデザイン設定
H3のデザイン設定

このような感じですね。色や、余白などはご自身でいいなと感じるように調節してみてください。

カスタマイズ方法③:サイドバー編

カスタマイズ方法③:サイドバー編
カスタマイズ方法③:サイドバー編

最後は、サイドバーの設定をご紹介します。

サイドバーの設定は、管理画面のウィジェットにて操作するので、「外観」→「ウィジェット」を開いてからご覧ください。

その①:検索窓

右側にある「サイドバーウィジェット」というところに、左側の「検索:Search」をドラッグ&ドロップしましょう。

「検索:Search」をドラッグ&ドロップ
「検索:Search」をドラッグ&ドロップ

上記のようになれば、OKです。

その②:著者プロフィール

続いて、著者のプロフィールですが、右側にある「サイドバーウィジェット」に、左側の「11_STINGERサイト管理者紹介」をドラッグ&ドロップしましょう。

「11_STINGERサイト管理者紹介」をドラッグ&ドロップ
「11_STINGERサイト管理者紹介」をドラッグ&ドロップ

上記のようになれば、OKです。

ちなみに、管理者カードの設定方法については、プロフィールカード(サイト管理者紹介)をご覧ください。

その③:おすすめ記事

Tsuzuki Blog で「よく読まれている記事」と表示されているのは、アフィンガーの「おすすめ記事」として設定可能です。

「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめ記事一覧の作成」
「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめ記事一覧の作成」

上記のように、管理画面から「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめ記事一覧の作成」を選択します。

「おすすめ記事一覧に表示する文字:」を入力して、おすすめ記事に掲載したい記事IDを指定しましょう。

その後、「サイドのスクロールに表示にする」にチェックマークを入れて完成です。

まとめ:なんとなくいいを実現するには細部にこだわるべし

まとめ:なんとなくいいを実現するには細部にこだわるべし
まとめ:なんとなくいいを実現するには細部にこだわるべし

今回は、アフィンガーをTsuzuki Blog風にカスタマイズする方法について、ご紹介してきました。

TOPページ、フォント、サイドバー に分けて話してきましたが、細部にこだわることで「なんとなくいい」を表現することが個人的には重要だと思っています。

もし、本記事を読んでアフィンガーを導入してみたいと思った方は、下記の記事をご覧ください。

関連記事
AFFINGER5を実際に使ってみた感想レビュー【デメリットも公開】
AFFINGER5を実際に使ってみた感想レビュー【デメリットも公開】

今回は以上です。

-BLOG

Copyright© Tsuzuki Blog , 2020 All Rights Reserved.