アフィリエイターのためのWordPressテーマ・ACTION/AFFINGER6。SEOでの実績、カスタマイズ性の豊かさ、豊富なエディター機能など優れた点が多数あります。
しかし、ほぼ唯一と言っていい弱点が「デフォルトでのデザイン性が低い」こと。今回はACTION/AFFINGER6のカスタマイズ性能の高さを生かして、デザイン性をググッとアップさせるこだわりの設定方法を３つご紹介します。
Hタグのカスタマイズ
まずは見出しとして機能するHタグの見栄えを変更していきます。デフォルトではこんな見た目になっています。
どう感じるでしょう？ 個人的にはイマイチだと思います。フォントサイズがあまり変わらないし、H2よりH3の方が背景がある分、目立っているようにも見える……。記事をスクロールするときH2の方が目立たないと読みにくいので、これをカスタマイズしていきます。
色とデザインの変更
まずはデザインそのものを変更します。
ここに複数の「H2タグの基本スタイル」が用意されているので、プレビューを見ながらよさそうなものを探します。
今回は、
- 吹き出しデザインに変更（※要背景色）
- テキストを中央寄せ
- デザインを幅一杯に
- 文字色を白に
というふうに変更しました。H2は本文中でいちばん大きな見出しなので、記事の横幅いっぱいに広げるとテキストの区切りが視覚的にわかりやすく、おすすめです。
次に、H3タグをこう変更します。
- 文字色を黒に
- 背景色と背景色（グラデーション上部）をそれぞれ別の薄いグリーンに
- ストライプデザインに変更
- テキストを中央寄せ
だいぶH2とH3の違いがはっきりし、見やすくなったのではないでしょうか。
フォントサイズ変更
フォントサイズにもH2とH3で差をつけましょう。
AFFINGER管理＞全体設定＞フォントのサイズ＞PC（960px以上）閲覧時
デフォルトではH2が「22px」、H3が「20px」となっていますが、H2を「28px」にします。
このようになりました。だいぶH2が目立ちます。
ただし、これだと少しバランスが悪いので、背景の吹き出しの縦幅を広げます。またデザイン変更で触った部分に戻ります。
ここで、「上下の余白（px）」を「18px」にします。
バランスが取れました。
HタグはSEOだけでなく視覚的にも重要になってきますので、こうしてカスタマイズしてH２を目立たせるとよいでしょう。バランスや色、デザインはいろいろいじって、しっくりくるデザインを見極めてください。
タイトル・ロゴ・キャッチコピーを中央表示
基本設定のままだと、アイコンロゴ画像・タイトル・キャッチフレーズはヘッダー部分の左側に寄っています。
このままでいい場合もありましょうが、背景画像によっては真ん中にしたいこともありますよね。次の箇所から変更を行います。
AFFINGER設定＞ヘッダー＞ヘッダーエリア
ここで「PCのみ」の「ヘッダーを分割しない」にチェックを入れてSave。そのあと、下の「ヘッダーエリアをセンタリング」にもチェックを入れてまたSave。これでアイコンロゴ画像・タイトル・キャッチフレーズとも中央表示になります。
右上に電話番号などを掲載するなら左寄せがいいですが、そうでないならこうして真ん中寄せしておく方がスッキリする場合が多いでしょう。
「お知らせ」の設定
「お知らせ」（News）とは、最新の投稿いくつかを１記事１行で乗せるウィジェットです。これを設定していきましょう。
使うのは「07_STINGERお知らせエリア」です。設置場所は「トップページ上部ウィジェット」がいいでしょう。
こうなりました。
「お知らせ」として新着記事があると常連さんにも親切ですし、デザイン的にも少し引き締まった印象になります。
ここで、「お知らせ」を「News」に変えてみましょう。
AFFINGER設定＞トップページ＞NEWS（お知らせ）の表示
「NEWS」と書き換えました。ウィジェット追加した場合は「お知らせをTOPページの一番上に表示する」にチェックは不要です。
必要であれば表示する件数なども調整しましょう。
さらに、日付のカラーを赤に変えます。
外観＞カスタマイズ＞オプション（その他）＞お知らせ
赤文字はページを開いたとたんに目に飛び込んできます。
これで完成です。
デザイン性向上はカスタム次第
ACTION/AFFINGER6は、初期設定ではデザインがイマイチです。個人的にはそう思います。
しかし、今回ご紹介したようなカスタマイズをほどこしていけば、どんなふうにも改造ができて、デザイン性をアップしていくことが可能です。ぜひ、細かいところまで触ってみて、納得のいくデザインを模索してみてください。
ACTION/AFFINGER6を特典教材付きで販売中です。