Blog Design

2021/3/26

【初心者も簡単】AFFINGER5(アフィンガー 5)デザインカスタマイズ

この記事を書いた人 ポイント この記事を書いた人 ・デザイナー歴11年(web、グラフィック) ・ブロガー向けにブログデザインを発信中 こんにちは!あるです。 今回ワードプレスのテーマをAFFINGER5(アフィンガー 5)にしました! AFFINGER5(アフィンガー 5)にした機会にデザインも一新しましたのでそのデザインカスタマイズ方法をお伝えしていきたいなと思います! Contents1 AFFINGER5(アフィンガー 5)って?2 AFFINGER5(アフィンガー 5)デザインカスタマイズの場所 ...

ReadMore

Blog Design

2021/3/7

スキマ時間にスマホで簡単!canvaアプリのおしゃれなブログアイキャッチの作り方/使い方

こんにちはあるです!今回はスマホアプリのcanvaを使っておしゃれなブログアイキャッチを作ってみます!DLから簡単に使い方を説明していきます。 いつもブログ書いた後にへろへろでアイキャッチまで気が回らない、、、 移動中や外出中の暇な間に作れたらな、、、 そんな方はスマホ版のcanvaを使えば ブログを書いた後にすぐ投稿できちゃいます! 時間を有効に使えてその分の時間を他に回せる! 使い方も簡単なので一度アプリを使ってみると時間に余裕ができますよ! Contents1 canvaアプリを早速ダウンロード1. ...

ReadMore

Blog Design

2021/3/25

ブログ初心者必見! おしゃれなブログデザインの作り方

こんにちはあるです! 今回はブログ始めたばかりの方むけのおしゃれなブログデザインの作り方を紹介します! ブログ初めて記事も書かないと・・・・色々勉強することばかりでデザインまで気が回らない・・・ そんな方に簡単ですぐできる方法が一つあります。 それは・・・ヘッダーを変更する。 これだけです。 では実際にみながらどれだけ違いがあるか見てみましょう! Contents1 ブログデザインとヘッダーの関係性2 じゃあおしゃれなヘッダーはどうすればいい?2.1 無料デザインアプリ「canva」でデザインする2.2 ...

ReadMore

Blog Design

2021/3/1

ブログヘッダーを【Canva】でおしゃれに簡単デザイン!

こんにちは!デザイナーのあるです! 今回はおしゃれなブログヘッダーをCanvaで作る方法を詳しく説明していきます! ブログでヘッダーは一番最初に目に付く部分ですので、デザインがしっかりしていたほうが信頼感が増え、記事の信頼感も同じくUPします。 アプリ版もありますが、今回はPCの操作方法をやっていきたいと思います。 Canvaはコチラ まずは右上の「登録」から無料登録をしましょう! 有料アカウントのほうが使える機能があって便利なのですが無料でもかなり使い勝手はいいです! 今現在30日間の無料お試しがあるの ...

ReadMore

Blog Design

2021/2/26

無料でおしゃれなデザインが出来る【Canva】でブログアイキャッチ画像を作る方法!

こんにちは、デザイナーのあるです! 今回は無料デザインツールの「Canva」の使い方を説明していきます!誰でも使えるのでみなさんも試してみてくださいね! Contents1 ブログのアイキャッチとは?2 早速Canvaを使ってみる2.1 デザインを作成→ブログ2.2 テンプレートを選んでいく2.3 テキストを変えてみる2.4 イラストを変更してみる2.5 色味を変更してみる3 完成! ブログのアイキャッチとは? アイキャッチとは「アイ」を「キャッチ」する。そのままですね。 このアイキャッチ一つで集客数が変 ...

ReadMore

Blog Design

【初心者も簡単】AFFINGER5(アフィンガー 5)デザインカスタマイズ

この記事を書いた人

ポイント

この記事を書いた人

・デザイナー歴11年(web、グラフィック)

・ブロガー向けにブログデザインを発信中

こんにちは!あるです。

今回ワードプレスのテーマをAFFINGER5(アフィンガー 5)にしました!

AFFINGER5(アフィンガー 5)にした機会にデザインも一新しましたのでそのデザインカスタマイズ方法をお伝えしていきたいなと思います!

AFFINGER5(アフィンガー 5)って?

ワードプレスの有料テーマの一つです。

AFFINGER5(アフィンガー 5)はSEOに強くデザインイメージとしては、SANGOや swellとは真逆のすこし硬いイメージのテーマです。

おそらくTHE THORとかに近いのかなと思います!

色々レビューなどを見ていると

・カスタマイズが多い

・SEOが強い

などなど感想が沢山出てきます。

デザインテンプレートも豊富なのですがあまり好みのものが無かったので一からデザインしました。

といっても最低限のカスタマイズ方法でやっているのでテンプレートで好きなデザインがない・・・って方も参考にしてくださいね!

そのほかにも何が強みなんだろうって方はこちらから見てみてくださいね!

アフィンガー5の強みを見る

では早速気になるデザインやっていきましょう!

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)のデザインカスタマイズはまだまだたくさんできることがありますが、

今回はこのデザインでも重要と思えるヘッダーと色味を設定していきました。

最低限この二つをしっかりしておけばすっきりまとまったデザインができるはずです!

この記事をみてアフィンガーいいなぁって思った方はコチラから購入できますよ!

-Blog Design

© 2021 ARULOG Powered by AFFINGER5