アフィンガー6（ACTION）の初心者の方向けマニュアル！今回はサイトのデザイン編です。
アフィンガー6はすごく多機能なテーマなので、こだわればいくらでも凝ったデザインにしていくことは可能。
ただサイトを見に来る人の大半は、貴方のサイトのデザインを見に来るわけではなく、作ったコンテンツの中身を見に来ています。
最初から見込み客がいるようなサイトを立ち上げる場合を除き、デザインに時間をかけるよりまずはコンテンツに時間をかけて充実させ、seo評価を上げていくのを優先するのがベター。
この記事では上記の主旨に沿って、アフィンガー6を使い始めたばかりの方向けに
- とりあえず見られるレベルのサイトデザインを、手間なくカンタンに
カスタマイズする方法を紹介していきます。
マストツール！な商品紹介リンク
あなたのサイトで商品を紹介するのに、こんなリンクを作成して使ってみたくありませんか？
手間なくカンタンに、無料ツールで作れる方法を下記のページで解説しています！
-
-
ブログにアマゾン・楽天・ヤフーの商品紹介リンクを貼る一番ラクな方法
この記事は 「Amazonや楽天、Yahooショッピングの商品リンクを、自分のブログやサイトに、手軽かつスマートに設置したい！」方向けのまとめになります。 リンク一つ作るのにも、使うツールが良くないと ...
続きを見る
テーマのインストール、反映直後の設定・準備
アフィンガー6をインストールしてテーマを反映したところから説明していきます。まず最初のサイト画面は下記のような感じになっていると思います。
この無の状態から、とりあえずそこそこの見栄えがするデザインを構築していきます。
サイト全体のおおまかな色・デザインパターンを決める
まずサイト全体のおおまかな色・デザインパターンを決めてしまいます。
公式マニュアルにも載っていますが、左サイドバー「Affinger管理」⇒「デザイン」をクリックしてデザイン設定画面へ行き、カラーパターンとデザインパターンの設定をします。
何種類かありますが、特にこだわりがなく決められないのであれば
- カラーパターン
⇒青「ビジネス」 - デザインパターン
⇒ブログ（初心者おすすめ）
がオススメです。
そうすると全体カラーとデザインが反映されて、トップ画面が下記のように変わります。
＜事前準備①＞不要なサイドバー項目の削除
サイト全体のカラーとデザインパターンを決めたところで、次に細部をいじる前の事前準備をします。
初期設定で、サイドバーの画面には「最近の投稿」「最近のコメント」などの項目が並んでいます。ただ、「メタ情報」など明らかに不要なものもあるので不要なものは削除してしまいましょう。
ちなみに、サイドバーで表示されている画面は「サイドバーウィジェット」と呼ばれる部分。
サイドバーウィジェットの項目の編集は、カスタマイズ画面の「ウィジェット」⇒「サイドバーウィジェット」から可能です。
不要な項目を「削除」選択すると削除できます。
ちなみにこの事前準備①が終わった段階で、超シンプルではあるものの、サイトとしての一応の体裁は整います。
なのでとりあえずこの表示で満足！という方はそのままどんどん記事を書き始めるのもアリです。
記事の書き方参考リンク
-
-
アフィンガー6初心者向け使い方マニュアル【記事の書き方・投稿編】
ACTION（アフィンガー6）初心者向け使い方マニュアル、今回はいよいよ本題とも言える、記事の書き方編です。 ACTIONはどのように記事を書いていけばいいの？各画面の役割は？というあたりを順を追って ...
続きを見る
ただ、あまりにも味気なさすぎるから、もう少しカスタマイズしたい・・、邪魔なヘッダー画像とかも何とかしたい・・という方は下記を引き続きご参考ください。
＜事前準備②＞サイトデザイン用の記事作成
次に
- H2～H6の見出しタグ
- 会話吹き出しのデザイン8種類
という記事内パーツのデザインカスタマイズをするための事前準備として、記事を一つ投稿しましょう。
左サイドバー「投稿」⇒「新規追加」から新規記事を作成します。デザイン用というだけの記事なので、とりあえずタイトルとパーマリンクは何でもOK。タイトル欄に「サンプル記事」と入力します。
記事本文には、下記をコピペして「テキストエディタ画面」に貼り付けてください。
<h2>H2</h2> <p>H2の記事<br /> H2の記事</p> <h3>H3</h3> <p>H3の記事<br /> H3の記事</p> <h4>H4</h4> <p>H4の記事<br /> H4の記事</p> <h5>H5</h5> <p>H5の記事<br /> H5の記事</p> <h6>H6</h6> <p>H6の記事<br /> H6の記事</p> <p></p> <p>夫吹き出しタグ1</p> <p>妻吹き出しタグ2</p> <p>こどもズ吹き出しタグ3</p> <p>じじばば吹き出しタグ4</p> <p>吹き出しタグ5</p> <p>吹き出しタグ6</p> <p>吹き出しタグ7</p>吹き出しタグ8
ココに注意
上記記事は、Classic Editorの記事投稿画面に出てくる「ビジュアルエディタ」ではなく「テキストエディタ」の方に貼り付けてご使用ください。
そして右サイドバーの「公開」で記事を投稿します。
サンプル記事をサイトで見てみると、下記のような感じで表示されます。
この記事を、後ほどの「記事内パーツカスタマイズ」で使用していきます。
サイト内の各パーツカスタマイズ方法
ではここからはサイトで使われる主なパーツのカスタマイズを進めていきます。
アフィンガーのサイトをカスタマイズする方法
アフィンガー5（WING）ではデザインカスタマイズ画面にアクセスすることで
- 色の細かな調整
- 線の太さや色の調整
- 背景画像の設定
などなど、サイトの細部に至るまでのカスタマイズをライブプレビューでリアルタイムに確認しながらできるようになっています。
カスタマイズ画面には、「外観」⇒「カスタマイズ」からたどり着くことができます。
サイト内各パーツのカスタマイズ
サイト内の各パーツを、どこからカスタマイズしに行けるのか？を紹介していきます。
ヘッダーエリア
ヘッダーエリアのカスタマイズは「基本エリア設定」⇒「ヘッダーエリア」からできます。
テーマ導入直後のおおまかなサイトデザインとして色を青にしましたが、単色で味気ないのでもう少し加工をくわえてグラデ―ションを入れてみます。
カスタマイズは
- 「背景色」の変更
- 「背景色（グラデーション上部）」の変更
- 「グラデ―ションを横向きにする」にチェック
で可能です。テストも兼ねて、まったくテイストの違う黄色系にしてみます。
上部メニュー
ヘッダーエリアの下の「上部メニュー」は「各メニュー設定」⇒「PCヘッダーメニュー」から変えられます。
先の「ヘッダ―エリア」と同じようにカスタマイズもできますし、もちろん違うカスタマイズも可能。ヘッダーエリアに合わせるのであれば、同じ色を選んでいって「グラデーションを横向きにする」にチェックします。
ヘッダー画像
サイトのトップに入れる画像。初期設定だとWINGのロゴが設定されています。
ヘッダー画像のカスタマイズは「ヘッダー画像」にてできます。
とりあえずはヘッダー画像は消しておくのが手っ取り早いので「画像の非表示」を選択しておきます。
すると、下記のようにヘッダー画像が表示されなくなります。
フッターエリア
サイトページ最下部のフッターは「基本エリア設定」⇒「フッターエリア」から変更可能。
変更方法は先ほどの「ヘッダーエリア」、「上部メニュー」と同じになります。
サイドバーエリア
サイドバーのエリアは、設置するパーツによってカスタマイズする画面が分かれます。
事前準備①で項目を整理したサイドバーウィジェットのカスタマイズは「各テキストとhタグ（見出し）」⇒「ウィジェットタイトル（サイドバー）」からできます。
「最近の投稿」「カテゴリー」の文字色を黒に、ボーダー色を赤にカスタマイズするとこんな感じになります。
見出しタグH2,H3,H4・・
次に記事内で使う見出しタグのカスタマイズをします。
カスタマイズのプレビュー画面で表示されている「サンプル記事」をクリックします。
そうすると、H2～H6タグが並んで出てきますので、これを自分好みにカスタマイズしていきましょう。
見出しタグへは「各テキストとhタグ（見出し）」から「H2～H6」のタグが選択できます。タグを選択してから下の方へスクロールしていくと、基本スタイルが選択できます。
まずそこから好みのスタイルへ変更、その後に細かな調整をしていくのがオススメです。
注意点として、H2～H6タグは全て別々のデザインとしておいた方が良いです。
これは見た目の問題もありますが、何より自分が記事を作成している時に
とか混乱してしまうからです。見出しタグを適切に使うのはseo的にも重要とされていますので考慮しておいた方がベターです。
会話吹き出しの設定
見出しタグの設定が終わったら、サンプル記事を引き続き使いながら「会話吹き出し」の設定をします。
ここまでも散々登場している
カスタマイズは「オプションカラー」の「会話風吹き出し」で行えます。
こちらも吹き出し部分を塗り潰したり、中抜きにしたりと色々なカスタマイズが可能です。
会話吹き出しの画像設定
上記は吹き出し部分のデザインカスタマイズでしたが、画像をどのように設定するのか？も紹介します。
画像は「Affinger管理」⇒「会話・ファビコン等」から設定できます。
アイコン画像を設定して、自分のpc上にある使いたいデータをアップロードしましょう。
ちなみにアップロード画像のトリミングなど、カンタンなカスタマイズならアップロード時の画面で対応可能です。
適応が完了して下の「保存」をクリックしてからサンプル記事を確認すると、アップロードした会話画像は、下の画面のように表示されます。
Amazonアソシエイト審査通過できない方へ！
Amazonの商品を紹介したいのに、審査がいつまでたっても通過せずウンザリ・・
そんな貴方への解決策！
カンタンに審査通過できるだけじゃなく、こんなリンクもカンタンに作れちゃいますよ～
-
-
Amazonアソシエイトの審査に受からない方へ！ベストな代替策教えます
この記事は、「Amazonとかのネット通販商品を、手間なく格好良く紹介したい！」のに Amazonアソシエイトの審査に全然通らない・・！ Amazonアソシエイトの新規ルール(3件発生後 ...
続きを見る
-
-
アフィンガー6初心者向け使い方マニュアル【記事の書き方・投稿編】
ACTION（アフィンガー6）初心者向け使い方マニュアル、今回はいよいよ本題とも言える、記事の書き方編です。 ACTIONはどのように記事を書いていけばいいの？各画面の役割は？というあたりを順を追って ...
続きを見る
-
-
【初心者向けおすすめプラグイン】アフィンガー5(WING)を使いこなす！
WING（アフィンガー５）は、操作の丁寧な解説がされた公式マニュアルが用意されています。 なので購入後も、マニュアルを見ながら設定・編集していけば充分に使うことが可能！ですが、ワードプレス初心者の方に ...
続きを見る
