AFFINGER5

【デザイン設定】アフィンガー5(AFFINGER5)の使い方を解説【カスタマイズ】

みなさんこんにちは!あーるくん(@aru20r)です。

本記事は「アフィンガー5の使い方を解説(デザイン編)」についてご紹介していきます。

まず、アフィンガー5(AFFINGER5)を導入していない人こちらからダウンロードしてください。

 

こんな人に読んで欲しい

あーる
アフィンガー5のデザイン設定をしたい!
あーる
アフィンガー5のカスタマイズ方法がわからない
あーる
自分だけのサイトを作りたい

 

上記の悩みを抱えている人はこの記事を読めばOKです。

デザイン設定をすることで他のサイトにはないデザインを作ることができます

 

あーる
本記事を見て「デザインの設定方法」を習得しましょう!

 

アフィンガー5:カスタマイズ前にやること

本の上に鉛筆とスマートフォン

 

まず初めに、アフィンガー5のカスタマイズ前にやるべきことがあります。

やってない人は、最初に済ませておきましょう!

 

1.パーマリンク設定

2.サーチコンソール・Googleアナリティクスの連携

3.プラグインの導入

 

あーる
この3点を行わないとカスタマイズが出来ないわけではないですが、先に済ませておくことをおすすめします。

 

合わせて読みたい

 

アフィンガー5デザイン設定とは?

シャープペンシルを使用してトレーシングペーパーにレタ​​リングする人

 

アフィンガーのデザイン設定とは、名前の通り”サイトのデザイン”を変えることができます

具体的にお話すると、サイト全体のデザイン、サムネイル画像の大きさ、サイト文字のサイズなどを簡単に変更することが可能です。

サイトのデザインを変更することで、他のサイトにはない「自分だけのサイト」を作ることができるので、デザイン設定することをおすすめしますよ。

 

あーる
詳しくはこれから解説していきます!

 

アフィンガー5カスタマイズ:デザイン設定

ラップトップ、モックアップ、グラフィックタブレット、タブレット、グラフィックデザイン

 

アフィンガー5のデザイン設定は、WordPressダッシュボード→アフィンガー5管理→デザインで開くことができます。

 

デザイン設定の流れ

1.WordPressダッシュボード

2.アフィンガー5管理

3.デザイン

 

サイト全体のレイアウト

 

「サイト全体のレイアウト設定」では、サイト全体のデザインを変更することができます

さまざまな”カラーパターン”と”デザインパターン”がありますが、好きな色を選べばOKです

注意ポイント

好きな色を選ぶことが可能ですが、あまり派手になりすぎないようした方がいいです。

また、全体のデザインとは別に「外観→カスタマイズ→全体カラー設定、メニューカラー設定、オプションカラー」で様々なカラー設定をすることができるので、ぜひ試してみてください。

ポイント

デザインは派手すぎず、シンプルにするようにしましょう。

 

カテゴリーリンク

 

カテゴリーリンクの設定は、サイドバーに表示するカテゴリーの色を変更できます

基本”黒”で問題ありませんが、サイトに溶け込む色にするようにしましょう。

 

サイドバー”黒”の場合

 

サイドバー”赤”の場合

 

あーる
カテゴリーの色によって、イメージの変化ができるので活用してみてください。

 

サムネイル画像

 

サムネイル画像とは、トップページから誘導するにあたってクリックされやすくする手法です。

サイトをより多くみてもらう為に、サムネイルの表示をするようにしましょう。

 

僕のサイトは、このような設定になっています。

僕のサムネイル設定は上に表示していますが、好きな方法でサムネイル設定をするようにしましょう

 

抜粋設定

 

あーる
ブログの抜粋というのは、サイトタイトルの下に書かれている説明文のことです。

 

タイトルの説明文を表示させたくないなら、抜粋設定で非表示にしましょう

また、スマホのみ抜粋表示させてパソコンには非表示にすることも可能なので、好きな設定にしてみてください!

 

Aフォントサイズ

 

フォントのサイズ変更とは、「サイトに表示される文字の大きさを変更できる」設定です。

「アフィンガー 5」のフォントサイズ設定は”3種類”に分かれており、「パソコン、タブレット、スマホ」を別々のサイズに変更することができます

 

あーる
文字の読みやすさは人それぞれ違いますが、一般的読みやすいと言われている文字の大きさを説明します。

 

PC(960px以上)のフォントサイズ

サイズ(px)行間(px)
基本(P)1731
記事タイトル1936
H21931
H31831
H41731

 

タブレットのフォントサイズ

サイズ(px)行間(px)
基本(P)1732
記事タイトル2240
H22133
H32133
H41731

 

スマホのフォントサイズ

サイズ(px)行間(px)
基本(P)1733
記事タイトル2542
H22440
H31940
H41840

 

個人差はありますが、おすすめのフォントサイズは上記になります

アフィンガー5のフォントサイズで迷った時は参考にしてください!

 

Aフォントの種類

フォントの種類の設定は、文字の形を変更することができます。

ですが、フォントは特に変更する必要はないので、デフォルトのままで大丈夫です。

どうしてもフォントの種類を変えたい方はこちらを参考にしてください。

 

デザイン設定:まとめ

Ux、プロトタイピング、デザイン、ウェブデザイン、アプリ、モバイル

 

ここまで見ていただきありがとうございます。

本記事では「アフィンガー5の使い方を解説(デザイン編)」についてお話をしてきました。

デザインによってサイトの印象がかなり変わるので、あなたの気にいるサイトを作ってみてください

あーる
アフィンガー5の評判はこちらから!

合わせて読みたい

  • この記事を書いた人

あーる

-AFFINGER5

© 2020 RIABLOG Powered by AFFINGER5