ブログ管理者バナーをプロっぽい感じに変更する［AFFINGER］

サイトをあちこち見ていると、ブログ管理者紹介バナーが素敵なブログを沢山みられます。

何だかブログ管理者紹介バナーだけでも凝っていると、それだけでプロっぽい感じ･･･。

実は、ワードプレステーマ「アフィンガー」では、ボタンをポチポチ押していくだけで、簡単に設定できます。

アフィンガーをお使いであれば、「サイト管理者紹介カード」として当たり前のように基本装備されているので、設定をしていきましょう。

（凝っている感がビシビシです。）

そもそもAFFINGERとは･･･

使い切れないほどのブログパーツが基本装備されていて、勝手にレスポンシブデザイン（考えなくてもPC、スマホ、タブレットに対応されている）、SEO対策（検索順位を上げる対策）もされている至れり尽くせりの、使っていて文句無しの有料ワードプレステーマ、それがAFFINGERです。

AFFINGER6［最新版］

ちなみに今回、AFFINGERのデザイン済みデータの「NOTE」での「サイト管理者紹介カード（バナー）」設定をご紹介しますが、AFFINGERのデザイン済みデータを使うと、あっという間にプロ仕様のレイアウトにする事が可能です。

＼ではAFFINGERの「サイト管理者紹介カード（バナー）」の設定方法をご説明。／

サイト管理者カード（バナー）のアバターを設定

まずは、サイト管理者のアバターを設定していきましょう。

もちろんご本人写真でもOKですし、あなたの代わりとしてサイトの顔となるアバターで問題ないです。

イラストもしくは写真を用意します。

サイト管理者（アバター）の画像を用意する

サイト管理者紹介カードに載せる、150px以上の正方形の画像を用意しておきます。

カスタマイズをクリック

ワードプレス左メニューの「外観」→「カスタマイズ」をクリック。

オプションカラー〜サイト管理者紹介をクリック

カスタマイズ左メニューの「［＋］オプションカラー」→「サイト管理者紹介（プロフィールカード）」をクリック。

アバター画像を選択する

サイト管理者設定の「アバター画像」項目の「画像を選択」をクリック。

先に用意しておいた、150px以上の正方形の写真（画像）を選択します。

プロフィールカードに変更する

「プロフィールカードに変更」にチェックを入れる。

サイト管理者のアバター画像が表示されます。

管理者バナー後ろの背景画像を設定する

アバターの背景になる画像を設定します。設定しなくてももちろんOKですが、簡単に設定できるで、試してみる価値はあり！です。

アバターの背景画像を用意する

アバターの背景になる画像を用意します。横型の写真が適しています。（※画像は基本500KB以下の画像サイズにします。）

背景画像を選択する

「サイト管理者紹介（プロフィールカード）」ページで、「ヘッダー画像（プロフィールカード）」項目の「画像を選択」をクリックして、用意した背景画像を選択する。

画像が設定できたら「公開」ボタンをクリック

アバター画像、アバターの背景になる画像の設定が終わったら、「サイト管理者紹介（プロフィールカード）」ページの左メニュー上部にある「公開」ボタンをクリックします。

プロフィールボタン、テキスト色を設定

プロフィールページにリンクする「プロフィールボタン」とテキストの色の設定です。

プロフィールボタンのURLを入れる

「ボタンURL」に、リンクする「プロフィールページ」URLを入れます。

（※自分でいうところの「https://nondori.com/nondori-design-profile/」です。）

ボタンに記載するボタン名を入れます。（例えば･･･プロフィールなど）

ボタンの色を変更する

ボタンの色を設定していきます。

今回は、AFFINGERデザイン済みデータ「NOTE」ベースのシック色にあわせて、グレー設定のボタンにしましたが、お好みで色を変更していきます。

プロフィールボタンを差し色として色を変えるのもいいと思いますし、「NOTE」ベース全体的の色を変えると、シックなイメージが、POPにも、キュートにも変わります。

テキストの色を変更する

サイト管理者紹介カードのテキストの色は変更できます。テキストの色とは、サイト管理者の名前のところです。

テキスト色（プロフィールカード）→今回設定した色は［濃いグレー「#515151」］です。

お好みで色を変えていきます。

ボタンの設定できたら「公開」ボタンをクリック

ボタンの色が設定が終わったら、「サイト管理者紹介（プロフィールカード）」画面の上にある、「公開」ボタンをクリックします。

これで、一連の「サイト管理者紹介（プロフィールカード）」の設定は終わりです。

まとめ

ブログ管理者紹介カード（バナー）は、AFFINGERであれば、画像を用意してポチポチとボタンを押していけば、すぐ「凝ってるな！」と思えるようなクォリティになります。

AFFINGERをお使いであれば、是非設定してみてください。

関連記事