あずきです🐥
このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…
プロフィール用ボックス
の作り方について、ブログ初心者さん向けに1から解説していきます
具体的な設置エリアとしては…
- 「ウィジェット」に設置するプロフィール(例:サイドバー)
- 「記事内」に設置するプロフィール(例:導入文の末尾)
主にこの2ヶ所を想定してます
「AFFINGER5」は装飾パーツが豊富でいろんなボックスが作れる分、「どれを使えばいいか迷う…」という人も多いかもですよね
ということで今回は…
- 「マイボックス」を使った、極めてシンプルなプロフィールデザイン
- 「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン
の2パターンで、それぞれのカスタマイズ方法をご紹介していきます
まず結論として、今回作るデザインは次のイメージです
プロフィール
サンプル太郎
このプロフィールはサンプルです
このプロフィールはサンプルです
このプロフィールはサンプルです
↑「マイボックス」を使った、極めてシンプルなプロフィールデザイン
プロフィール
サンプル太郎
このプロフィールはサンプルです
このプロフィールはサンプルです
このプロフィールはサンプルです
↑「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン
さっそく見ていきましょー🐥
はじめに
この記事では、「クラシックエディタ」の場合を前提に解説していきます。 もう1つの投稿編集タイプ「グーテンベルグ」をお使いの方は、あしからずご了承ください
関連:クラシックエディタとグーテンベルグとは?初心者向けに1から解説【プラグイン「Classic Editor」の導入方法】
関連:クラシックエディタはいつまで使える?2021年末でサポート終了って本当?【少なくとも2022年までは使えそう/代替プラグインもあり】
\ 本気で戦うなら /
―― 検証と改善を重ねた唯一無二のテーマ ――
「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』
今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!
-
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】
続きを見る
-
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】
続きを見る
今回の記事はこちらの章に属しています
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^
目次
AFFINGER5における、サイドバーウィジェット・記事内に設置する「プロフィール用ボックス」のおすすめな作り方【カスタマイズ例】
まずは、(サンプル用でもいいので)記事の編集画面を1つ開きましょう
ちなみに、編集モードは「テキスト」ではなく「ビジュアル」のままでOKです
▼「ビジュアルとテキストって何…?」という方はこちら ▼
-
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】
続きを見る
ここから、「2パターン」のプロフィールデザインを順に見ていきますね🐥
「マイボックス」を使った、極めてシンプルなプロフィールデザイン
編集画面の上部から…
タグ > ボックスデザイン > マイボックス > 基本
を選択します
すると、ショートコードが(上下に2つ)挿入されます
このショートコード内容を、好みのデザインにカスタマイズしていきます

設定していくのは、上下2つのコードのうち「上側(長い方)」です
頭から見ていきますね🐣
title="●●●●●" タイトル名を指定
title="●●●●●"
●●●● にあたる場所に、著者 と入れます
そのほかの入力例: Profile / About me / プロフィール / この記事を書いた人 / このブログの運営者 など…
なにも表示したくない場合は、空欄にすればOK
fontawesome="●●●●●" アイコンを指定
fontawesome="●●●●●"
●●●●● にあたる場所を1回空欄にし、そこにカーソルを合わせた状態で…
タグ > ショートコード補助 > Webアイコン(クラス)
から、「ユーザー」というアイコンを選択します
このアイコンの種類も、任意で好きなものに変えてください
なにも表示したくない場合は、空欄にすればOK
color="#●●●●●●" タイトル名とアイコンのカラーを指定
color="#●●●●●●"
●●●●●● にあたる場所を1回空欄にして、自分のブログで採用してるテーマカラー(=メインで使ってる色)の「カラーコード6桁」を入力します
この「カラーコード」というのは、「HTMLカラーコード: WEB色見本 原色大辞典」様で簡単に調べられます
ちなみに、カラーコードの先頭には # が必ず付きます

bordercolor="#●●●●●●" 枠線のカラーを指定
bordercolor="#●●●●●●"
●●●●●● にあたる場所を1回空欄にして、枠線のカラーに使いたい「カラーコード6桁」を入力します
参考までに、このブログでは #e0e0e0 を使ってます(薄いグレーです)

