AFFINGER5、6(アフィンガー)サンプルデザインを作る工程!完成度の高いブログを最短で作成!

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER5は元の基本デザインもシンプルで使いやすいのですが、タイトルの見出しなんかも画像の背景を使ったりしてアレンジ性にも富んでいます。

ただ、アレンジ機能が多い分最初は難しく感じることがあるようです。

そこで、AFFINGER5、6のサンプルデザインを作り上げる工程をお伝えしていきます。

ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。

※今なら、5大購入特典をお付けしています!

2021年7月、AFFINGER5(WING)からAFFINGER6(ACTION)にパワーアップして変更されました!
詳しくはコチラの記事で確認できます。

※AFFINGER5をベースに機能を若干変更したものがAFFINGER6です。

AFFINGER5、6のサンプルデザイン 【完成図】

初心者にとって、個別の名前を覚えるのってとても大変だと思います。特に、ブログ作りもいろんな名前が出てきて最初は戸惑います。

たとえば、最初は「プラグイン」「メニュー」「ウィジェット」・・・って、なんじゃそれ~ってなりますよね(笑)

そこで、まずは、どんなデザインを作るのか完成図をおみせします。この完成図をイメージしていただき、細かな部分をひとつひとつ作っていきたいと思います。

 

トップページ

ここでは、基本設定から少しの色の変更とヘッダー画像を設定してイメージを変更していきます。完成度の高いブログを最短の時間で作り上げることを目指しています。

 

上部画像は、ブログを開けると最初に出てくる画面です。上部をグラデーションにしプロフィールが見えています。

サイドバーにはAFFINGER5特有のサイドバーメニューを設定し、グラデーションを利用して立体的なものを作っています。

 

サイドバーの一番下には、最近の投稿一覧がでていますが、これもウィジェットで最初に設定をしています。

(この部分は記事があることが前提です。記事がないと表示されません)

速報!
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。


⇒ 詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

AFFINGER5、6のサンプルデザイン作成の工程

AFFINGER5の設定をすべて1からするのは手間がかかりますので、たとえば色の一括変更や着せ替えがあるものは一旦それを導入してから少しづつ項目の変更をしていくと設定し忘れとか細部の設定が面倒ということはありません。

このページでは、AFFINGER5のレイアウトと色設定を最初にしてしまってから小さな項目をすこしづつ自分の好みに変更する方法をお伝えします。

  1. カラーパターン・デザインパターン変更
  2. ヘッダー上部とグローバルナビの色変更
  3. ヘッダー画像の追加
  4. サイドメニューの色変更
  5. おすすめヘッダーカードの設定

 

特にデザインを苦手とする方や、初心者の頃には設定がうまくいかないことがありますので、そういったことがないように完成品を調整していくイメージです。

 

なつ
このページで作るデザインはできるだけ初心者の方でも簡単にかっこよく作れるように最小限の設定でお伝えしています!

 

ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー)の公式ページを確認する
※今なら、5大購入特典をお付けしています!
関連記事

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6(アフィンガー)。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。⇒ 違いについてはコチラの記事でどうぞ。

 

AFFINGER5、6のサンプルデザイン 準備編

AFFINGER5のインストールとインストールができたという前提でまずはデザインに関連する設定をしていきます。

  1. プロフィール設定
  2. ウィジェットの設定

 

1. プロフィール設定

サイドバーの上部にプロフィールを設定します。プロフィールを表示させるには、ユーザー登録が必要になってきます。

⇒ AFFINGER5のプロフィール設定

ユーザーの画像やメッセージなどを入力できたら、次にウィジェットの設置をします。

 

2. ウィジェットの設定

ウィジェットで、項目をどの位置に配置するのかを設定する場所です。たとえばこの章でのサイドバーメニューや人気記事などいろんな場所に配置させます。

 

サイドバーメニューウィジェットを設定

サイドバーメニューウィジェットとは以下のようなAFFINGER5の特有のメニューです。全体的にベタ塗りになっていますが、この部分をグラデーションにもできます。

 

▼ 外観 ⇒ ウィジェット

サイドバートップの部分に以下の項目を追加しておきます。

  • 11_STINGERサイト管理者紹介
  • 01_STINGERサイドバーメニュー
  • 05_STINGER最新の投稿一覧

 

この基本部分を設定しておけば、サイドバーに最低限必要なものが設置できます。あとはご自身のサイトに必要なものを追加していってください。

訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。

※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

AFFINGER5、6のサンプルデザイン 1. 「カラー&レイアウトパターン設定」

