【保存版】ズボラAFFINGER6使いのデザインやカスタマイズをすべて公開

 

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

 

記事の内容

 

プロフィール

よっしー（@yosshiblog）

 

アフィンガーは機能がとても多いので、最初は人のデザインとカスタマイズを真似をした方がいいです。

というのも、機能が多すぎてカスタマイズやデザインを決めるのに１，２日くらいかかってしまうからです。

 

当サイトのデザインやカスタマイズは以下のようになります。

 

 

読者に読まれるブログとは、きれいにまとめられているブログなので統一したデザインやカスタマイズが必要になります。

今回は、記事の前半でAFFINGERのカスタマイズについて、記事の後半でAFFINGERのデザインテンプレートについて解説します。

 

記事の最後の方には、AFFINGERを使用する上での注意点なども開設するのでぜひ最後までご覧ください。

 

AFFINEGR6について：最強テーマ

AFFINGER6は有料サイトの中でも特に優秀なテーマで、筆者も１つ目のブログでAFFINGER6を採用したら検索１位の記事を量産しました。

 

AFFINGER6を採用したタイミングで記事が評価され始めた可能性もありますが、正直AFFINGER6を使っていなかったらここまで上位表示記事を量産することはできなかったでしょう。

 

AFFINGER6のメリットは、以下の通り。

他にも様々なメリットがあり、とても優秀なテーマですね。

 

また個人で稼いでいる有名ブロガーは、アフィンガーを使っていることが多いです。

• マナブさん
• tsuzukiさん
• トーマスガジェマガさん

どの方も有名なブロガーさんで、特に「マナブさん」と「トーマスガジェマガさん」はYouTubeでもよく見かける有名な方ですね。

カスタマイズ前に、まだAFFINGER6を導入していない方は以下のように導入をしてください。

 

アフィンガーは、導入から初期設定まで１時間かからないくらいで完了するので、有料テーマ導入を考えている人は一度AFFINGER6を検討してみてください。

 

AFFINGER設定

アフィンガー設定は、以下の通り。

順に解説をします。

AFFINGER設定①：見出し

 

上画像のように、見出しのデザインを設定していきます。

「外観」→「カスタマイズ」→「見出しタグ（hx）/テキスト」を選択して、まずは「H2タグ」を設定していきます。

上記のように設定をしていってください。

 

この後に同じように「H3タグ」を設定していきますが、念のために上の方にある「公開」をクリックして保存をしておきましょう。

また、①と②の色についてはカラーコードと呼ばれており、「#〇〇〇〇〇〇」という英数字の列を入力することで、お好きなカラーをデザインすることが出来ます。

 

このカスタマイズ画面で設定が可能ですが、カラーコード一覧表を参考にした方が好みの色を選びやすいので、自分で探してみてください。

 

 

「H2タグ」の設定が終わったら、「H3タグ」の設定をしていきます。

※当サイトでは見出し４以上のタグを使っていないので、見出し３までの設定をします。

 

AFFINGER設定②：フォントの種類

 

フォントの種類はも好みの物に設定することが出来ますが、当サイトはそこまで変更しておりません。

「AFFINGER管理」→「全体設定」→「フォントの種類」を選択して、以下に設定をしてください。

 

こちらも、文字の形が変わったり細字になったりするので、空いた時間なのでいろいろな文字を試してみてください。

 

AFFINGER設定③：フォントのサイズと文字の行間

 

フォントのサイズと文字の行間は、スマホとPCの２つを設定していきます。

「AFFINGER管理」→「全体設定」→「フォントのサイズ」を探して、設定していきます。

 

スマホの場合

基本（Pタグ他）	16	px/行間	30
記事タイトル	18	px/行間	36
H2タグ	18	px/行間	30
H3タグ	18	px/行間	36

 

PCの場合

基本（Pタグ他）	17	px/行間	35
記事タイトル	25	px/行間	48
H2タグ	23	px/行間	38
H3タグ	20	px/行間	38

 

設定が完了したら、「save」のクリックを忘れずに。

反映確認をして、設定どおりのフォントサイズや行間になっていることを確認したら完了です。

 

AFFINGER設定④：アイキャッチ画像

 

アイキャッチは通常タイトルの下に設定されます。

