0からのワードプレス記事副業

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

ブログ管理者紹介バナーをプロっぽく変更1

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

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

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

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

(凝っている感がビシビシです。)

 

そもそもAFFINGERとは・・・

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

[AFFINGER6ー使える特典付]HP知識0からでもできる!簡単オシャレでプロっぽいブログに

続きを見る

AFFINGER6[最新版]

 

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

 

\ではAFFINGERの「サイト管理者紹介カード(バナー)」の設定方法をご説明。/

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

ブログ管理者紹介バナーをプロっぽく変更2

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

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

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

 

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

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

 

カスタマイズをクリック

ブログ管理者紹介バナーをプロっぽく変更3

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

 

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

ブログ管理者紹介バナーをプロっぽく変更4

カスタマイズ左メニューの「[+]オプションカラー」→「サイト管理者紹介(プロフィールカード)」をクリック。

 

アバター画像を選択する

ブログ管理者紹介バナーをプロっぽく変更5

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

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

 

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

ブログ管理者紹介バナーをプロっぽく変更6

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

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

 

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

ブログ管理者紹介バナーをプロっぽく変更7-1

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

 

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

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

 

背景画像を選択する

ブログ管理者紹介バナーをプロっぽく変更7

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

参考

「サイト管理者紹介(プロフィールカード)」ページまでの行き方は本記事の「2〜5」までをご確認ください。

 

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

ブログ管理者紹介バナーをプロっぽく変更8

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

 

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

ブログ管理者紹介バナーをプロっぽく変更9

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

 

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

ブログ管理者紹介バナーをプロっぽく変更10
「ボタンURL」に、リンクする「プロフィールページ」URLを入れます。

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

参考

「プロフィールページ」を設定していない場合は、仮にTOPページのURLを入れておきましょう。(「自分でいうところの「https://nondori.work」」です。)

プロフィールページができたら、プロフィールページのURLを入れていきます。

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

 

ボタンの色を変更する

ブログ管理者紹介バナーをプロっぽく変更11

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

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

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

参考

ちなみに今回設定している、グレー設定はこちら↓

  1. 「ボタンテキスト」色→白「#ffffff」
  2. ボタン上部背景色(プロフィールカード)→濃いグレー「#595959」
  3. ボタン下部背景色(プロフィールカード)→濃いグレー「#595959」
  4. ボタン影色(プロフィールカード)→もっと濃いグレー「#262626」

 

テキストの色を変更する

ブログ管理者紹介バナーをプロっぽく変更12

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

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

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

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

ブログ管理者紹介バナーをプロっぽく変更13

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

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

 

まとめ

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

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

 

関連記事
おすすめヘッダーカードの設定方法1
カテゴリーバナー(おすすめヘッダーカード)の設定方法[AFFINGER]

続きを見る

目立つボタン-mcボタンの作り方
目立つボタン「アフィンガー」のキラッと光るMCボタンの作り方

続きを見る

スポンサーリンク

-0からのワードプレス記事副業
-,