AFFINGER

第2回:アフィンガー入門「初期設定、最初にやるデザイン(初心者向け図解で手順を完全案内)」


枕を抱えてくつろぐ女性

AFFINGER の初期設定、最初にやるデザインなどを簡単解説します。

購入、インストールが未済の方は、次の記事を参照してインストールしてください。

カラーパターンとデザインパターンを設定する

AFFINGER テーマをインストールしたばかりのころは全体的なカラーも初期値で画一的なシンプルなデザインです。

基本となる全体デザイン(カラーバリエーションとデザインパターン)が用意されているので、初期値としての全体感を設定することが可能です。

カラーやデザインは今後サイトを作っていく中で細かい設定を入れていくとデザインは変わってきます。あまり深くこだわらずに「この色いいな」程度で設定して問題ありまっせん。

WordPress の管理画面から「AFFINGER 管理」→「全体設定」を選択し、カラーパターンと、デザインパターンを設定します。

■ カラーパターンの設定

「赤(エレガント)」や「青(ビジネス)」など10種類以上のパターンが用意してありますので、お好みのカラー配色で設定します。

(イメージをクリックすることで大きく表示します)

赤(エレガント)

赤(エレガント)

青(ビジネス)

青(ビジネス)

緑(ナチュラル)

緑(ナチュラル) 

オレンジ(元気)

オレンジ(元気)

ピンク(可愛い)

ピンク(可愛い)

グレー(ダーク)

グレー(ダーク)

赤(やさしい)

赤(やさしい)

青(やさしい)

 青(やさしい)

緑(やさしい)

緑(やさしい)

オレンジ(やさしい)

オレンジ(やさしい)

 ピンク(やさしい)

 ピンク(やさしい)

 グレー(やさしい)

 グレー(やさしい)

パターンを変更したら、画面下方にある「SAVE」ボタンをクリックして反映します。

■ デザインパターンの設定

グラデーションのパターンなどの全体像を指定します。あまり大きな変化はありませんので、特に気にしなければ最初は「デフォルト(グラデーション横)」か「ブログ(初心者おすすめ)」で問題ありません。

(イメージをクリックすることで大きく表示します)

デフォルト(グラデーション横)

デフォルト(グラデーション横)

ビジネス(グラデーション縦)

ビジネス(グラデーション縦)

フラット(シンプル)

フラット(シンプル)

キューティー(ストライプ)

キューティー(ストライプ)

ブログ(初心者おすすめ)

ブログ(初心者おすすめ)

パターンを変更したら、画面下方にある「SAVE」ボタンをクリックして反映します。

基本的な部品をデザインする

「みだし」や「リスト」の、代表的な部品のデザインを設定していきます。

AFFINGER では、実際に部品を見ながら設定する方法がありますので、具体的に方法を解説します。

■ 部品デザインの準備作業

AFFINGER では、基本部品の見やすさをチェックできるダミーページが用意されています。

ダミーページで実際の見た目を確認しながら部品のデザインを設定していくための準備作業です。

Step.1. 固定ページを表示する

固定ページ一覧

WordPress の管理画面から「固定ページ」を表示し、「基本文の見やすさチェック用ダミーページ」の「プレビュー」をクリックします。

Step.2. 固定ページから「カスタマイズ」をクリックする

基本文の見やすさチェック用ダミーページ

「上方」にある「カスタマイズ」をクリックします。

Step.3. 「カスタマイズ」画面を表示する

カスタマイズメニュー画面

左側にカスタマイズのメニューが出てきます。デザインしたい設定を指定して変えていきます。

■「見出し」(H2 ~ H5)の設定

メニューから「見出しタグ(hx) / テキスト」をクリックします。

カスタマイズメニュー画面の見出しの設定

左側のメニューが変わりますので、「H2 タグ」をクリックします。

左側の設定で「配色」や「形」を指定します。変更すると同時に右側の画面も変わりますので、実際の見た目を見ながら設定可能です。

設定を保存する場合は、情報にある「公開」ボタンをクリックします。(左上の「<」クリックでカスタマイズメニューに戻ります)

同じ方法で、H3、H4、H5 タブの見た目も設定します。

■「記事タイトル」の設定

カスタマイズメニュー画面の記事タイトルの設定

メニューから「見出しタグ(hx) / テキスト」→「記事タイトル」をクリックします。

左側の設定で「配色」や「形」を指定します。変更すると同時に右側の画面も変わりますので、実際の見た目を見ながら設定可能です。

■「リスト」のデザイン

オプション(その他)のメニュー

メニューから「オプション(その他)」をクリックします。

「リスト(’数字・チェック / ボックスタイプ)」の選択

「リスト(’数字・チェック / ボックスタイプ)」をクリックします。

リストのデザイン設定

左側の設定で「配色」などを指定します。変更すると同時に右側の画面も変わりますので、実際の見た目を見ながら設定可能です。

他にも「テーブルの枠線の色」など細かい部品のデザインも変えられます。また今すぐに変えなくとも、ブログを作っていく中でいつでも変更可能です。

フォントサイズを指定する

フォントサイズの設定

WordPress の管理画面から「AFFINGER 管理」→「全体設定」を選択し、下側にスクロールして、「フォントのサイズ」を表示します。

基本的にはサイズは変更しなくても良いですが、「PC(960px以上)閲覧時」の「基本(Pタグ 他)」が 15pt、「H4タグ」が 16pt、「記事一覧」が 16pt と若干小さめなので、18pt ぐらいに大きくしても良さそうです。

※ Google の推奨するフォントのサイズは 16pt 以上と言われています。

ブログのタイトルを指定する

ブログのタイトルとキャッチフレーズの設定

WordPress の管理画面から「設定」→「一般」を選択し、「サイトのタイトル」と「キャッチフレーズ」を設定します。

まとめ

本気でブログ・サイト・アフィリエイトを取り組みたいなら、WordPress の優良テーマ「AFFINGER(アフィンガー)」がお勧めです。

AFFINGER(アフィンガー)インストール後の最初に行うデザインなどの設定を、本記事で手順を図解で紹介させていただきました。

  • カラーパターンを設定する
  • デザインパターンを設定する
  • 部品のデザインを行う(Hタグのデザインなど)
  • フォントサイズを設定する
  • ブログタイトルとキャッチフレーズを設定する

AFFINGER(アフィンガー)は、初心者でもオシャレなサイトを作ることができ、上級者になっても満足して使える優良なテーマです。

ぜひ活用ください。よければ、本サイトを経由してのご購入をお願いします。

ご協力のお願い

本サイトから購入していただければ、私の AFFINGER のテクニックを皆様へお伝えする記事作成のモチベーションが爆上がりします。本当にうれしいです。

これからも良い記事をたくさん書かせていただきたいと思いますので、ぜひご協力をお願いします

AFFINGER ご購入ページはこちら

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com