ただ、AFFINGERはデフォルトの状態だとタイトルの上にアイキャッチが設置されてしまうので、AFFINGER設定で設置を変えていきます。

 

「AFFINGER管理」→「投稿・固定記事」→「アイキャッチ設定」を探して、以下のように設定をしてください。

 

３番目の「何もしない」「ワイド化する」「ポロライド風にする」の中から好きなデザインを選択することが出来ますが、基本的には何もしないで大丈夫です。

 

AFFINGER設定⑤：SNS設定

 

最後にSNSの設定をしていきます。

とはいっても、当サイトは記事の本文にSNSの表示をしていないため、非表示設定だけを行えば十分です。

 

「AFFINGER管理」→「SNS/OPG」の順に選択をして、以下のように設定を行ってください。

 

 

すべてのSNSやボタンを非表示にしています。

 

当サイトでは、サイドバーに設置してあるプロフィールカード内のSNSだけを表示させています。

投稿記事や固定記事の下にSNSの表示をさせたい方は、チェックを外しておきましょう。

 

AFFINGER6のカスタマイズ

アフィンガーのカスタマイズは、以下の通り。

順に解説をします。

カスタマイズ①：トップページ

当サイトのトップページは、以下のようになっております。

AFFINGER6ではこのようなトップページ設定簡単にすることが出来ますし、またCSSコードでこだわれば凝ったデザインにすることが出来ます。

このデザインは、tsuzukiさんのデザインを参考にしています。

 

トップページを整えることによって、読者の回遊率に繋がるので必ずやっておいた方がいいですね。

AFFINGER6の公式ホームページには、様々なブログのサイトが掲載されているのでぜひ参考にしてください。

 

また、AFFINGER6を使ったトップページ作成については、こちらの【WordPress】AFFINGER6のトップページのカスタマイズ方法３ステップで詳しく解説をしているのでぜひご覧ください。

カスタマイズ②：ヘッダー

 

ヘッダーをカスタマイズしていきます。

当サイトは、AFFINGER設定で「カラーパターン」と「デザインパターン」を以下のように設定しています。

 

試しに、デザインパターンをピンクに設定してみると、以下のようになります。

 

 

このようにAFFINGERでは、簡単に好みの色を設定することが出来ます。

※本記事では、カラーパターンを「グレー」で設定して解説していきます。

 

step
1外観設定

先ほどのカラーパターンを設定することで、その色がデフォルトとして表示されるはずです。

「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」の順に選択をして、設定画面を表示させてください。

※headerエリアではなく「ヘッダーエリア」という日本語表記の方を選択してください。

 

設定画面を表示させてたら、以下のように設定をしていきます。

 

上記のカラーコードをコピペしていきましょう。

入力が完了したら「公開」をクリック。

 

step
2サイトタイトル

サイトタイトルは、タイトルとキャッチフレーズを設定することが出来ます。

AFFINGERのデフォルトではタイトルが真ん中に入力されないので、まずはAFFINGER設定でタイトルをセンタリングしていきます。

 

「AFFINGER設定」→「ヘッダー」を選択して、以下の欄にチェックを入れてください。

 

チェックをしたら、「save」をクリック。

次にサイト基本情報を入力していきます。

 

「外観」→「カスタマイズ」→「サイト基本情報」の順に選択をすると、設定画面が出てきます。

サイトタイトルだけでもいいですし、キャッチフレーズもあれば入力をしていきましょう。

 

上記のように入力が完了したら、「公開」をクリック。

 

こちらのサイトタイトルとキャッチフレーズは、AFFINGER設定で入れ替えることが出来ます。

「AFFINGER設定」→「ヘッダー」の順に選択をして、「 サイト名とキャッチフレーズを上下反対にする」にチェックを入れてください。

 

 

チェックを入れたら、「save」をクリック。

反映されているか確認をしていきましょう。

 

 

しっかりと反映されていますね。

サイトタイトルとキャッチフレーズを入れ替えてみて、戻したいときは先ほどのチェックを外しておきましょう。

※当サイトでは、ロゴ画像を挿入するのでキャッチフレーズは入力せずサイトタイトルだけ入力しています。

step
3ロゴ画像

 

ロゴ画像を設置する利点は、以下の通り。

通常のタイトルとキャッチフレーズでも問題ありませんが、ロゴ画像を設置することで読者の印象に残すことが出来るので、時間に余裕があれば設置しておきたいです。

 

