WING(Affinger5)

アフィンガー5のサイトデザイン設定方法!初心者用の一番カンタンな手順

アフィンガーサイトデザイン初心者

アフィンガー5(WING)の初心者の方向けマニュアル!今回はサイトのデザイン編です。

アフィンガー5はすごく多機能なテーマなので、こだわればいくらでも凝ったデザインにしていくことは可能。

ただサイトを見に来る人の大半は、貴方のサイトのデザインを見に来るわけではなく、作ったコンテンツの中身を見に来ています。

最初から見込み客がいるようなサイトを立ち上げる場合を除き、デザインに時間をかけるよりまずはコンテンツに時間をかけて充実させ、seo評価を上げていくのを優先するのがベター。

この記事では上記の主旨に沿って、アフィンガー5を使い始めたばかりの方向けに

  •  とりあえず見られるレベルのサイトデザインを、手間なくカンタンに

カスタマイズする方法を紹介していきます。

 

マストツール!な商品紹介リンク

あなたのサイトで商品を紹介するのに、こんなリンクを作成して使ってみたくありませんか?

手間なくカンタンに、無料ツールで作れる方法を下記のページで解説しています!

必須!
amazon 楽天 yahoo 商品リンク ブログ
ブログにアマゾン・楽天・ヤフーの商品紹介リンクを貼る一番ラクな方法

この記事は 「Amazonや楽天、Yahooショッピングの商品リンクを、自分のブログやサイトに、手軽かつスマートに設置したい!」方向けのまとめになります。 リンク一つ作るのにも、使うツールが良くないと ...

続きを見る

テーマのインストール、反映直後の設定・準備 

アフィンガー5をインストールしてテーマを反映したところから説明していきます。まず最初のサイト画面は下記のようになっていると思います。

この無の状態から、とりあえずそこそこの見栄えがするデザインを構築していきます。

 

アフィンガーデザイン1

 

 

サイト全体のおおまかな色・デザインパターンを決める

まずサイト全体のおおまかな色・デザインパターンを決めてしまいます。

公式マニュアルにも載っていますが、左サイドバー「Affinger5管理」⇒「デザイン」をクリックしてデザイン設定画面へ行き、カラーパターンとデザインパターンの設定をします。

 

アフィンガーデザイン2

 

何種類かありますが、特にこだわりがなく決められないのであれば

  • カラーパターン
    ⇒青「ビジネス」
  •  デザインパターン
    ⇒ブログ(初心者おすすめ)

がオススメです。

そうすると全体カラーとデザインが反映されて、トップ画面が下記のように変わります。

 

アフィンガーデザイン4

 

<事前準備①>不要なサイドバー項目の削除 

サイト全体のカラーとデザインパターンを決めたところで、次に細部をいじる前の事前準備をします。

初期設定で、サイドバーの画面には「最近の投稿」「最近のコメント」などの項目が並んでいます。ただ、「メタ情報」など明らかに不要なものもあるので不要なものは削除してしまいましょう。

 

アフィンガーデザイン15

 

ちなみに、サイドバーで表示されている画面は「サイドバーウィジェット」と呼ばれる部分。

 

初期設定ではスマホで見た時の最下部に表示される画面でもあります!

 

サイドバーウィジェットの項目の編集は、カスタマイズ画面の「ウィジェット」⇒「サイドバーウィジェット」から可能です。

 

アフィンガーデザイン16

 

不要な項目を「削除」選択すると削除できます。

 

「アーカイブ」「メタ情報」は通常必要ありません。また、「最近のコメント」も不要な場合は削除してしまいましょう!

 

アフィンガーデザイン17

 

ちなみにこの事前準備①が終わった段階で、超シンプルではあるものの、サイトとしての一応の体裁は整います。

なのでとりあえずこの表示で満足!という方はそのままどんどん記事を書き始めるのもアリです。

記事の書き方参考リンク

アフィンガー5初心者向け使い方マニュアル【記事の書き方・投稿編】

WING(アフィンガー5)初心者向け使い方マニュアル、今回はいよいよ本題とも言える、記事の書き方編です。 WINGではどのように記事を書いていけばいいの?各画面の役割は?というあたりを順を追って解説し ...

