AFFINGER紹介

【アフィンガー】初期設定、最初にやるデザイン(初心者向け図解で手順を完全案内)

広告:ページ内にてアフィリエイト広告を利用しています。

初期設定、最初にやるデザイン

WordPress を導入してブログが始められる状況になりました。テーマ「AFFINGER」を導入してサイトをデザインしていきましょう。

ポイント

本記事では、

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

AFFINGER を使って、素敵なサイトを作りましょう!

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

AFFINGER の購入・導入方法はこちら

\ AFFINGER でオシャレなサイトを作る方法は こちら

【サンプルあり】アフィンガーでおしゃれなサイト・トップページを作る方法!デモサイトも紹介

ブロガー必見!WordPressテーマ「AFFINGER(アフィンガー)」で簡単に作るオシャレなサイト。AFFINGERならあなたもオリジナリティ溢れるサイトを手軽に作れます。ここではAFFINGERの魅力満載のサンプル(デモサイト)をご紹介し、さらにオシャレサイトの作り方も詳しく解説します。ワクワクするAFFINGERの世界へ一緒に飛び込みましょう!

続きを見る

初期設定、全体のデザイン
記事の書き方、使い方
サイドバーをデザインする
トップページをデザインする
ヘッダー、フッター、設定する
ファビコンを設定する
PR

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

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

AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

PR

まとめ:初期設定、最初にやるデザイン

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

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

ポイント

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

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

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR
AFFINGER TAG MANAGER
PR
AFFINGER TAG MANAGER
  • サイト全体と記事ごとのアクセス推移
  • ユーザーの導線の確認
  • 人気記事の把握
  • アクセス元の把握
  • リンクや広告の効果測定(表示回数 / クリック数)
  • クリックされた記事の把握
PR

\気になったら、とりあえず見てみよう/

詳しく見る

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

PR
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記