>

Blog

AFFINGER6【ブログ型トップページ作成】固定ページでカスタマイズ方法を完全解説します!

りゅうせい
WordPressでブログを作りましたが、AFFINGER6でカスタマイズする方法を知りたい。

AFFINGER6でかっこいいブログの作り方が知りたい。

こんな悩みを解決します!

AFFINGER6とは?

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

アフィンガーの基本情報

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

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

ちなみに、僕はACTION(AFFINGER6EX版)というアップグレードしたプランを購入して使っています。

こんな方におすすめ

アフィリエイトで稼ぐためのサイト、ブログを作りたい
効果のあるお店や会社のホームページが作りたい
ターゲットに刺さる尖ったカスタマイズできるサイトが作りたい
複数のタイプの異なるサイトを効率的に作成したい

圧倒的カスタマイズ性能

AFFINGERでは、サイト作成中に生まれる「アレをしたい」「こんな機能があればいいのに」を豊富に詰め込んでおり、通常はサイト毎にカスタマイズしなければならない収益化UPに役立つ機能を管理画面だけで設定が可能です。

サイト毎に異なるテンプレートを用意する必要はなく、タイプの異なる複数のサイトもこれ1つで作れるのでカスタマイズに余計な時間を奪われることが激減し、使いこなすことで今までの何倍もの効率でサイト作成を可能にする機能が備わっています。

これだけ豊富なデザインのサイトをAFFINGERテーマたった1つで作ることが出来ます!

AFFINGER6(WordPressテーマ)の購入はこちら

さらに、これからAFFINGER6のブログデザインのカスタマイズ方法について解説していきます!

先に、断っておきますが、Tsuzaki Blogさんのカスタマイズを参考に自分風にアレンジしているので、こちらに載せておきます!

→ Tsuzaki Blogさんのアフィンガーのおすすめカスタマイズ法を解説【Tsuzuki Blog風デザイン】はこちら

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

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

カスタマイズには「Classic Editor」というプラグインが必要です。まだインストールしていない人は、インストールして、有効化しておいてくださいね!

STEP1. トップページ用の固定ページを作成する

今回紹介するカスタマイズは、トップページはを固定ページで作成する方法です!

まずは、WordPress管理画面」→「固定ページ」→「新規追加をクリックしましょう。

STEP2. おすすめ記事の作成

トップページのおすすめ記事部分の作り方について解説します。

赤枠の部分の作成方法です!

「STEP1. トップページ用の固定ページを作成する」で固定ページを新規作成したので、「トップページ」など自分で分かりやすいタイトルを付けておきましょう!

最初に見出しを追加して、おすすめ記事と打つとタイトル表示が出来ます!

mediproblogでは、「カスタマイズ」→「見出しタグ」→「記事タイトル」で、

背景色:#f3f3f3
ボーダー色:#d6d6d6

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

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

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

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

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

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

[st-flexbox url="" rel="nofollow" target="" webicon="" title="ブログ初心者向け" width="" height="" color="#fff" fontsize="150" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="https://mediproblog.com/wp-content/uploads/2022/01/computer-2982270_1920.jpg" blur="on" left="" margin_bottom="0" myclass=""]

[/st-flexbox]

ポイント

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

続いて、ブログカードを作成していきましょう。ブログカードとは、バナー風ボックスの下の方の記事のカードになります!

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

[st-card id=2909 label="" name="" bgcolor="" color="" fontawsome="" readmore="off"]

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

好きな数配置したい数だけ設定するようにしてくださいね!

投稿ページからidは調べられるので、確認してみてくださいね!

記事のIDについては、アフィンガー公式HPの記事IDの確認方法からも調べられます。

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

以上で、完成です。

STEP3. ヘッダー下のおすすめ記事

続いて、ヘッダー下のおすすめ記事の作り方をご紹介します。

上図の赤枠で囲まれた部分になります!

WordPress管理画面」→「AFFINGER管理」→「ヘッダー下 / おすすめをクリックしましょう。

そうすると、下図のような画面になるので画像URL」「テキスト」「リンク先URLの3つを設定していきます。

テキストが2つあるのは当ブログがAFFINGER EX版を利用しているためです。通常盤ですと、一行のみ表示されます。

EX版の方がよりかっこよくデザインできるので、おすすめです!

お金に余裕のある人は購入してみるといいかと思います!

画像URLは、WordPress管理画面」→「メディア」→「ライブラリをクリックして、添付したい画像をクリックするとURLをコピーできます!

STEP4. 固定ページをトップページに配置する

下記のように、作成した固定ページをトップページとして使用するように設定すれば、トップページを固定ページに設定できます!

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

以上がトップページのカスタマイズ方法です。

かっこよく出来ましたか?お疲れ様でした!

STEP5. おまけ(新着記事と新着記事一覧ページボタン)

新着記事と新着記事一覧のボタンの表示は上図のような感じです。

これからカスタマイズ方法を解説します!

最初に見出しを追加して、新着記事と打つとタイトル表示が出来ます!

続いて、新着記事一覧の表示の仕方について説明していきます!

下記のようにタグ」→「記事一覧/カード」→「カテゴリ一覧の順番で、新着記事一覧のコードを挿入します。

