アフィンガー5を導入してはや3ヶ月!当初は無料ブログのアメブロを利用していましたが、色々と制約もあることからワードプレスに変更しました。
変更したのはいいけれど、ワードプレス超初心者の私にとってはわからないことだらけでテーマ選びも一苦労!
結局、有料ではありますが、お金を払ってでもその性能に魅力を感じたアフィンガー5を購入しました。
ただ、超初心者の私にとっては、コレを使いこなすには少しハードルが高すぎた!
とにかく、どこに説明が書かれているのかがわからなくて、それだけで時間だけが過ぎていく。
さっき触ったボタンはどれだ?
コレか?コレか?コレか?
そんなことが何日も続き・・・
やっと探りあてても3日もたてばすっかり忘れてるありさま・・・(● ˃̶͈̀ロ˂̶͈́)੭ꠥ⁾⁾。
そんな訳で・・・
備忘録がわりに書いておこうと、ただただ綴っているブログです。
誰かの参考になれば幸いです♫
アフィンガー5のテーマの設定についてはこちらの公式ページを参照してください。
外観をカスタマイズしよう!
外観>カスタマイズ>サイト基本情報
まずはサイト基本情報を開き、なんのサイトなのかがわかるように、「サイトのタイトル」「キャッチフレーズ」を入力していきましょう!
サイトアイコンの設置
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カラーコード(#で始まる6桁のカラーコード)で指定 |
bgcolor | 背景色をHTMLカラーコード(#で始まる6桁のカラーコード)で指定 |
bordercolor | 枠線色をHTMLカラーコード(#で始まる6桁のカラーコード)で指定 |
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プラグインが必要になりますので、コチラのプラグインのところで説明しています。とりあえず、アバター設定用画像を用意しておいてくださいね。
こんな感じになります。
文章は、ユーザー>あなたのプロフィールで設定しています。