ロゴ画像は以下の方法で準備することが出来ます。

当サイトのロゴ画像は、「Canva Pro」で作成しております。

 

無料でも十分使えるのですが、これからブログ運営をしていくのならproに入ったほうがメリットは大きいです。

「自分でロゴ画像を作ってみたいよ」と言う方は、Canvaをおすすめします。

>>Canva Pro

※当サイトのロゴ画像は「1000px × 200px」で作成しています。

 

ロゴ画像の準備が出来たら、自分のサイトに挿入していきます。

「外観」→「カスタマイズ」→「ロゴ画像/サイトタイトル」の順に選択をして、設定画面を表示させてください。

「ロゴ画像」と「スマホロゴ画像」に用意した画像を挿入していきましょう。

PCサイトのロゴ画像は大きく表示されてしまうので、「ロゴの最大の高さ（px）」の欄に100と入力します。

入力が完了したら、「公開」をクリック。

 

下の方にある「アイコンロゴ画像」は、ヘッダーとフッター両方に挿入されますが、当サイトのフッターにはロゴ画像を設定しないので使いません。

これでロゴ画像挿入作業を完了です。

 

カスタマイズ③：フッター

 

まずは、外観カスタマイズでフッターの色を設定してきましょう。

「外観」→「カスタマイズ」→「基本エリア設定」→「フッターエリア」の順に選択をして、以下のように設定してください。

 

上記のように入力が完了したら、「公開」をクリック。

 

フッターのデザインは大きく分けると、２種類あります。

当サイトでは、後者の３列表示を採用しています。

 

今回は、２つの表示方法を解説していきます。

通常のフッターメニュー

 

上画像のようなフッターメニューを作成していきます。

「外観」→「メニュー」を選択して、新しいメニューを作成していきます。

 

上記の設定が完了したら、「メニューを作成」をクリック。

メニューが作成されたら、追加した固定ページにチェックを入れて「メニューを追加」をクリック。

 

当サイトでは上記の固定ページを追加していますが、自分の好みで色々なページを追加してください。

固定ページが追加されたら、「メニューを保存」をクリック。

 

実際に反映されているか、確認をしていきましょう。

 

しっかりと表示されていますね。

通常のフッターメニュの設定は、これで完了です。

 

３列のフッターメニュー

当サイトも採用している３列のフッターメニューですが、上図のように設置をすることでデザイン性が向上するだけではなく、読者の回遊率も上がるのでお勧めのカスタマイズとなっています。

CSSコードを使用するので、「難しいことはしたくない」と言う方は、先ほどの通常フッターメニューでも大丈夫です。

※先ほどの通常フッターメニューを追加した方は、「フッターメニュー」を削除しておいてください。

 

先ほども解説しましたが、フッターの色を統一させてください。

step
1フッター右用ウィジェット（2列目）

「外観」→「ウィジェット」をクリックして、ウィジェット設定画面を開いてください。

開いたら、「固定ページ」→「フッター右用ウィジェット（2列目）」を選択して、「ウィジェットを追加」をクリック。

 

 

固定ページが追加されたら、タイトルの欄に自サイトについての名前を入力して、「完了」をクリック。

 

 

一度反映されているかを確認していきましょう。

タイトルが白色で固定ページのリンクが暗くなっていますが、後程追加CSSコードでリンクの色を変えます。

 

 

しっかりと反映されていますね。

同じように３列目も設定をしていきましょう。

 

step
2フッター右用ウィジェット（3列目）

３列目は、以下のウィジェットを追加していきます。

「外観」→「ウィジェット」をクリックして、ウィジェット設定画面を開いてください。

開いたら、「検索」→「フッター右用ウィジェット（3列目）」を選択して、「ウィジェットを追加」をクリック。

 

 

追加されたら、お好みのタイトルを入力してください。

当サイトの場合は、英語表記で統一しているので以下のように入力をしています。

 

 

後は、「16_STINGERカテゴリー」と「テキスト」を同じように追加していきます。

 

16_STINGERカテゴリーの設定は以下の通り。

 

「ドロップダウンで表示」、「投稿数を表示」、「階層を表示」の３つにチェックを入れて「保存」をクリック。

テキストの設定は、以下の通り。

 

上記のように入力が完了したら、「保存」をクリック。