続きを見る

 

ただ、あまりにも味気なさすぎるから、もう少しカスタマイズしたい・・、邪魔なヘッダー画像とかも何とかしたい・・という方は下記を引き続きご参考ください。

 

<事前準備②>サイトデザイン用の記事作成 

次に

 

  • H2~H6の見出しタグ 
  • 会話吹き出しのデザイン8種類

 

という記事内パーツのデザインカスタマイズをするための事前準備として、記事を一つ投稿しましょう。

左サイドバー「投稿」⇒「新規追加」から新規記事を作成します。デザイン用というだけの記事なので、とりあえずタイトルとパーマリンクは何でもOK。タイトル欄に「サンプル記事」と入力します。

記事本文には、下記をコピペして「テキストエディタ画面」に貼り付けてください。

ココに注意

上記記事は、Classic Editorの記事投稿画面に出てくる「ビジュアルエディタ」ではなく「テキストエディタ」の方に貼り付けてご使用ください。

そして右サイドバーの「公開」で記事を投稿します。

サンプル記事をサイトで見てみると、下記のような感じで表示されます。

 

アフィンガーデザイン18

 

この記事を、後ほどの「記事内パーツカスタマイズ」で使用していきます。

 

サイト内の各パーツカスタマイズ方法

ではここからはサイトで使われる主なパーツのカスタマイズを進めていきます。

アフィンガーのサイトをカスタマイズする方法

アフィンガー5(WING)ではデザインカスタマイズ画面にアクセスすることで

  • 色の細かな調整 
  • 線の太さや色の調整 
  • 背景画像の設定 

などなど、サイトの細部に至るまでのカスタマイズをライブプレビューでリアルタイムに確認しながらできるようになっています。

 

実際のサイトを見ながら調整できるので、とても使いやすいですよ!

 

カスタマイズ画面には、「外観」⇒「カスタマイズ」からたどり着くことができます。

アフィンガーデザイン6

 

サイト内各パーツのカスタマイズ  

サイト内の各パーツを、どこからカスタマイズしに行けるのか?を紹介していきます。

 

ヘッダーエリア 

ヘッダーエリアのカスタマイズは「基本エリア設定」⇒「ヘッダーエリア」からできます。

アフィンガーデザイン8

 

テーマ導入直後のおおまかなサイトデザインとして色を青にしましたが、単色で味気ないのでもう少し加工をくわえてグラデ―ションを入れてみます。

カスタマイズは

  • 「背景色」の変更 
  • 「背景色(グラデーション上部)」の変更
  • 「グラデ―ションを横向きにする」にチェック 

で可能です。テストも兼ねて、まったくテイストの違う黄色系にしてみます。

 

アフィンガーデザイン9

 

色は自分のお好みに変更可能です!

 

上部メニュー 

ヘッダーエリアの下の「上部メニュー」は「メニューのカラー設定」⇒「PCヘッダーメニュー」から変えられます。

 

アフィンガーデザイン10

 

先の「ヘッダ―エリア」と同じようにカスタマイズもできますし、もちろん違うカスタマイズも可能。ヘッダーエリアに合わせるのであれば、同じ色を選んでいって「グラデーションを横向きにする」にチェックします。

 

アフィンガーデザイン11

 

背景色だけじゃなく、文字や線の色も変更できますよ~

 

ヘッダー画像 

サイトのトップに入れる画像。初期設定だとWINGのロゴが設定されています。

ヘッダー画像のカスタマイズは「ヘッダー画像」にてできます。

 

アフィンガーデザイン12

 

とりあえずはヘッダー画像は消しておくのが手っ取り早いので「画像の非表示」を選択しておきます。

すると、下記のようにヘッダー画像が表示されなくなります。

 

アフィンガーデザイン13

 

フッターエリア 

サイトページ最下部のフッターは「基本エリア設定」⇒「フッターエリア」から変更可能。

変更方法は先ほどの「ヘッダーエリア」、「上部メニュー」と同じになります。

アフィンガーデザイン14

 

サイドバーエリア 

