AFFINGER6といえばWordPressのテーマとしては知らない人はいないというくらい有名なテーマで沢山のブロガーが使っているテーマですよね。
僕もAFFINGER6を使っているのですが全般的にAFFINGERはめちゃめちゃお固いデザインの雰囲気があるテーマです。
そこで今回はSEOやアフィリエイトには強いのはいいがデザインが微妙という方に向けて誰でもできるAFFINGERの雰囲気を柔らかくカスタマイズ方法をご紹介いたします。
AFFINGERを柔らかくするにはトップページを変えるべし！
そもそもサイトに訪問してくれる読者の皆さんはトップページを見に行くことが多いと思います。もしトップページが微妙なサイトだったら読者は稼ぎ頭である記事を読まずにサイトを離脱してしまいます。
それを防ぐためにどうすればいいか？そうトップページをオシャレにする必要があります！！しかしどのようにすればいいのかいいかわからない人が多いと思いますが簡単です。有名なブログを丸パクリすれば解決です。
我々底辺ブロガーは最短で底辺を抜け出すためには他のサイトを徹底的にパクるということが大切です。（内容までパクるのはダメ）
『マクリン』より引用
僕の場合は、大手ガジェットメディアである『マクリン』さんのトップページをパクりました。上の画像を見ていてただければわかると思いますがヘッダー部分に検索ボックスがあるのはとっても便利で使いやすそうだなと感じます。
しかしこのサイト使っているテーマは『SWELL』なのでAFFINGERでも似たようなサイトを作れるのではないか？と考え作ったのでその方法を紹介していきたいと思います。
ヘッダーを整理しよう
まず、ヘッダーを整理することが大切です。いわゆる基盤固めの段階ですね。こちらはわかりやすくセクションごとで解説していきます。
ヘッダー画像を設定する
ヘッダー画像というのは四角で囲っているガジェットの写真の部分です。ここが基本的に背景になります。
設定する画面のアクセス方法はカスタマイズ＞ヘッダー画像です。
・ヘッダー画像の横幅を100%にする
・ヘッダー画像エリア最低の高さ（px）：500px
・スマホ（599px以下）※高さを分ける場合：340px
・ヘッダー画像の背景画像：自分の好きな写真を選択
・背景画像の横位置：真ん中
・背景画像の縦位置：真ん中
・
・パララックス（視差効果）風にする ※PCのみ
上のように設定すれば基本的に大丈夫です。あとは自身の好みのように値を変更したりしてください。
ヘッダー部分を変更する
ヘッダーの高さや色を変更していきます。ヘッダーというのは上の画像でいう矢印の付いている青い部分です。
基本的にこの場所ではロゴを表示させたりメニューを表示させたりやろうと思えば検索ボックスなどを表示させることができます。ここでは上のような物を目指して設定していきます。
カスマイズ＞基本エリア設定＞headerエリア
・背景色：任意の色
・背景画像の範囲：デフォルト
。背景画像の横位置：真ん中
・背景画像の縦位置：真ん中
・背景画像を幅100%のレスポンシブにする
これでPCはできるのですがスマホで表示させると高さが少し高いのでそちらを調整していきます。
設定＞AFFINGER管理＞ヘッダーに飛んでもらいスマホのヘッダー高さを60pxと自分の好きなような高さに変更してください。
これで、ヘッター部分の調整はおしまいです。
検索ボックスを表示させる要素を追加しよう
実はAFFINGERには便利なショートコードがあります。それが検索ショートコードです。これを入力するだけで検索ボックスを実装することができます。
shortcode
[検索]
上記のショートコードを入力することで検索ボックスを表示させることができます。
内容を記述しよう
まずはヘッダーに表示させたい要素を書いていこう。
設定＞AFFINGER管理＞ヘッダー＞ヘッダーコンテンツ管理に飛び自分が追加させたい要素を記述してください。僕の場合は以下のコードを実装しました。
shortcode
[st-designfont myclass="" webicon="" fontsize="200" fontweight="bold" color="#fff" textshadow="#424242" webfont="on" margin="0 0 5px 0"]スマホとガジェットであなたの生活を豊かに。[/st-designfont]
[st-designfont myclass="" webicon="" fontsize="130" fontweight="normal" color="#fff" webfont="on" margin="0 0 0px 0"]＼ ガジェットやSIMを検索する ／[/st-designfont]
[検索]
これを入力することですることで検索ボックスやテキストを実装することができます。もちろん他のショートコードを入れたりHTMLで記述することもできるので自由度が高いです。
検索ボックスを調整しよう
入力後トップページを見ればわかると思いますが検索ボックスがめちゃめちゃ横長になってしまっているのでCSSを使って調整していきます。
カスタマイズ＞追加CSSに飛び下と同じように記述します。
CSS
/*検索ボックスCSS*/
.search-custom-d{
max-width: 20%;align-content
}
@media screen and (max-width: 500px){
.search-custom-d {
max-width: 90%;
}
@media screen and (max-width: 1020px){
.search-custom-d {
max-width: 90%;
}
上記のコードをコピペすることで位置を調整することができます。もし長さなどを変えたかったら値を変更すればいいのでやってみてください。
検索ボックスのデザインを変えよう
これで最後です。最後は検索ボックスのデザインを変えることでより明るい感じに変更することができます。
カスタマイズ＞オプション（その他）＞検索フォームに飛んでもらうと上記の設定に飛びます。
そしたら自分の好みのデザインにして終了です。僕的には四角よりも丸のほうがポップな印象を与えることができるのではないと思います。
AFFINGERのデザインは無限大
今回はトップページのヘッダー部分をカスタマイズする記事でした。
巷ではAFFINGER6はお固いテーマだと言われていますがカスタマイズすればいくらでもポップなテーマになりますし明るいテーマにすることができます。
AFFINGER6はSEOにもめちゃめちゃ強いのでぜひ使ってみてはどうでしょうか？ここまで読んで頂きありがとうございました。
SEOに強いアフィリエイター向けテーマ
