こんにちは！あるです。
今回ワードプレスのテーマをAFFINGER5(アフィンガー 5)にしました！
AFFINGER5(アフィンガー 5)にした機会にデザインも一新しましたのでそのデザインカスタマイズ方法をお伝えしていきたいなと思います！
AFFINGER5(アフィンガー 5)って？
ワードプレスの有料テーマの一つです。
AFFINGER5(アフィンガー 5)はSEOに強くデザインイメージとしては、SANGOや swellとは真逆のすこし硬いイメージのテーマです。
おそらくTHE THORとかに近いのかなと思います！
色々レビューなどを見ていると
- カスタマイズが多い
- SEOが強い
などなど感想が沢山出てきます。
デザインテンプレートも豊富なのですがあまり好みのものが無かったので一からデザインしました。
といっても最低限のカスタマイズ方法でやっているのでテンプレートで好きなデザインがない・・・って方も参考にしてくださいね！
そのほかにも何が強みなんだろうって方はこちらから見てみてくださいね！
では早速気になるデザインやっていきましょう！
AFFINGER5(アフィンガー 5)デザインカスタマイズの場所
まず、最初に理解しておくとわかりやすいのがどこでデザインを作って行くの？というのを把握しておくと頭で描いたデザインに近づけますよ！
デザインでいじる場所は大まかに分けて3つあります！
・AFFINGER(アフィンガー）管理
・外観→ウィジェット
・外観→カスタマイズ
この三つでデザインを形成していきます。この3つの使い方さえ覚えてしまえばカスタマイズ性が高いAFFINGER5(アフィンガー 5)でも簡単におしゃれなデザインができちゃいます！
AFFINGER5(アフィンガー 5)デザインカスタマイズ方法
パーツごとに分けて説明していきます！
ヘッダーデザイン
まずサイトの顔になるヘッダーデザインから取り掛かります！
ヘッダーデザインは外観→カスタマイズ
から設定できます。
ここさえ決まってしまえばあとはヘッダーに合わせて色味をつけていけば完璧です！
ここでポイント！
ヘッダーデザインがお洒落じゃないとそのほか全てのデザインもそこに引っ張られてしまいます。
逆にいうとヘッダーさえしっかりしていればサイト全体のデザインもグッとあがります。
それを踏まえた上でしっかりデザインしていきましょう！
また、スライドショーが簡単に設定出来るのでいろんなバリエーションのデザインを作っても楽しいと思います！
ヘッダーデザインのコツはこちらで説明しています！
ヘッダーデザインはPCとモバイルで2つ制作する
今回このAFFINGER5(アフィンガー 5)に変更した際にやりたかった一つはPCとモバイルで違ったヘッダーを使うことです。
よくよく考えると見え方が違うのに同じサイズのヘッダーだとどちらかの見栄えが悪くなりますよね？
それならいっそのことデバイスに合わせたサイズを使い分けてしまった方がいいです。
ということで今回は2サイズのヘッダーを用意しました。
- PC用ヘッダーサイズ 2200 x 1100 ピクセル
- モバイル用ヘッダーサイズ 1697 x 2016 ピクセル
今回のこのデザインで気をつけた点は上下の境目をわからなくすることに重点を置きました。
ヘッダー部分とヘッダーしたの境目がどこかわからないですよね？
そうすることによってうまく余白を使うことができます！
もちろん境目がはっきりしているデザインでもデバイスにあったサイズを使ってあげるとかなりおしゃれにカスタマイズ出来るのでどんなデザインにしたいかに合わせて使い分けてくださいね！！
AFFINGER5(アフィンガー 5)でヘッダーを設定する
外観→カスタマイズで設定していきます。
ヘッダー画像から画像を設定していきます。
PC版
新規画像から設定していきます。
この時に「 ヘッダー画像の横幅を100%にする（※背景画像は見えなくなります）」にチェックをいれると
スマホ版
モバイルはここで設定すればOKです！
これでPCとモバイルの両方に設定できました。
AFFINGER5(アフィンガー 5)全体の色味を合わせる
全体の色味を合わせていきます。
先程設定したヘッダーにブログ全体の色味を合わせていきます。
全体のカラーを設定する
AFFINGER5(アフィンガー 5)管理から全体の色味を設定します。
ここでの設定はさきほど設定したヘッダーのイメージにあったものまたは、それを邪魔しないものにしましょう。
こちらで設定すると全体のカラーリングが変わりますので一度サイトを確認します。
個別で設定していく
先程の一括設定でデザインがよくなればいいのですが、
場所によってはここは違う色・・・としたい場合がありますよね。
その場合は外観→カスタマイズ で細かい設定をしていきます！
基本エリア設定から選んで色味を変えていきます。
基本的に「ヘッダー」「フッター」の色味を変更するくらいでいいと思います！
その色味がよく分からないんだよって人はコチラにカラーコードをかいているので真似してみてくださいね！
さいごに
AFFINGER5(アフィンガー 5)のデザインカスタマイズはまだまだたくさんできることがありますが、
今回はこのデザインでも重要と思えるヘッダーと色味を設定していきました。
最低限この二つをしっかりしておけばすっきりまとまったデザインができるはずです！
この記事をみてアフィンガーいいなぁって思った方はコチラから購入できますよ！
この記事はARU氏の運営していた「ARULOG」より2021年8月に移管された記事です。
ARU
デザイナー歴11年
ブロガーに寄り添うプロデザイナー
Kindleでブロガーデザイン本発売中
フォロワーが伸びるヘッダーをココナラで販売中
twitterでデザインのヒントを発信 ＠awdesign6
どんぐり所長のおすすめツール
どこでも、どんなデバイスでも順位チェック
ブログ記事の順位を確認していますか？どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。
ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。
クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。
実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。
＼場所を選ばない快適さを体験して／
Nobilista公式サイト
当サイト推奨 デザインツール
当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ！
当サイトのデザインは、SWELLで再現可能
私はSWELLを2年使用してきました。現在４つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い。
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。
- 完全ブロックエディタ対応
- 直感で使える操作性
- 便利な専用ブロックを多数用意
- お洒落なトップページが簡単に作れる
- 最速レベルのページスピード
- 一度購入すれば複数サイトに何度でも使用可能
- ユーザーの利便性を考える熱意の運営者
- SWELLを紹介すればアフィリエイト報酬が貰える（購入者のみ参加可）
- 販売価格 ￥17,600（税込）
唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。
SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。
＼圧倒的な操作性を体験せよ／
あなたも今日からSWELLER！