実際に反映されているかを確認しましょう。

 

 

※文字が暗くて分かりにくいですが、しっかりと反映されています。

step
3追加CSSコード

CSSコードとは、ウェブページのスタイルを設定するコードのことを言い、AFFINGER６の機能やカスタマイズの多さとコードを使うことで色々なデザインを作成することが出来ます。

追加CSSコードで固定ページのリンクの色や、当サイトのリンクについての本文を白色に表示させていきます。

 

「外観」→「カスタマイズ」→「追加CSS」の順に選択をして、追加CSSコード入力画面を表示させてください。

表示させたら、以下のようなコードを入力していきます。

 

 

上記の数字を変えることで文字の大きさだったり、行間を変えたり出来るのでお好みのカスタマイズが可能です。

入力が完了したら、「公開」をクリック。

 

しっかりと反映されているかを確認しましょう。

 

しっかりと反映されていますね。

これで追加CSSコードの入力を完了です。

 

追加CSSが上手く反映されない時の対処法

 

CSSコードが反映されない場合は、上記のようなチェックすべきポイントがあります。

当サイトでも、コードを入力して反映されない原因が２つありました。

 

１つ目は、他サイトで紹介されているCSSコードが使えないということです。

赤色で表記されている「/*箇条書きの色*/」は後々どんな色に設定したかをメモする箇所なのですが、このコードが邪魔で反映がされませんでした。

もう一つの原因として、前述してあるコードが消えていたというわけです。

 

この括弧が消えてしまうことで、範囲が設定できなくなっていたんですね。

このCSSコードが赤色になると反映されないので、赤色になっていたらどこかがおかしいということになります。

 

カスタマイズ④：サイドバー

当サイトでは、上記のように設置をしています。

 

ブログのサイドバーとは、サイトの右の方にあるブログの案内板みたいなもので、プロフィールやおすすめ記事などを設置することが多いです。

サイドバーは、ただ設置をするだけではなく直帰率や回遊率を良くするための役割もあるのです。

 

サイドバーについては、こちらの【AFFINGER6】サイドバーの設定方法とオシャレなデザイン【１０分で完了】で詳しく解説をしているのでぜひご覧ください。

AFFINGER6のデザインテンプレート

 

アフィンガーには、無料のデザインテンプレートが配布されています。

このように沢山のデザインが配布されているので、「カスタマイズとかはやらずに簡単に始めたい」と言う方にはとてもお勧めします。

デザインを導入する手順としては、以下の通り。

１０分程度で好みをデザインを導入することが出来ます。

 

「デザインが気になる～」と言う方は、こちらの「AFFINGER６公式ホームページ」で詳しく載っているので参考にしてください。

 

また、デザインテンプレートの設置方法については、今後記事を執筆するのでお待ちください。

カスターマイザーのリセット

アフィンガー設定がごちゃごちゃになってしまったり、デザインテンプレートが上手く反映されなかったときは、カスタマイズのリセットでデフォルト状態にすることが出来ます。

「外観」→「カスタマイズ」→「全体カラー設定」の順に選択をすると、一番下に「カスターマイザーのリセット」があります。

 

 

AFFINGER管理設定だけをデフォルト状態にすることは出来ず、すべてをリセットしてしまうのでご注意ください。

AFFINGER6に触れておこう

アフィンガーのカスタマイズやデザインにこだわり始めたら、キリがありません。

ブログ運営を始めても数か月はびっくりするほど読まれないので、最初は執筆に集中しましょう。

 

アフィンガーの機能やカスタマイズは非常に多くあります。

１週間や２週間では使いこなすことが難しいので、記事執筆の息抜きとして設定をいじってみたり、デザインを定期的に変えたりして慣れておきましょう。

まとめ：AFFINGER６のデザインで楽しいブログ運営を

 

今回は、「AFFINGER6のデザインやカスタマイズの設定方法」について解説をしました。

AFFINGER６は非常に優秀なテーマではありますが、適当なカスタマイズやデザインにしてしまうことでせっかくの有料テーマが台無しになってしまいます。

 

収益化にこだわったAFFINGER６ですので、本記事を参考にしつつ自分なりにアレンジしていってくださいませ。

今回は、以上です。

関連記事最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】

関連記事AFFINGER６がSEOに強い理由９個【導入すべき】