[st-catgroup cat="0" page="3" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off" type=""]

mediproblogでは、上記コードのように設定しています!

ポイント

①page=”新着記事一覧に表示する記事の数”
②slide=”スライドショーのon,off”

続いて、新着記事一覧のページに誘導するボタンの設定を説明していきます!

下記のようにタグ」→「カスタムボタン」→「ノーマル」→「基本」の順番で、新着記事一覧のボタンのコードを挿入します。

[st-mybutton class="" url="https://mediproblog.com/postall/" title="新着記事一覧ページ" rel="" webicon="" target="" color="#2C2C2C" bgcolor="" bgcolor_top="" bordercolor="#2C2C2C" borderwidth="2" borderradius="10" fontsize="" fontweight="bold" width="100" webicon_after="st-svg-chevron-right" shadow="" ref="" beacon=""]

mediproblogでは、上記コードのように設定しています!

ポイント

①url=”ボタンを押して飛ばしたいリンク”
②title=”ボタンに表示する文字”
③color="文字の色"
④bordercolor="ボーダーの色"
⑤borderradius="ボタンの丸み"

自分の好みに合わせて、色を変えて見たりしてカスタマイズに挑戦してみてくださいね!

ちなみに、これまでの記事一覧ページを作成する方法は、

固定ページで「新着記事一覧」などのページを作る。

カスタマイズ」→「ホームページ設定」→「投稿ページの順で設定可能です。

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

カスタマイズ方法②は、フォント編となります。

フォントは少しこだわると読者にとって読みやすいサイトになり、サイト全体の質を上げることが出来るのでぜひやっておく事をおすすめします。

①フォントの種類

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

実際に、見やすいブロガーさんや有名ブロガーさんのサイト設計を真似ることは自分のサイトの質を上げることになるので、やってみてくださいね!

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

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

「AFFINGER6管理」→「全体設定」→「フォントの種類」にいき、「その他(優先)」に上記のフォントを書き込むことで、フォントの設定をすることが出来ます。

上図と同じような感じで設定すれば、問題ないのでやってみてくださいね!

フォントサイズ

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

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

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

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

ただし、ブラウザによって表示できないフォントなどがあるので必ずしも設定したフォントが反映されるというわけではないようなのでご注意ください。

③文章の行間

最後に、行間についてです。

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

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

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


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

ちなみに、記事内で行間をもっと空けたい場合にはスペーサーを使うと行間を空けることが出来ます!

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

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

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

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

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

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

h2の設定↓

h2の設定

h3の設定

h3の設定

色や、余白などはカスタムしながら自分でしっくりくるのもにしてみてくださいね!

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

カスタマイズ方法③は、サイドバー編となります。

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

①検索窓

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

上図を参考に同じようになれば、OKです。

著者プロフィール

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

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

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

→ プロフィールカード(サイト管理者紹介)

カスタマイズ方法④:おすすめ記事編

カスタマイズ方法④は、おすすめ記事編となります。

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

管理画面から「AFFINGER6管理」→「ヘッダー下 / おすすめ」→「おすすめ記事一覧」を選択します。

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

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

ちなみにおすすめ記事のデザインは、「カスタマイズ」「オプション(その他)」→「おすすめ記事」を選択します。

・文字色:#000000
・見出し文字色:#000000
・見出し背景色:#ffffff
・コンテンツ背景色:#ffffff

mediproblogでは、上記のように設定しています。

ここもお好みで好きなデザインに色などを設定してみてくださいね!

カスタマイズ方法⑤:フッター編

カスタマイズ方法⑤は、フッター編となります。

こんな感じのフッターになります。

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

主に、上図のようなフッターのウィジェットで設定していきます!

中身はこんな感じで設定しています。

それぞれリンクは、自分が設定しているページのリンク設定してください!

お問い合わせやブログのサイトマップ、プライバシーポリシーなど固定ページなどで作成し、リンクを貼るという感じの流れです。

カテゴリーとアーカイブに関しては、このように設定する事で、普段は隠されており、押すと表示されるようになります。

まとめ

1 AFFINGER6とは?
  1.1 こんな方におすすめ
  1.2 圧倒的カスタマイズ性能
2 カスタマイズ方法①:トップページ編
  2.1 STEP1. トップページ用の固定ページを作成する
  2.2 STEP2. おすすめ記事の作成
  2.3 STEP3. ヘッダー下のおすすめ記事
  2.4 STEP4. 固定ページをトップページに配置する
  2.5 STEP5. おまけ(新着記事と新着記事一覧ページボタン)
3 カスタマイズ方法②:フォント編
  3.1 ①フォントの種類
  3.2 ②フォントサイズ
  3.3 ③文章の行間
  3.4 ④見出し(H2, H3)について
4 カスタマイズ方法③:サイドバー編
  4.1 ①検索窓
  4.2 ②著者プロフィール
5 カスタマイズ方法④:おすすめ記事編
6 カスタマイズ方法⑤:フッター編

今回の記事では、AFFINGER6【ブログ型トップページ作成】固定ページでカスタマイズ方法を完全解説しました!

少しでも参考になれば嬉しいです!

関連コンテンツ

-Blog
-