アフィンガー５を導入してはや３ヶ月！当初は無料ブログのアメブロを利用していましたが、色々と制約もあることからワードプレスに変更しました。
変更したのはいいけれど、ワードプレス超初心者の私にとってはわからないことだらけでテーマ選びも一苦労！
結局、有料ではありますが、お金を払ってでもその性能に魅力を感じたアフィンガー５を購入しました。
ただ、超初心者の私にとっては、コレを使いこなすには少しハードルが高すぎた！
とにかく、どこに説明が書かれているのかがわからなくて、それだけで時間だけが過ぎていく。
さっき触ったボタンはどれだ？
コレか？コレか？コレか？
そんなことが何日も続き・・・
やっと探りあてても３日もたてばすっかり忘れてるありさま・・・(● ˃̶͈̀ロ˂̶͈́)੭ꠥ⁾⁾。
そんな訳で・・・
備忘録がわりに書いておこうと、ただただ綴っているブログです。
誰かの参考になれば幸いです♫
アフィンガー５のテーマの設定についてはこちらの公式ページを参照してください。
外観をカスタマイズしよう！
外観＞カスタマイズ＞サイト基本情報
まずはサイト基本情報を開き、なんのサイトなのかがわかるように、「サイトのタイトル」「キャッチフレーズ」を入力していきましょう！
サイトアイコンの設置
512×512ピクセルの画像を用意し、サイトアイコンを設置してみましょう！
サイトアイコンを設置すると、こちらの部分に反映されます！すぐにサイトを見つけられるのでオススメです！
※大きな画像を小さな画像にするのに、バナー工房で編集しました。
次はヘッダー画像の編集です。
ヘッダー画像をカスタマイズ
外観＞カスタマイズ＞ヘッダー画像
画像を用意したら、新規画像を追加を押して画像をアップロードしましょう。
ヘッダー画像の設定が終わったら、ヘッダーエリアにも画像を設定してみましょう！
ヘッダーエリアに画像を設定
外観＞カスタマイズ＞基本エリア設定＞ヘッダーエリア
ヘッダーエリア画像は高さ100〜150ピクセルの画像をアップロードするとキレイに収まります。
こんな風にできればOK！
フッターエリアに画像を設定
ヘッダーエリアと同じように、フッターエリアにも画像を設定してみましょう！
外観＞カスタマイズ＞基本エリア設定＞フッターエリア
このように表示されたらOK！
次にトップに戻るボタンを編集してみましょう！
トップに戻るボタンの設定
外観＞カスタマイズ＞[＋]オプションカラー＞
デフォルト
オリジナル
オリジナルのボタンができました！
バナーを作成する
タグ＞ボックスデザイン＞バナー風ボックス＞基本
そうすると、以下のようなショートコードが挿入されます。
ここに設定していきます。
背景画像にしたい画像のURLはメディアを追加ボタンで確認できます！
画像URLをコピーして閉じる。
画像URLをショートコードに挿入して完了！
こんな感じにできました！
画像のURLを「ビジュアルモード」で貼り付けると背景がグレーのままで画像が反映されなかったので、テキストモードにして貼り付けるとうまくいきました♫
テキストモードで誤って＜P>タグを消してしまうとコードが変わってしまい、正常にボタンデザインが反映されません。TinyMCE Advancedプラグインを使用して、「段落タグの保持」を有効化しておきましょう！
バナーボックスの中にカスタムボタンを挿入する
タグ＞ボックスデザイン＞バナー風ボックス＞基本
ここまでは同じ！
今回は、 幅をwidth"250"、高さをheight="200"にサイズを変更してみましょう！デフォルトではauteになっています。
カスタムボタンを挿入する
タグ＞カスタムボタン＞ノーマル＞（詳しくはこちら）オレンジ
次のようなカスタムボタンのショートコードが挿入されました。
カスタムボタンを挿入するときは、リンク先が重複するのでst-flexbox url=""にはリンク先URLを挿入しないでくださいね！
このようにできれば完成です！
【補足】ショートコードを理解する
| url | リンク先URLを記載します（例：https://sakurawoman.com） |
| title | ボタンのタイトルを挿入 |
| rel | nofollowを指定します（例：nofollow） |
| fontawesome | 前に表示するフォントアイコン（fontawesome4のクラス名を指定） |
| target | リンク先を新しいウィンドウで表示する場合（例：_blank） |
| color | 文字色をHTMLカラーコード（#で始まる６桁のカラーコード）で指定 |
| bgcolor | 背景色をHTMLカラーコード（#で始まる６桁のカラーコード）で指定 |
| bordercolor | 枠線色をHTMLカラーコード（#で始まる６桁のカラーコード）で指定 |
| borderwidth（px） | 枠線の幅を指定（例：16） |
| borderradius（px） | 枠線の丸みを指定（例：5） |
| fontsize（%） | 文字サイズを指定（例：120） |
| fontweight | 文字の太さを指定（例：bold） |
| width（%） | ボタンの長さを指定（例：80）※widthを指定しないと600px以上（PC閲覧時）は60%、未満（スマホ）は100%で表示 |
| fontawesome_after | 後に表示するフォントアイコン（fontawesome4のクラス名を指定） |
| ref | 「on」を設定することで光る演出が加わります（不要な場合は空で） |
| class | 任意のCSSクラスを付与します |
アバターの設定！
サイドバーにサイト管理者を設置する場合のアバターの設定について、アバターの設定をするにはWP User Avatarプラグインが必要になりますので、コチラのプラグインのところで説明しています。とりあえず、アバター設定用画像を用意しておいてくださいね。
こんな感じになります。
文章は、ユーザー＞あなたのプロフィールで設定しています。