bgcolor="#●●●●●●" 背景のカラーを指定
bgcolor="#●●●●●●"
●●●●●● にあたる場所を1回空欄にして、背景のカラーに使いたい「カラーコード6桁」を入力します
参考までに、このブログでは(未入力)にしてます(なにも入力しないと、色ナシになります)
borderwidth="●" 枠線の太さを指定
borderwidth="●"
● にあたる場所を1回空欄にして、枠線の太さを指定する数字(基本は1桁)を入力します
- 0 枠線なし
- 1 かなり細い
- 2 やや細い
- 3 普通くらい
- 4 やや太い
- 5 かなり太い
- 6以上 さらに太くなります
参考までに、このブログでは 2 にしてます
borderradius="●" 四隅の丸みを指定
borderradius="●"
● にあたる場所を1回空欄にして、(ボックスの)四隅の丸みを指定する数字(基本は1桁)を入力します
- 0 1と同じ直角
- 1 直角
- 2 ほぼ直角
- 3 少しだけ丸み
- 4 さらに少し丸み
- 5 わりと丸み
- 6以上 さらに丸くなります
参考までに、このブログでは 5 にしてます
titleweight="●●●●" タイトル名を太字に指定
titleweight="●●●●"
●●●● にあたる場所で、タイトル名を「太字」にするかどうかを指定します
- 太字にしたい場合 → "" のなかに、 bold と入力
- 太字にしたくない場合 → "" のなかを空欄にする
参考までに、このブログでは bold にしてます
fontsize="●●" タイトル名のフォントサイズを指定
fontsize="●●"
●● にあたる場所に、タイトル名のフォントサイズを指定する2桁 or 3桁の数字を入力します
デフォルトでは(未入力)になってますが、この(未入力)の状態は「94」というサイズに相当します
つまり、デフォルトの大きさから変更したい場合は、「94」というサイズを基準に指定しましょう
- 80 → かなり小さめ
- 90 → やや小さめ
- 94 → デフォルト(空欄の状態と同じ)
- 100 → わりと大きめ
- 110 → かなり大きめ

参考までに、このブログでは(未入力)にしてます
これで一通り終了です🐥
完成形をチェック
完成形のショートコードを貼ってプレビューで見てみると…
著者
↑ こんな風になりました
あとは…
- 上下のショートコードで囲われたなかに、任意のプロフィールテキストと画像を入れる
- テキストのフォントサイズや中央揃えなどを、任意で調整
- 画像のサイズや中央揃えなどを、任意で調整
すれば完了です
最終的に…
プロフィール
サンプル太郎
このプロフィールはサンプルです
このプロフィールはサンプルです
このプロフィールはサンプルです
↑ このようになりました🐥
「見出し付きフリーボックス」を使った、少しアクセントのあるプロフィールデザイン
編集画面の上部から…
タグ > ボックスデザイン > 見出し付きフリーボックス > 基本
をクリックします
すると、ショートコードが(上下に2つ)挿入されます
このショートコードの上側(長い方)を、好みのデザインにカスタマイズしていきます
設定の流れについては、1つ目の「マイボックス」と基本的に同じです
- title → タイトル名を指定(例:著者 / プロフィール)
- fontawesome → アイコンの種類を指定( タグ > ショートコード補助 > Webアイコン(クラス) から、好きなアイコンを選択)
- bordercolor → 枠線のカラーを指定(カラーコード6桁と、先頭に # をつける。 カラーコードは「WEB色見本 原色大辞典」様で簡単に調べられる)
- color → タイトル名とアイコンのカラーを指定(同上)
- bgcolor → 背景のカラーを指定(同上)
- borderwidth → 枠線の太さを指定(例:1 / 2 / 3 / 4 / 5…)
- borderradius → 四隅の丸みを指定(例:1 / 2 / 3 / 4 / 5…)
- titleweight → タイトル名を太字にするかどうか指定(太字なら bold と入力。太字じゃないなら空欄)
完成形のショートコードを貼ってプレビューで見てみると…
プロフィール
↑ こんな風になりました
あとは…
- 上下のショートコードで囲われたなかに、任意のプロフィールテキストと画像を入れる
- テキストのフォントサイズや中央揃えなどを、任意で調整
- 画像のサイズや中央揃えなどを、任意で調整
で完了です
最終的に…
プロフィール
サンプル太郎
このプロフィールはサンプルです
このプロフィールはサンプルです
このプロフィールはサンプルです
↑ このようになりました
おしまい♪
あずき🐥
\ このブログでも愛用中! /
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション!
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!
✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!
今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!
-
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】
続きを見る
今回の記事はこちらの章に属しています
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^