サイドバーのエリアは、設置するパーツによってカスタマイズする画面が分かれます。

事前準備①で項目を整理したサイドバーウィジェットのカスタマイズは「各テキストとhタグ(見出し)」⇒「ウィジェットタイトル(サイドバー)」からできます。

「最近の投稿」「カテゴリー」の文字色を黒に、ボーダー色を赤にカスタマイズするとこんな感じになります。

 

アフィンガーデザイン19

 

見出しタグH2,H3,H4・・ 

次に記事内で使う見出しタグのカスタマイズをします。

 

 

ここで、事前準備②で準備したサンプル記事をいよいよ使います!

 

カスタマイズのプレビュー画面で表示されている「サンプル記事」をクリックします。

 

アフィンガーデザイン20

 

そうすると、H2~H6タグが並んで出てきますので、これを自分好みにカスタマイズしていきましょう。

見出しタグへは「各テキストとhタグ(見出し)」から「H2~H6」のタグが選択できます。タグを選択してから下の方へスクロールしていくと、基本スタイルが選択できます。

まずそこから好みのスタイルへ変更、その後に細かな調整をしていくのがオススメです。

 

アフィンガーデザイン21

 

注意点として、H2~H6タグは全て別々のデザインとしておいた方が良いです。

これは見た目の問題もありますが、何より自分が記事を作成している時に

 

あれ!?これH2だったけ?それともH4?

 

とか混乱してしまうからです。見出しタグを適切に使うのはseo的にも重要とされていますので考慮しておいた方がベターです。

 

会話吹き出しの設定 

見出しタグの設定が終わったら、サンプル記事を引き続き使いながら「会話吹き出し」の設定をします。

 

ここまでも散々登場している

 

こういうのとか
こういうやつのことです!

 

カスタマイズは「オプションカラー」の「会話風吹き出し」で行えます。

 

アフィンガーデザイン22

 

こちらも吹き出し部分を塗り潰したり、中抜きにしたりと色々なカスタマイズが可能です。

 

会話吹き出しの画像設定 

上記は吹き出し部分のデザインカスタマイズでしたが、画像をどのように設定するのか?も紹介します。

画像は「Affinger5管理」⇒「会話・ファビコン等」から設定できます。

アイコン画像を設定して、自分のpc上にある使いたいデータをアップロードしましょう。

 

アフィンガーデザイン23

 

ちなみにアップロード画像のトリミングなど、カンタンなカスタマイズならアップロード時の画面で対応可能です。

 

アフィンガーデザイン25

 

適応が完了して下の「保存」をクリックしてからサンプル記事を確認すると、アップロードした会話画像は、下の画面のように表示されます。

 

アフィンガーデザイン26

 

マストツール!な商品紹介リンク

あなたのサイトで商品を紹介するのに、こんなリンクを作成して使ってみたくありませんか?

手間なくカンタンに、無料ツールで作れる方法を下記のページで解説しています!

必須!
amazon 楽天 yahoo 商品リンク ブログ
ブログにアマゾン・楽天・ヤフーの商品紹介リンクを貼る一番ラクな方法

この記事は 「Amazonや楽天、Yahooショッピングの商品リンクを、自分のブログやサイトに、手軽かつスマートに設置したい!」方向けのまとめになります。 リンク一つ作るのにも、使うツールが良くないと ...

続きを見る

アフィンガー5初心者向け使い方マニュアル【記事の書き方・投稿編】

WING(アフィンガー5)初心者向け使い方マニュアル、今回はいよいよ本題とも言える、記事の書き方編です。 WINGではどのように記事を書いていけばいいの?各画面の役割は?というあたりを順を追って解説し ...

続きを見る

【初心者向けおすすめプラグイン】アフィンガー5(WING)を使いこなす!

WING(アフィンガー5)は、操作の丁寧な解説がされた公式マニュアルが用意されています。 なので購入後も、マニュアルを見ながら設定・編集していけば充分に使うことが可能!ですが、ワードプレス初心者の方に ...

続きを見る

 

-WING(Affinger5)
-,

© 2020 Affingerの教科書 Powered by AFFINGER5