こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。
AFFINGER5（アフィンガー5）のデザイン済みデーター（着せ替え）はとてもセンスが良く可愛いですがちょっとカスタマイズするとさらに自分好みになります。
デザイン済データをそのまま使ってもかわいいのですが、購入者全員が使えるアレンジなので、他の人と似たデザインになってしまう可能性もあります。
そこで、このページでは芸大卒のなつが、少しアレンジを加えてここにしかないAFFINGER5のトップページのカスタマイズをしていきます。
⇒ 着せ替えデザインをグレードアップするなら上位版のAFFINGER5のEX版もあります。
上部画像はヘッダーの部分、グローバルメニューが交互にグラデーション加工にしていますが、これをフッターにも同じようなグラデーションを追加することも可能です。
⇒ 違いについてはコチラの記事でどうぞ。
- AFFINGER5 トップページの完成図
- AFFINGER5トップページの種類
- AFFINGER5トップページアレンジの基本となるスタイル「Tidy」
- AFFINGER5 トップページカスタマイズ 基本操作「デザイン済データーインストール」
- AFINGER5トップページのカスタマイズ パターン1「家」
- AFFINGER5トップページカスタマイズ パターン1. 変更箇所全般
- AFFINGER5 トップページのカスタマイズ パターン2「オレンジ系」
- AFFINGER5トップページカスタマイズ パターン3. 「ピンク系」
- AFFINGER5トップページカスタマイズ パターン4. 「グリーン系」
- AFFINGER5トップページカスタマイズ パターン5. 「茶色系」
- 1 AFFINGER5 トップページの完成図 【カスタマイズする前に】
- 2 AFFINGER5トップページの種類 【カスタマイズの前に確認】
- 3 AFFINGER5トップページの小技 「デザイン済データーの色違い」
- 4 AFFINGER5の基本となるトップページ「Tidy」をカスタマイズ
- 5 AFFINGER5 トップページカスタマイズ 基本操作「デザイン済データーインストール」
- 6 AFFINGER5トップページのカスタマイズ パターン1 「ホーム」
- 7 AFFINGER5トップページカスタマイズ パターン1. 変更箇所
- 8 AFFINGER5 トップページのカスタマイズ パターン2 「オレンジ系」
- 9 AFFINGER5トップページカスタマイズ パターン2. 変更箇所
- 10 AFFINGER5 トップページのカスタマイズ パターン3「ピンク系」
- 11 AFFINGER5トップページカスタマイズ パターン3. 変更箇所
- 12 AFFINGER5 トップページのカスタマイズ パターン4 「グリーン系」
- 13 AFFINGER5トップページのカスタマイズ パターン4. 変更箇所
- 14 AFFINGER5 トップページのカスタマイズ パターン5 「茶色系」
- 15 AFFINGER5トップページのカスタマイズ パターン5. 変更箇所
- 16 AFFINGER5トップページ カスタマイズのまとめ
- 17 初心者だからこそWordpress有料テーマ を使うべき理由
AFFINGER5 トップページの完成図 【カスタマイズする前に】
ここでは1つのデザイン済データーのトップページを5パターンに変更してみたいと思います。ここでははパターン1の作り方を順を追って説明していきます。（パターン2以降は特典です）
どんな設定をしていくのかここで確認をしてみてください。それぞれ色と系統の違うパターンを作ってあります。
それぞれグラデーションがとても映えています。やり方がわかれば自分自身の好みの色で配置できますので、まずはこれらを元に作ってみてご自身でアレンジしてみてください。
さらに、Wordpressテーマで人気の機能、ヘッダーカード（ヘッダー画像のすぐ下の4枚のサムネイル）の作り方などもこのページで解説します。
⇒ 違いについてはコチラの記事でどうぞ。
AFFINGER5トップページの種類 【カスタマイズの前に確認】
AFFINGER5（アフィンガー5）のTOPページのデザインを1から作成するのは正直面倒です。高機能がゆえに全部カスタマイズするには相当な時間が必要です。
ここでお伝えする方法は、それぞれのテーマ固有の着せ替えをアレンジしていくという方法です。AFFINGER5（アフィンガー5）と同じくらい高機能のTHE THORでも同じようにアレンジしています。
↓ AFFINGER5の機能を使いこなそう！
こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。AFFINGER5（アフィンガー5）は、基本デザインはシンプルですが作りこむことで、幅の広がる優秀なテーマです。作りこむとかなり面白いのですが、設置でき[…]
1部変更することのメリット
まず、なぜ着せ替えの1部だけ変更するか説明しておきます。もちろんデザイン調整は1からやっても問題ありません。
ただ、1からの設定となると見出しタイトルや細かい部分も自分で設定をすることになります。着せ替えを一旦導入した後に変更すれば、必要最低限の変更だけですぐに使えるようになります。
意外にも慣れないうちの設定には時間がとられがちです。
なので、初心者でも効率的にデザインが作れるようにこういったやり方をしています。
AFFINGER5トップページの小技 「デザイン済データーの色違い」
この変更でずいぶんイメージが変わります。色が見た目やイメージに与える影響は大きいのでブログのジャンルに合ったものを選びましょう。
私がいつも色を選ぶ時には、メインの1色を選び、その反対色もしくは同系色をもってきます。するとおさまりが良いです。
⇒ Webで簡単に配色が作れるツールはこれだけでOK！色の迷子にならない厳選10選！
デザイン済データーの背景追加のコツ
背景を変えるときに注意したいのは、小柄と淡い色にすること。たまに、すごい目立つ背景を見かけますが、気になってしょうがないのでできるだけ邪魔しない背景にしましょう。
カテゴリーの囲い内をパステル色にしてもかわいいです。
↓ 以下でAFFINGER5のヘッダー画像のサイズやヘッダーカードの設定など説明しています。
ブログ運営半年で月20万超の元サラリーマンブロガーなつです。AFFINGER5はデザイン性にすぐれたWordpressテーマです。ヘッダーには、静止画や動画も設定でき画像に重ねてボタンやテキストを配置することも可能です。[…]
AFFINGER5の基本となるトップページ「Tidy」をカスタマイズ
ここで元になるデザイン済データーは一番新しい「Tidy」です。グラデーションが上品できれいなトップページです。
↓ クリックで拡大します
出典：AFFINGER5
このままで使っても十分カッコいいデザインですがこの2色だけならジャンルを選ぶので、ちょっと雰囲気の違う1色を設定しても面白いかもしれません。
⇒ 違いについてはコチラの記事でどうぞ。
AFFINGER5 トップページカスタマイズ 基本操作「デザイン済データーインストール」
まず、ブログの基本となるAFFINGER5で用意されたデザイン済みデーターのインストールをしていきます。
この部分の操作はどのデザインも同じです。
↓ デザイン済データーインストールについては以下の記事に記載しています。
こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。AFFINGER5（アフィンガー5）の機能として、「デザイン済みデーター」というものがありますがこれは他でいう着せ替え機能です。あらかじめ用意されたデザ[…]
AFFINGER5トップページのカスタマイズ パターン1 「ホーム」
↓ クリックで拡大します
| 色合い（差し色） | ブログのジャンル |
|---|---|
| 茶色～ピンク（黄色） |
|
最初に、デザイン済データーをインストールしてから、カスタマイズしていく方法をお伝えします。AFFINGER5の場合には、お知らせのラインとフッターまでグラデーションにできますので、色を変更していけばセンスよくまとまります。
⇒ 違いについてはコチラの記事でどうぞ。
AFFINGER5トップページカスタマイズ パターン1. 変更箇所
パターン1の変更箇所は８か所です。他のデザインのものもほぼ同じような変更でやっていきますので基礎を覚えてしまえば応用ができるようになります。
↓ クリックで拡大します
- ヘッダーエリアの設定
- ヘッダー下の設定
- ヘッダー画像の設置
- ヘッダーカード設置
- ヘッダーカードの背景
- フッター部分の設定
- サイドバーのタイトルバー
- アーカイブ部分の区切り線
このトップページでは以上の項目の変更をしています。色味が同じなら他の画像でも十分対応できますので、好きなものを選んでください。
ヘッダー画像推奨 ⇒ 茶色系・ピンク系・黄色系
↓ 配色のについては以下の記事が参考になります。
こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。優秀な色のパターン一覧サイトや色のイメージが頭でわかっていても合わせる際に迷いませんか？ 例えば、実際「Color Hunt」というパ[…]
1. ヘッダーエリアの設定
ヘッダー画像まわりの設定です。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ ヘッダーエリア
- 背景色 ：#432f2f
- 背景色（グラデーション上部）： #716246
ヘッダー上部で色を抑えておき、その他のパーツをちょっと派手にしてみます。
2. ヘッダー下の設定
▼ 外観 ⇒ カスタマイズ ⇒ [+]メニューのカラー設定 ⇒ PCヘッダーメニュー
- 背景色：#e597b2
- 背景色（グラデーション上部）：#ffe16b
⇒ 違いについてはコチラの記事でどうぞ。
3. ヘッダー画像の設置
ヘッダー画像の設置です。サイズの高さは320pxですが画像の位置も確認しながらちょうど良い高さで調整してみてください。
4. ヘッダーカード設定
トップページに4枚設置してあるヘッダーカード設定の設定です。この設定はAFFINGER5の管理画面でします。
▼ AFFINGER5管理画面 ⇒ おすすめ一覧記事 ⇒ おすすめヘッダーカード
画像と画像の上のテキストリンクのURLとをここで設定します。このままならPC画面とスマホ画面に表示されますので、表示させたくない場合には下のチェック欄で指示します。
すべて登録できたら「テキストのある背景画像を暗くする」をクリックします。こうすることでテキストが見やすくなります。
⇒ 違いについてはコチラの記事でどうぞ。
5. ヘッダーカードの背景
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ ヘッダーカードエリア
この部分には、無料ツールを使ってストライプを設置してください。
↓ 画像やイラストの無料ツールは以下の記事が役にたちます
こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。ブログを作るときに文章だけではそっけないですが、記事のイメージができるイラストがあると読者もわかりやすいです。 ピッタリの画像があれば[…]
6. フッター部分の設定
フッターの色はヘッダーと合わせるとおさまりよくなります。今回は若干遊び心を入れて派手なグラデーションにしています。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ フッターエリア
- 背景色 #e597b2
- 背景色（グラデーション上部） #ffe16b
7. サイドバーのタイトルバー
▼ 外観 ⇒ カスタマイズ ⇒ 各テキストとhタグ（見出し） ⇒ ウィジェットタイトル（サイドバー）
- 背景色：#d36b58
- ウィジェットタイトルの基本スタイル：なし
- 背景や吹き出しの角を丸くする
- 背景画像：透過の水玉
8. アーカイブ部分の区切り線
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ 記事一覧の区切り
- ボーダーカラー：#aacf53
- 破線にする
その他 テキストの色
▼ 外観 ⇒ カスタマイズ ⇒ 各テキストとhタグ（見出し）⇒ テキスト色一括変更
- #3d3d3d
- 範囲を広げる（記事タイトル・抜粋など）
- 記事内リンク色：#8d6449
⇒ 違いについてはコチラの記事でどうぞ。
AFFINGER5 トップページのカスタマイズ パターン2 「オレンジ系」
色は秋色ですが、イラストのハリネズミが持っている果物から、野菜（宅配）などのアフィリエイトにも使えます。
↓ クリックで拡大します
| 色合い（差し色） | ブログのジャンル |
|---|---|
| オレンジ～黄色系（抹茶色） |
|
AFFINGER5トップページカスタマイズ パターン2. 変更箇所
パターン2の変更箇所は８か所です。
- ヘッダーエリアの設定
- ヘッダー下の設定
- ヘッダー画像の設置
- ヘッダーカード設置
- ヘッダーカードの背景
- フッター部分の設定
- サイドバーのタイトルバー
- アーカイブ部分の区切り線
このトップページでは以上の項目の変更をしています。色味が同じなら他の画像でも十分対応できますので、好きなものを選んでください。
ヘッダー画像推奨 ⇒ 緑系・黄色系・オレンジ系・茶色
おすすめ
パターン2の作り方や色のコードなど、もう少し詳しい記事は「購入特典」となります。このブログからAFFINGER5をご購入くださった方にこのアレンジのカスタマイズができる詳細記事をご覧いただけます。
ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6（アフィンガー）。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]
AFFINGER5 トップページのカスタマイズ パターン3「ピンク系」
↓ クリックで拡大します
| 色合い（差し色） | ブログのジャンル |
|---|---|
| ピンク（黄色） |
|
AFFINGER5トップページカスタマイズ パターン3. 変更箇所
パターン3の変更箇所は8か所です。
- ヘッダーエリアの設定
- ヘッダー下の設定
- ヘッダー画像の設置
- ヘッダーカード設置
- ヘッダーカードの背景
- フッター部分の設定
- サイドバーのタイトルバー
- アーカイブ部分の区切り線
このトップページでは以上の項目の変更をしています。色味が同じなら他の画像でも十分対応できますので、好きなものを選んでください。
ヘッダー画像推奨 ⇒ ピンク系・黄色系・赤系・水色
おすすめ
パターン2の作り方や色のコードなど、もう少し詳しい記事は「購入特典」となります。このブログからAFFINGER5をご購入くださった方にこのアレンジのカスタマイズができる詳細記事をご覧いただけます。
ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6（アフィンガー）。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]
AFFINGER5 トップページのカスタマイズ パターン4 「グリーン系」
自然や健康といったイメージのある緑系のパターンは、緑色と合わせる色を明るめのものをもってくるようにします。
緑に青などをもってくると渋すぎるイメージとなります。
↓ クリックで拡大します
| 色合い（差し色） | ブログのジャンル |
|---|---|
| 緑（黄色～紫） |
|
AFFINGER5トップページのカスタマイズ パターン4. 変更箇所
パターン4の変更箇所は9か所です。
- ヘッダーエリアの設定
- ヘッダー下の設定
- ヘッダー画像の設置
- ヘッダーカード設置
- ヘッダーカードの背景
- ヘッダーカードエリアの色
- フッター部分の設定
- サイドバーのタイトルバー
- アーカイブ部分の区切り線
このトップページでは以上の項目の変更をしています。色味が同じなら他の画像でも十分対応できますので、好きなものを選んでください。
ヘッダー画像推奨 ⇒ 緑系・黄色系・ローズ系・水色
おすすめ
パターン2の作り方や色のコードなど、もう少し詳しい記事は「購入特典」となります。このブログからAFFINGER5をご購入くださった方にこのアレンジのカスタマイズができる詳細記事をご覧いただけます。
ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6（アフィンガー）。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]
AFFINGER5 トップページのカスタマイズ パターン5 「茶色系」
高級なチョコをイメージして作ったデザインです。黒一色でシックにするつもりでしたが、遊び心で真紅を入れています。
↓ クリックで拡大します
| 色合い（差し色） | ブログのジャンル |
|---|---|
| 黒～赤 |
|
AFFINGER5トップページのカスタマイズ パターン5. 変更箇所
パターン5の変更箇所は9か所です。
- ヘッダーエリアの設定
- ヘッダー下の設定
- ヘッダー画像の設置
- ヘッダーカード設置
- ヘッダーカードの背景
- ヘッダーカードエリアの色
- フッター部分の設定
- サイドバーのタイトルバー
- アーカイブ部分の区切り線
このトップページでは以上の項目の変更をしています。色味が同じなら他の画像でも十分対応できますので、好きなものを選んでください。
ヘッダー画像推奨 ⇒ 黒系・ベージュ系・赤
おすすめ
パターン2の作り方や色のコードなど、もう少し詳しい記事は「購入特典」となります。このブログからAFFINGER5をご購入くださった方にこのアレンジのカスタマイズができる詳細記事をご覧いただけます。
ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6（アフィンガー）。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]
AFFINGER5トップページ カスタマイズのまとめ
AFFINGER5（アフィンガー5）のトップページの作り方は結構大変な部分もあります。しかし、慣れてきて作りこむとすごく自分にピッタリのブログになりますのでぜひ試してみてください。
↓ 当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！
ブログ運営半年で月20万超の元サラリーマンブロガーなつです。無料テーマで有名なSTINGERの流れを受け継ぐAFFINGER6（アフィンガー）。基本デザインがシンプルで使いやすくさらにセンスの良い「着せ替え」も用意されていてブログを[…]
初心者だからこそWordpress有料テーマ を使うべき理由
無料テーマを使うことで時間の無駄遣いをしていませんか？
- 思い通りのデザインにできない
- なかなか稼げない
- アクセス数が増えない
こんな悩みを抱えていませんか？
稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。
Wordpressの有料テーマができる５つのこと
- 検索上位を目指せる
- 見た目が綺麗でおしゃれになる
- 機能が豊富で出来ることが多い
- マニュアルなどのサポート
- 有名ブロガーも有料テーマを使っている
これまでにあげた5つの有料テーマの特徴を説明していきます。
1. 検索上位を目指せる
ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。
- 情報の信頼性
- ユーザーへの役立つ情報であるか？
- スマホ・PCなどでストレスなく使える
などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。
2. 見た目が無料テーマ以上に綺麗になる
シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。
有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。
出典：AFFINGER5（アフィンガー5）
3. 機能が豊富でできることが多い
今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。
4. マニュアルなどのサポート
なにかわからないことがあった場合、詳しく記載しているものがあるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。
5. 有名ブロガーも多数使用
稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。
もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。
カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。
おすすめ！WordPressテーマ
「ACTION（AFFINGER6）」
- 高機能の最新テーマで大人気
- デザイン変更でいろんな用途に使える
- マニュアル完備
- 各パーツがプロに作ってもらったみたいにアレンジ可能
- バナーや囲い枠スライダーなど特殊なものが簡単に作れる。