BLOG

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

2020年2月11日

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

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

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

本記事の内容

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

本記事の信頼性

Tsuzuki
Tsuzuki

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

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

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

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

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

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

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

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

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

アフィンガーの基本情報

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

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

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

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

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

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

こんな感じです。

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

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

関連記事
WordPressテーマのAFFINGER5をレビューする【デメリットあり】
WordPressテーマの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つに意味があるので、どこを動かすと、どのように表示が変わるかはプレビューを見つつ、肌感をつかみましょう。(最初は大変ですが、慣れれば解決できます。)

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

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

Webマーケターのキャリアパスを解説【年収UPする方法】

2020/2/17

Webマーケターのキャリアパスを解説【年収UPする方法】

悩んでいる人 Webマーケティング業界に飛び込んでみたいと思っているのですが、キャリアパスとかってどんな感じなんですか?キャリア面で将来性があるかどうか、知っておきたいです。 こんな疑問を解決します。 本記事の内容 ・Webマーケターのキャリアパスとは?・Webマーケターとして年収UPする方法【キャリアもUP】・Webマーケターとしてキャリアをスタートするために 本記事の信頼性 Tsuzuki この記事を書いている僕は、現在Webマーケター歴1年です。副業で当ブログを運営しており、副業ブログの収入は月15 ...

続きを読む

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

2020/2/23

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

悩んでいる人 先日、アフィンガーを購入して、いまデザインカスタマイズに取り組んでいます。かっこいいサイトデザインを実現したいのですが、Tsuzuki Blog風のカスタマイズ方法を教えてほしい! こんな疑問にお答えします。 本記事の内容 ・アフィンガーとはどんなテーマなのか?・カスタマイズ方法①:トップページ編・カスタマイズ方法②:フォント編・カスタマイズ方法③:サイドバー編・カスタマイズ方法④:おすすめ記事編 本記事の信頼性 Tsuzuki この記事を書いている僕は、ブログ歴1年です。副業で当ブログを運 ...

続きを読む

初心者でも失敗しないブログの始め方をわかりやすく徹底解説

2020/2/7

初心者でも失敗しないブログの始め方をわかりやすく解説

悩んでいる人 全くの初心者なのですが、これからブログを始めてみたいと思っています!ブログで自分の考え方を整理したり、副収入を得て生活を豊かにしたいのですが、どのブログを始めたらいいですか?初心者の僕でも、稼げるブログの作り方について教えてほしいです。 こんな疑問にお答えします。 本記事の内容 ・そもそもブログって何なの?稼げるの?・ブログのメリットとデメリットって何?・おすすめのブログサービスの選び方・初心者でも失敗しない稼げるブログの始め方・ブログを始めた後にやるべきこと5つ・初心者でも収益化できるブロ ...

続きを読む

ブログ集客を成功させる6つのコツを解説【おすすめ本・ツールも紹介する】

2020/2/3

ブログ集客を成功させる6つのコツを解説【おすすめ本・ツールも紹介する】

悩んでいる人 いい記事を書いているはずなのに、全然ブログが読まれない。。。こんな僕でも、ブログ集客を成功させるするコツを教えてほしい!そもそも、どんな集客方法があるのかも知りたい。おすすめのツールや本があれば、ぜひ教えてほしい! こんなお悩みを解決します。 本記事の内容 ・ブログ集客の前にやっておくこと3つ・ブログ集客を成功させるためのコツ6つ・ブログ集客の方法3つ【その他の手法も解説】・ブログ集客に役立つおすすめ本・ブログ集客に役立つおすすめツール 本記事の信頼性 Tsuzuki この記事を書いている僕 ...

続きを読む

ドメイン取得でおすすめのサービス3つ【ブログ初心者向け】

2020/1/29

ドメイン取得でおすすめのサービス3つ【ブログ初心者向け】

悩んでいる人 ブログを始めたいのですが、おすすめのドメインを教えてほしい。初心者なので安心安全なドメインだと嬉しいです!あとは、サーバーについてもおすすめがあれば知りたい。 こんなお悩みを解決します。 本記事の内容 ・ドメイン取得でおすすめのサービス3つ【比較】・ブログ用ドメインの選び方のコツ【初心者向け】・ブログのサーバーなら「エックスサーバー」がおすすめ 本記事の信頼性 この記事を書いている僕は、ブログ歴1年です。副業で当ブログを運営しており、ブログで月100万円ほど稼いでいます。 個人でブログやサイ ...

続きを読む

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

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

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

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

関連記事
WordPressテーマのAFFINGER5をレビューする【デメリットあり】
WordPressテーマのAFFINGER5をレビューする【デメリットあり】

今回は以上です。

-BLOG

Copyright© Tsuzuki Blog , 2020 All Rights Reserved.