まず、AFFINGER5のデザインパターンを設定しましょう。全体の色とレイアウトなどがワンクリックで変更できるので、とても便利です。

  • カラーパターン
  • デザインパターン

 

上記の2つの組み合わせを自分で選び設定をすることでいろんなパターンを作ります。

もちろん、デザイン設定が苦手な方はこの部分だけでもブログを作り始めてもOK。自分のペースで設定をしていきましょう。

▼ AFFINGER5 管理 ⇒ デザイン

カラーパターンは赤(やさしい)とデザインパターンはフラット(シンプル)にチェックを入れ「SAVE」をクリックします。

するとトップページは以下のようになります。

 

AFFINGER5、6のサンプルデザイン 2. 「ヘッダー上部とグローバルナビの色変更」

基本の色とレイアウトが設定できたら、その色合いをグラデーションにしていきます。グラデーションは不要な方はここはスルーでOKです。

ヘッダー上部をグラデーションにする

ヘッダーの上部をわかりやすいグラデーションにしていきます。

▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ ヘッダーエリア

 

  • 背景色(グラデーション上部)・・・#f8e58c(黄色っぽい色)
  • グラデーションを横向きにするのチェックを確認

グラデーションを上下にするなら「グラデーションを横向き」のチェックを外します。

グローバルナビの色をグラデーションにする

ヘッダーの下に配置するグローバルナビの色をグラデーションにしていきます。

▼ 外観 ⇒ カスタマイズ ⇒ [+]メニューのカラー設定 ⇒ PCヘッダーメニュー

 

変更する部分は以下の通り

  • 背景色・・・#f2a0a1
  • ボーダー上下色・・・#e5c9c9
  • ボーダー左右色・・・#e5c9c9
  • ボーダー右色・・・#e5c9c9

 

背景色に水色などを入れてもちょっと変わってて良いかも。ただ濃いブルー系だと真ん中あたりが気持ち悪い感じになります(笑)

訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。

※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

AFFINGER5、6のサンプルデザイン 3.「ヘッダー画像の追加」

次にトップページのメインとなるヘッダー画像を追加します。ここは好きな画像で良いと思いますが、カスタマイザーにもある通り2200×500ピクセルがよく見えるサイズだそうですが、小さくても問題ありません。

▼ 外観 ⇒ カスタマイズ ⇒ ヘッダー画像

「新規画像を追加」をクリックして好きな画像を追加します。

 

AFFINGER5、6のサンプルデザイン 4. 「サイドメニューの色変更」

最初に設置したサイドメニューの色をグラデーションにしていきます。そのままの色でよければこの章はスルーしてください。

▼ 外観 ⇒ カスタマイズ ⇒ [+]メニューのカラー設定 ⇒ サイドメニューウィジェット

 

  • 背景色(グラデーション上部)・・・#e5a7a7

 

最初は、横のグラデーションになっていますが、チェックを外すことによって上記のような立体的なメニューができあがります。

 

AFFINGER5、6のサンプルデザイン 5. 「おすすめヘッダーカードの設定」

AFFINGER5といえば、ヘッダーカードが特徴的です。ぜひこの部分は設定しておきましょう。

▼ AFFINGER5管理 ⇒ おすすめ記事一覧 ⇒ おすすめヘッダーカード

 

この部分で、画像をインストールしテキストとURLを設定し「SAVE」をクリックします。画像が明るすぎるとテキストが見えづらいので、画像を暗くする設定もここで行います。

  • 画像のURLを設定
  • テキスト
  • リンク先URL
  • テキストのある背景画像を暗くするにチェック

 

ここまでで基本的な設定ができあがります。あと手を加えたいところがでてくればその都度追加していけばもっと自分の好みにちかくなります。

 

↓ 当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント!

関連記事

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6(アフィンガー)。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]

初心者だからこそWordpress有料テーマ を使うべき理由

無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. マニュアルなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

 

出典:AFFINGER5(アフィンガー5)

 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. マニュアルなどのサポート

なにかわからないことがあった場合、詳しく記載しているものがあるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

 

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

おすすめ!WordPressテーマ
「ACTION(AFFINGER6)」

  • 高機能の最新テーマで大人気
  • デザイン変更でいろんな用途に使える
  • マニュアル完備
  • 各パーツがプロに作ってもらったみたいにアレンジ可能
  • バナーや囲い枠スライダーなど特殊なものが簡単に作れる。

 

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。⇒ 違いについてはコチラの記事でどうぞ。