佐倉 咲の暮らしのチャンネルサイトです!

咲チャンネル!

アフィンガー5

超初心者のためのアフィンガー5の歩き方!外観をカスタマイズする!

更新日:

アフィンガー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プラグインが必要になりますので、コチラのプラグインのところで説明しています。とりあえず、アバター設定用画像を用意しておいてくださいね。

 

こんな感じになります。

文章は、ユーザー>あなたのプロフィールで設定しています。

 

 

-アフィンガー5
-,

Copyright© 咲チャンネル! , 2019 All Rights Reserved.